Angular 1.5.8, Webpack 2.1.0-beta.25
I'm getting an error that angular is undefined when I try to use it with webpack. I've tried to load angular as an external and as part of the package as detailed here: Webpack ProvidePlugin vs externals?
I've added this code at my entry point to test:
import * as angular from 'angular';
// import angular from 'angular'; <!-- have tried this too
angular.module('test', []);
I can hold my mouse over the line of code in the debugger and it seems to be able to find angular. Yet once I hit F10 I get the error.
My webpack.common.config:
externals: {
jquery: 'jQuery',
window: 'window',
angular: 'angular'
},
new webpack.ProvidePlugin({
$: 'jquery',
angular: 'angular',
_: 'lodash',
moment: 'moment'
}),
Index.html (when providing externally):
<body id="bootstrap-overrides">
<sb-app></sb-app>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/slideout/0.1.11/slideout.min.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="sbMain.bundle.js"></script>
</body>
sbMain.bundle.js is where the error is occuring, even though it's loaded last (angular is first)
Related
inside index.html
<script src="../node_modules/howler/dist/howler.js" type="text/javascript"></script>
inside app.js
angular.module('starter', ['ionic', 'ngCordova', 'ion-gallery', 'ngKookies',
'chart.js', 'angularjs-gauge', 'mediaPlayer', 'ang-drag-drop', 'Howler']);
when using HOWL
var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
this code gives following error
Error: [$injector:modulerr] Failed to instantiate module Howl due to:
Error: [$injector:nomod] Module 'Howl' is not available! You either misspelled the
module name or ...
<script src="../node_modules/howler/dist/howler.js"
type="text/javascript"></script>
Insted of getting howler.js from the node modules user need to define howlerjs cdn inside the index file
<script
src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.3/howler.js">
</script>
I'm traying to use Angular ui Notifications. When I tray to install it browser tells me "Error: "[$injector:unpr]". The problem is that for me the dependencies are ok. The code:
var app = angular.module('app', ['ngRoute', 'ngTable', 'ui-notification']);
app.controller('clientesController', ['$scope', 'NgTableParams', 'ui-notification', 'clientesService',
function ($scope, NgTableParams, Notification, clientesService) {
EDIT:
The way I'm pulling in my js files:
<!--Angular Files-->
<script src="app/lib/angular.min.js"></script>
<script src="app/lib/angular-route.min.js"></script>
<script src="app/lib/ng-table.js"></script>
<script src="app/lib/angular-ui-notification.min.js"></script>
<!-- App files-->
<script src="app/app.js"></script>
<script src="app/controllers/clientes/clientesController.js"></script>
<script src="app/services/clientes/clientesService.js"></script>
Thanks for your help!
https://github.com/alexcrack/angular-ui-notification#service
Module name: "ui-notification"
Service: "Notification"
Configuration provider: "NotificationProvider"
Change then name of the injected service to the correct name:
app.controller('clientesController', ['$scope', 'NgTableParams', 'Notification'...
I have the following problem.
Here's my angular app defenition:
angular.module('app', [
'ui.router',
'ui.utils',
'ngCookies',
'oc.lazyLoad'
]);
Here's part of my main html file:
<!-- ANGULAR -->
<script src="assets/plugins/angular/angular.js" type="text/javascript"></script>
<script src="assets/plugins/angular-ui-router/angular-ui-router.min.js" type="text/javascript"></script>
<script src="assets/plugins/angular-ui-util/ui-utils.min.js" type="text/javascript"></script>
<script src="assets/plugins/angular-sanitize/angular-sanitize.min.js" type="text/javascript"></script>
<script src="assets/plugins/angular-oc-lazyload/ocLazyLoad.min.js" type="text/javascript"></script>
<!--ngCookies-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-cookies.js" type="text/javascript"></script>
So I supposed I've done all I need to do to use $cookieStore. And yet, when I run my app, I see a blank browser window, and in console:
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module ngCookies due to:
[$injector:nomod] Module 'ngCookies' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.15/$injector/nomod?p0=ngCookies
minErr/<#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:63:12
module/<#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:1774:1
ensure#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:1698:38
module#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:1772:1
loadModules/<#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:4115:22
forEach#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:323:11
loadModules#file:///D:/Webstorm/Magic/assets/plugins/angular/angular.js:4099:5
loadModules/<#file:///D:/Webstorm/Magic/assets/plugins/angu
Can anyone tell me what did I forget to do?
Things you could try:
Add http:// to the src
Try downloading with bower then add it like the rests
I am running Ionic and trying to use cordovaHTTP for SSL pinning. I followed the instructions on the the github but I get the error that the module isn't there.
My index.html
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
My app.js:
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'cordovaHTTP'])
In services.js:
angular.module('starter.services', [])
.service('MyService', function(cordovaHTTP) {
cordovaHTTP.enableSSLPinning(true, function() {
console.log('successful ssl pin');
cordovaHTTP.useBasicAuth("user", "pass", function() {
console.log('successful basic auth!');
cordovaHTTP.get(url, function(response) {
console.log(response.status);
}, function(response) {
console.error(response.error);
});
}, function() {
console.log('error basic auth');
});
}, function(){
console.log('error ssl pin');
});
});
This results in the error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module cordovaHTTP due to:
Error: [$injector:nomod] Module 'cordovaHTTP' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I have tried messing with this countless times but no dice. Any help is appreciated.
Actually I think you're initializing your module multiple times. In angular factories / services are singleton. Your code look like something this
angular.module('starter', ['ionic', 'MyService', 'cordovaHTTP']) //setters for a module
Please make sure you're injecting right service or factory name. You should change your service declaration way too, like below
angular.module('starter') //Don't use [] it is only getter of above initialized module
.service('MyService', function(cordovaHTTP){
//Code
});
Also please don't forget to load app.js at last. Hope it may help you.
I found the solution from github issues.
Make sure that you load the angular js files after cordova js files in index.html.
Here's my index.html:
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/jquery/jquery-3.2.1.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
Is angular defined?
cordova-HTTP will only instantiate the cordovaHTTP module if angular is defined otherwise it will fall back to window.cordovaHTTP.
You could use this this:
document.addEventListener("deviceready", function () {
console.log(window.cordovaHTTP);
console.log(window.CordovaHttpPlugin); // For some version it's instantiated in this name if angular is not defined.
}, false);
Manually bootstrap your AngularJS app instead of using the ng-app attribute.
Code:
<script>
angular.element(document).ready(function() {
document.addEventListener("deviceready", function () {
console.log(window.cordovaHTTP);
console.log(window.CordovaHttpPlugin); // For some version it's instantiated in this name if angular is not defined.
angular.bootstrap(document, ['MyAppName']);
}, false);
});
</script>
When using it in your controller or service, do not need to add the $.
Just use it like this:
angular.module('MyAppName.services', [])
.service('MyService', ['cordovaHTTP', function(cordovaHTTP){
// Your codes are here.
}]);
I'm injecting stripe angular into a module to create stripe tokens, but i seem to be having some dependecy injection issues:
i've got both the Stripe.js and the angular-stripe directive loading in index.html
<!-- Stripe includes-->
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript" src="components/stripe-angular/stripe-angular.js"></script>
<!-- Ends Stripe includes -->
<script src="app.js"></script>
<script src="javascripts/form.js"></script>
<script src="factory/appointments.js"></script>
<!-- <script src="directives/datepicker.js"></script>
--><script src="controllers/main.js"></script>
<script src="controllers/form-controller.js"></script>
and I'm injecting correctly based on the docs:
angular.module('formApp')
.controller('formController', ['$scope', 'Appointment', 'stripe' , function($scope, Appointment) {
Stripe.setPublishableKey('my-key-here');
}]);
what am i doing wrong?
here is my error
Error: [$injector:unpr] Unknown provider: stripeProvider <- stripe <- formController
http://errors.angularjs.org/1.3.14/$injector/unpr?p0=stripeProvider%20%3C-<div ui-view="" class="ng-scope">tripe%20%3C-%formController
You list stripe as a dependency, but never pass it into your function:
.controller('formController', ['$scope', 'Appointment', 'stripe' , function($scope, Appointment) {
Just add a stripe parameter:
.controller('formController', ['$scope', 'Appointment', 'stripe' , function($scope, Appointment, stripe) {
By angular-stripe directive, do you mean https://github.com/gtramontina/stripe-angular ?
If so, you are misunderstanding its usage(yes its doc is poor). You should add stripe as a module dependency instead of a service to inject. Change the code in your app.js to something like this:
angular.module('formApp', ['stripe']);
And remove the stripe in your injection annotaion, then you are good to go.
You may also need to add Stripe.setPublishableKey('your-publishable-key'); into a suitable place, possibly a run block or a config block.
The docs are just fine.
First make sure that you are loading the required files:
<script src="https://js.stripe.com/v2/"></script>
<script src="/vendor/angular/angular.js"></script>
<script src="/vendor/angular-stripe/release/angular-stripe.js"></script>
Then add the angular-stripe module to your app:
angular.module('app', [ 'angular-stripe']...
In your config block load the stripeProvider and initialize it with your Stripe API key.
angular.module('app').config(function(stripeProvider) {
stripeProvider.setPublishableKey('yourapikey');
....
Finally you can use this in your controller:
angular.module('app').controller('CheckoutCtrl', function(stripe) {
stripe.card.createToken(card) ...
Ensure you do all these steps. My guess from your error message is that you did not load the angular-stripe' module in your app which would then cause any call tostripeProvider` to fail with that error.