I get injection error after minification. I can't find what is wrong with this code.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/stylesheets/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="app" ng-cloak>
<div ng-controller="SideNavController as vm">
<p>
{{vm.name}}
</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.min.js"></script>
<!-- <script src="layout/main-container.controller.js"></script> -->
<!-- My application -->
<script src="/scripts/app.min.js"></script>
</body>
</html>
Here is my script after concat and minification
/scripts/app.min.js
!function()
{"use strict";function n(){}
angular.module("app").config(n)}(),
function(){angular.module("app",["ngMaterial","ngSanitize","ngAnimate","app.layout"])}()
,function(){"use strict";function n(){console.log("run app")}
angular.module("app").run(n)}(),
function(){"use strict";function n(){var n=this;n.name="SideNavController"}
angular.module("app.layout",[]).controller("SideNavController",n)}();
I get this error:
angular.js:2082 Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.5.8/$injector/nomod?p0=app(…)
angular.js:4640 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=app&p1=Error%3A%20%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js%3A189%3A487)(…)
original sidenav.controller.js
(function(){
'use strict'; // ECMAScript version 5
angular.module('app.layout', [])
.controller('SideNavController', SideNavController);
/* #ngInject */
function SideNavController() {
var vm = this;
vm.name = "SideNavController";
}
})();
app.module.js
(function(){
angular.module('app', [
/* AngularJS modules */
'ngMaterial',
'ngSanitize',
'ngAnimate',
/* app.feature modules */
'app.layout'
/* cross.app modules */
]);
})();
I have to change the order of minified functions in app.min.js.
!function()
{
angular.module("app",["ngMaterial","ngSanitize","ngAnimate","app.layout"])
}(),
function(){
"use strict";function n(){}
angular.module("app").config(n)
}(),
function()
{
"use strict";
function n(){
console.log("run app")
}
angular.module("app").run(n)
}(),
function()
{
"use strict";
function n(){var n=this;n.name="SideNavController"}
angular.module("app.layout",[]).controller("SideNavController",n)
}();
Related
I am making a small application in angular to study, but the directive and the view are not being rendered, I already investigated my code, but I did not find anything, code can be seen below:
Index.html
<!DOCTYPE html>
<html lang="pt-br" ng-app="rdi_music">
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Carregando CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-overloads.css">
<!--Carregando os scripts-->
<!-- App core -->
<script src="js/core/angular.min.js"></script>
<script src="js/core/angular-animate.min.js"></script>
<script src="js/core/angular-sanitize.min.js"></script>
<script src="js/core/angular-route.min.js"></script>
<script src="js/core/angular-resource.min.js"></script>
<script src="js/ui/ui-bootstrap-tpls-2.5.0.min.js"></script>
<!-- My Modules -->
<script src="js/main.js"></script>
<script src="js/controllers/index-controller.js"></script>
<script src="js/controllers/musicas-controller.js"></script>
<!-- My Directives -->
<script src="js/directives/header.js"></script>
<title>Music</title>
</head>
<body>
<header-menu></header-menu>
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
main.js
angular.module('rdi_music', ['ngRoute', 'ngResource', 'musicasController',
'header'])
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when('/musicas',{
templateUrl: 'views/musicas/index.html',
controller: 'musicasController'
});
});
index-controller.js
angular.module('rdi_music', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.controller('indexController',function($scope){
$scope.isNavCollapsed = true;
$scope.isCollapsed = true;
$scope.isCollapsedHorizontal = true;
});
musicas-controller.js
angular.module('rdi_music', ['ui.bootstrap'])
.controller('musicasController', function($scope){
});
header.js
angular.module('header', ['ui.bootstrap'])
.directive('headerMenu', function(){
var ddo = {
restrict: "AE",
templateUrl: "views/directives/header.html"
};
return ddo;
});
once the module injected to the angular.module no need to inject them again. Just get the reference only.
remove the 'musicasController' from the module injector. Controllers don't need to inject to the modules
angular.module('rdi_music', ['ngRoute', 'ngResource',
'header'])
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when('/musicas',{
templateUrl: 'views/musicas/index.html',
controller: 'musicasController'
});
});
index-controller.js
angular.module('rdi_music')
.controller('indexController',function($scope){
$scope.isNavCollapsed = true;
$scope.isCollapsed = true;
$scope.isCollapsedHorizontal = true;
});
musicas-controller.js
angular.module('rdi_music')
.controller('musicasController', function($scope){
});
Demo
<html>
<head>
<script type="text/javascript" src="js/angular/angular.js"></script>
<script type="text/javascript" src="js/angular/angular-route.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title></title>
<meta name="author" content="Stanislau">
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
{{Message}}
</div>
</body>
</html>
main.js code
var app = angular.module('testApp', ['ngRoute']);
app.controller('testCtrl', function($scope){
$scope.Message = '123';
});
Error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module testApp due to:
Error: [$injector:nomod] Module 'testApp' 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.6.1/$injector/nomod?p0=testApp
if code:
<html>
<head>
<script type="text/javascript" src="js/angular/angular.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title></title>
<meta name="author" content="Stanislau">
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
{{Message}}
</div>
</body>
</html>
main.js code:
var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope){
$scope.Message = '123';
});
The error is the same!!
Test version address: http://zadanie.salesdep.by/
Code is working fine.Please check the library reference path
<div ng-app="testApp" ng-controller="testCtrl">
<div ng-controller="testCtrl">
{{Message}}
</div>
</div>
<script>
var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope){
$scope.Message = '123';
});
</script>
Im trying to make my first modal using Angularjs. I'm not sure or why I'm getting this error. I have error:
TypeError: Cannot read property 'open' of undefined
Here is my code:
Layout:
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<script src="~/Scripts/angular.js" type="text/javascript"></script>
<script src="~/Scripts/angular-resource.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="~/Scripts/angular-route.js" type="text/javascript"></script>
<script src="~/Scripts/ng-grid.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap.js" type="text/javascript"></script>
<script src="~/Scripts/angular-ui/ui-bootstrap.js" type="text/javascript"></script>
<script src="~/Scripts/app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="~/Content/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css" />
</head>
<body ng-controller="CtrlController">
#RenderBody()
</body>
</html>
app.js:
(function() {
var app = angular.module("app", ["ngGrid", "ui.bootstrap"]);
app.controller("CtrlController", function ($scope, $http, $log, $modal) {
$scope.on = function ($modal) {
alert("dddd");
$modal.open(
{
templateUrl: 'http://localhost:58652/Home/TestView',
controller: "CtrlController"
}
);
}
});
})()
HTML for button:
<div ng-click="on()" class="gridStyle" ng-grid="gridOptions">
</div>
<button ng-click="on()" type=button class="btn">Добавить</button>
But when I click the button, I get the error Cannot read property 'open' of undefined. Why is that?
Remove $modal parameter from $scope.on function definition and it should work. You don't have to pass it with ngClick wince you already have $modal service in scope:
$scope.on = function() {
$modal.open({
templateUrl: 'http://localhost:58652/Home/TestView',
controller: "CtrlController"
});
};
I'm rebuilding this tutorial using the ionic framework, but I'm getting stuck early on with the firebase auth. When I built this tutorial app in just straight angular before, it worked, but now fitting it into ionic, I'm getting the following error:
Uncaught Error: [$injector:unpr] Unknown provider: angularFireAuthProvider <- angularFireAuth
The basic code layout is below:
app.js
'use strict';
var app = angular.module('wefeed',
[ 'ionic'
, 'wefeed.config'
, 'firebase']);
config.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('wefeed.config', [])
app.config(
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('/', {
url: '/',
templateUrl: 'views/default.html' });
$urlRouterProvider.otherwise("/");
})
// establish authentication
.run(['angularFireAuth', 'FBURL', '$rootScope',
function(angularFireAuth, FBURL, $rootScope) {
angularFireAuth.initialize(new Firebase(FBURL), {scope: $rootScope, name: 'auth', path: '/signin'});
$rootScope.FBURL = FBURL;
}])
// your Firebase URL goes here
// should look something like: https://blahblahblah.firebaseio.com
.constant('FBURL', 'xxxxxxxxxxxxx.firebaseIO.com');
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="http://static.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/firebase/angularFire.js"></script>
<script src="js/app.js"></script>
<script src="js/config.js"></script>
<!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
<script src="cordova.js"></script>
</head>
<body ng-app="wefeed">
<section class="container">
<ion-nav-view></ion-nav-view>
</section>
</body>
</html>
I am having issues trying to show a partial html on my index.html file (Nothing is displayed).
Please see my index.html code:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/animations.css"/>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-animate.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/animations.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</head>
<body>
<li>
Show People
</li>
<div ng-view></div>
</body>
</html>
Then I try to load people.html that is on partials directory, using routing on app.js:
'use strict';
// Declare app level module which depends on filters, and services
var myApp = angular.module('myApp', ['ngRoute', 'filters', 'services', 'directives', 'controllers']);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/people', {
templateUrl : 'patials/people.html',
controller : 'PeopleController'
}).otherwise({
redirectTo : '/people'
});
}]);
If I replace the ng-view part on my index.html with my template file content, everything displays fine, so I dont think I have an issue on my controller declarations.
Can you take a look and help me figuring out what's wrong?
Thanks!
You are using var myApp = angular.module('myApp', []); inside your controller. If you add an array as a second parameter in angular.module, the module is automatically created as a new one and overrides the previous one with the same name, so the config is not working anymore, because in your code it is defined on a different module.
Just change the code in the PeopleController definition from
var myApp = angular.module('myApp', []);
to
var myApp = angular.module('myApp');
and it should work
edited plunk:
http://plnkr.co/edit/bK9vHSPxKmijhlLPS5C5?p=preview