I have generated a minified angular app with grunt. In the site I get an error:
Cannot GET /views/tabs.html
However when I look in the minified script.js I can see:
angular.module("app").run(["$templateCache", function($templateCache) {
"use strict";
$templateCache.put("views/tabs.html", '<div>hello</div>'}
]);
How can I resolve this error? Why is it not visible to the application?
Related
I am attempting to upgrade a large angular.js app (1.5.9) to the latest version of Angular.
I am in the process of turning the app into a hybrid AngularJs/Angular app and have reached this step in the guide:
https://angular.io/guide/upgrade#bootstrapping-hybrid-applications
So far I have changed from using gulp to webpack 4 and the app is working the same as before.
The issue I am having is, when I switch from using the ng-app directive in my index.html to bootstrapping in Javascript the app fails to start, throwing this error:
Uncaught Error: [$injector:unpr] Unknown provider: StateServiceProvider <- StateService
This is coming from my app.js file which looks like this:
angular.module('app-engine', [
'app-engine.state',
'app-engine.api',
// other modules
])
.factory('bestInterceptor', bestInterceptor)
// other configs which aren't throwing Unknown provider errors
.run(startUp);
bestInterceptor.$inject = ['StateBootstrappingService'];
function bestInterceptor(StateBootstrappingService) {
return {
request: config => {
if (!StateBootstrappingService.isBestSsoOn()) {
config.headers['x-impersonated-user'] = StateBootstrappingService.getUserName();
}
return config;
}
};
}
startUp.$inject = ['$rootScope', '$state', '$timeout', 'StateService']
function startUp($rootScope, $state, $timeout, StateService) {
// start up code
}
There is a separate app.modules.js file, which defines the other modules in the app.
Including:
angular.module('app-engine.state', ['rx', 'app-engine.api']);
The service which is mentioned in the Unknown provider error looks like this:
(function() {
'use strict';
angular
.module('app-engine.state')
.factory('StateService', StateService);
StateService.$inject = [
'$state',
'$log',
'rx',
// a few other services that exist in the app
];
function StateService(
// all the above in $inject
) {
// service code
}
})();
As the guide instructs, I am removing the ng-app="app-engine" from my index.html and adding it into the JavaScript instead. I've added it at the bottom on my app.modules.js file.
angular.bootstrap(document.body, ['app-engine']);
After this change is when the Unknown provider error is thrown. I have confirmed the source is my startUp function in app.js. I have tried including all the modules in the app in the 'app-engine' requires array, which did not change anything. It's interesting that the bestInterceptor function is not throwing any errors, despite also using a service (The StateBootstrappingService is being set up in the same way as the StateService).
Is there anything obvious I am doing wrong? Or anyone have any ideas how to solve this?
Try this:
angular.element(document).ready(function () {
angular.bootstrap(document.body, ['app-engine'])
})
For me this was necessary because the other sub components (providers and services) had not yet been added to the module yet. Running the it on "document.ready()" gives those items an opportunity to attach before trying to manually bootstrap (because they cannot be added later when manually bootstrapping)
I don't love the use of document.ready() so I'm still looking for a more offical way to do this
I am trying to move an angular 1.6 application from ES5 to ES6.
The index html contains the name of the app: ng-app="appSuite"
and we normally reference the individual js files with script tags.
I've now changed the html to refer to the bundle file which should have all the sources in because I've added imports to the app.module.js ..
We use grunt and I've added babel and browserify steps.
The top of the app.module.js now has:
"use strict";
export default appSuite; <<< Is this correct ?
import './access.controller.js';
import './apiClient.service.js';
After Babel it becomes :
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
require('./access.controller.js');
Then the browserify changes it to:
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof
require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var
f=new Error("Cannot find module '"+o+"'");throw
f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o]
[0].call(l.exports,function(e){var n=t[o][1][e];return s(n?
n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof
require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})
({1:
[function(require,module,exports){
"use strict";
(function () {
"use strict";
angular.module("appSuite").controller("accessController", accessController);
Unfortunately when I run it now gives:
Uncaught Error: [$injector:nomod] Module 'appSuite' is not available!**
Anyone have an idea what I'm missing here or have a way to debug it ?
Thanks in advance and Happy Holidays !
You need to have empty dependencies loaded with your module ,
const appSuite= angular.module('appSuite', [])
export default appSuite
I have implemented DirPagination in angularJs and it is working fine locally, but when I deployed it on server, it throws error
[$injector:unpr]
I assume this is minified version related issue, as on server my all js files including controller and app are using minified version,
Implementation
Simply indluded dirPagination.js file and pagination html file
Then after
var App= angular.module('App', ['ngRoute', 'use', 'ngMessages', 'angularUtils.directives.dirPagination']);
Then
In View
<li dir-paginate="u in list| filter:q | itemsPerPage: pageSize" current-page="currentPage">
And it is working with non-minified version.
Update
I confirmed this is minified version issue, as when I removed app and controller js min to non min files, it is working.
Any help how to fix this
You probably didn't use the synthax to keep your code right when minified.
When minifying, all the injections are remplaced with shorter names.
Let's take an example.
myApp.controller('MyCtrl', function($scope, $location) { ... });
When minified will be transform to:
myApp.controller('MyCtrl', function(a, b) { ... });
As you can see, you lost the dependancies names.
JavaScript variables are renamed, but strings stay unchange. You should change it to this synthax (as advice by the Angular team):
myApp.controller('MyCtrl', ['$scope', '$location', function($scope, $location) { ... }]);
I'm getting this error when using the recommended component loading method (See step 3 )
Error: Module name "angular-ui-router" has not been loaded yet for context: _. Use require([])
app module definition:
<script>
var adminApp = angular.module('adminClientApp', [require('angular-ui-router'), 'ngMaterial', 'ngResource', 'ngMessages', 'ngMdIcons']);
</script>
According to the doco, there isn't a need to include a script tag - it will be loaded via requirejs
Requirejs main.js definition:
require.config({
paths:{
'angular-ui-router': 'vendor/angular-ui-router/release/'
},
shim:{
'angular': {
exports: 'angular'
}
}
});
app layout:
-- root
index.html
main.js
-- js
-- app (angular files here)
app.js
-- vendor (3rd party libs)
requirejs main.js setting in index.html
<script data-main="main.js" src="vendor/requirejs/require.js"></script>
The guide you are using is not made for RequireJS. After applying the instructions there, you are doing something like this:
<script>
var myApp = angular.module('myApp', [require('angular-ui-router')]);
</script>
This will generally fail to work with RequireJS because calling require with a single string fails unless the module is already loaded. This call is guaranteed to work only if it is inside a define, like this:
define(function (require) {
var myApp = angular.module('myApp', [require('angular-ui-router')]);
});
This code is a module which should be in a separate .js file and loaded with require(['module name']). (Note that the parameter is an array of strings. This is a different form of require than the one that takes a single string parameter.)
You should use Component, which is what the author of the guide you are using was using when he/she wrote the guide, or a tool that is equivalent to it. Otherwise, you need to convert your code to work with RequireJS.
My app.js looks like below:
//app.js
var angular = require('angular');
angular.module('app', []);
angular.module('app').controller('MainCtrl', function ($scope) {
$scope.test = "abc";
});
//index.html
<body ng-app="app" ng-controller="MainCtrl">
{{test}}
<script src="dist/app.js"></script>
</body>
The directory structure is as follows:
app/
index.html
app.js
node_modules/
angular/
Angular was installed using npm install.
I then compile the code using the following command:
browserify --entry app.js --outfile dist/app.js
Then upon opening the file index.html in the browser I get the following errors:
Uncaught TypeError: undefined is not a function
angular.module('app', []);
Further errors:
2014-11-30 19:44:46.345app.js:4082 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' 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 could i be missing ?
.
Finally figured it out.
What had to be done is as below:
Create a angular-index.js file in node_modules/angular folder
Contents of this file are as below:
require('./angular.min.js');
module.exports = angular;
Then include this file in the browser option of the package.json file.
How exactly this makes things work I am not yet sure.. but this got the code rolling.