I working with Laravel 5 and Angularjs, Laravel 5 uses Gulp for schedule asset's task and all work fine when use gulp's command, but when I use gulp --production's command and gulp minimize the Angularjs library, the console's chrome output:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:unpr] Unknown provider: e
Below my code:
gulpfile.js
First step, I copy all javascripts from bower folder to assets/js
.copy(
'resources/assets/bower_resources/angular/angular.js',
'resources/assets/js/vendor/angular.js')
.copy(
'resources/assets/bower_resources/angular-bootstrap/ui-bootstrap.js',
'resources/assets/js/vendor/ui-bootstrap.js')
.copy(
'resources/assets/bower_resources/ng-busy/src/angular-busy.js',
'resources/assets/js/vendor/angular-busy.js')
.copy(
'resources/assets/bower_resources/angular-ui-notification/dist/angular-ui-notification.js',
'resources/assets/js/vendor/angular-ui-notification.js')
second step, I put together all libraries copied inside one file "libraries.js"
.scripts(['vendor/angular.js',
'vendor/ui-bootstrap.js',
'vendor/angular-busy.js',
'vendor/angular-ui-notification.js',
'app.js'],'public/scripts/libraries.js')
My app.js
var app = angular.module('app', ['ui.bootstrap','ngBusy','ui-notification']);
app.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
I try different combination, but not working.
Please help!
Have you tried using inline annotation for dependency injection?
Here's a previous question that solves this problem
"Uncaught Error: [$injector:unpr]" with angular after deployment
Related
I am having a problem with a controller that doesn't connect with the server.
I solved alot of errors but still I get this error:
Uncaught Error: [$injector:modulerr]
I searched and I found out that I need to use ngRoute. I used the CDN in the html file
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
and in the controller JS file:
var courseApp = angular.module('courseApp', ['ui.bootstrap', 'seeMoreFilter', 'ngSanitize', 'ngRoute']);
but still it gaveme the same error
I installed it with npm
npm install --save angular-route#1.7.9
I got another error in addition to the first one:
angular-route.js:102 Uncaught TypeError: b.module(...).info is not a
function
This error usually happens when you are trying to inject a module that is not available whe the apps loads. Based on the code that you posted I would check this modules 'ui.bootstrap', 'seeMoreFilter', 'ngSanitize'
because I don't see where are you loading this modules.
Happy coding and stay safe!!!
In Jhipster v3.9.1,
i tried add module to my projet, but i can't .
For example, i want to add this module http://hakib.github.io/MassAutocomplete/
so i run bower install angular-mass-autocomplete --save
after i run gulp inject:vendor and gulp inject:dep
So the index.html is refreshed now and the module is there 👍
So when i want to use it, i tried to add the .$inject=[] array , it didn't work, i tried use it next to module, it didn't work too ! .module('moduleName', ['mass-autocomplete'])
It gives me always this error :
angular.js:13920 Error: [$injector:unpr] Unknown provider: mass-autocompleteProvider <- mass-autocomplete <- ControllerName
Can't we use a bower module or NPM module ??
Thank you
The first javascript example on linked page shows the injection
var app = angular.module('app', ['ngSanitize', 'MassAutoComplete']);
when in your question you do it like
.module('moduleName', ['mass-autocomplete'])
change 'mass-autocomplete' to 'MassAutoComplete' and it should work - unless you didn't included the JS library in your output JS
Currently working on a angular app where I have my application specific angular modules under folder App.
Using Visual Studio extension - Web Essential 2012, created a javascript bundle file for local angular modules and related files(controllers, directives, services) into app.all.js.bundle files under App folder.
Structure looks now like :
Now, when I use app.all.js into my index.html application works fine for me, however when change to `app.all.min.js, I am getting following error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=app&p1=Error%3A%20%…0g%20(http%3A%2F%2Flocalhost%3A59405%2FScripts%2Fangular.min.js%3A39%3A222) angular.js:38
when using app.all.min.js I am switching angular.js to angular.min.js.
Do I need to do anything more?
make sure you are injecting the dependency service and controller properly.
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
I've cloned this repo: https://github.com/Hyra/Frickle
Its quite awesome! But I'm trying to add more angular modules and I'm not succeeding.
In the main directory I run npm install angular-animate. This adds the angular-animate folder files to the node_modules folder within the project right alongside the other angular modules and the angular library itself.
In the package.json file, I've added to the dependencies angular-animate by adding the following
"dependencies": {
"angular": "~1.3.0",
"angular-ui-router": "~0.2.11",
"angular-animate": "~1.3.5",
...
In main.js
'use strict';
require('angular');
var uiRoute = require('angular-ui-router');
var ngAnimate = require('angular-animate');
var app = angular.module('MyApp', [uiRoute, ngAnimate]);
Angular-ui-router works fine in the original setup. The stack uses gulp and browserify to concatenate and minify the javascript files but as I'm kind of new to angular, I'm not sure why I'm having issues adding a simple dependency to this stack. Hopefully this is simple and someone can tell me what I am doing wrong.
The error I get in the console is as follows:
Uncaught Error: [$injector:modulerr] Failed to instantiate module MyApp due to:
Error: [$injector:modulerr] Failed to instantiate module {} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
This looks really strange: var app = angular.module('MyApp', [uiRoute, ngAnimate]);
According to: https://code.angularjs.org/1.3.10/docs/api/ng/function/angular.module
The requires array is supposed to be an array of strings. So it should really be:
var app = angular.module('MyApp', [uiRoute.name, ngAnimate.name]);
I'm attempting to get a brand new Ionic project working with angular-local-storage with no luck. I'm somehow referencing angular-local-storage incorrectly, but I don't know how.
https://github.com/grevory/angular-local-storage
ionic start myApp tabs
cd myApp
ionic platform add ios
ionic build ios
bower install angular-local-storage
// app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'LocalStorageModule'])
Then
ionic serve
Error
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module LocalStorageModule due to:
Error: [$injector:nomod] Module 'LocalStorageModule' 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.
What simple thing am I missing?
I'm not familiar with ionic, but it looks to me like you're missing the script.
Are you sure that you have the script included on the page? I'd confirm that bower did indeed install the script where you think it should be and then make sure its actually referenced before this error is thrown.
Guy should need to check that have you added link to it's script
src="https://rawgit.com/grevory/angular-local-storage/master/dist/angular-local-storage.min.js"
using <script></script> tag in your index file. It might be the issue. For the guys who will see this in future.