I encountered an issue with the execution order of generated JavaScript code during bundling, resulting in an error message when everything is bundled together.
An error occurred: [$injector:nomod] Module 'app.demo' is not accessible! This could be due to a misspelling or failure to load the module. Make sure to specify dependencies when registering a module.
After some investigation, it seems like the problem lies in calling
angular.module("app.demo").service()angular.module("app.demo", []) in the combined file appbundle.js.
This is how I set up bundling in Visual Studio 2013. https://i.sstatic.net/zKdM5.png
Here is my folder structure:
https://i.sstatic.net/KlAzG.png
In my index.html, I include it like this:
<script src="App/appbundle.js"></script>
The relevant TypeScript files are as follows:
app.module.ts
module App {
"use strict";
// Create the module and define its dependencies.
angular.module("app", [
// Angular modules
"app.core",
"app.demo",
"app.services"
]);
}
demo.service.ts
module App.Services {
"use strict";
export interface IDemoService {
getData: () => Array<string>;
}
class demoService implements IDemoService {
static $inject: string[] = ["$http"];
constructor(private $http: ng.IHttpService) {
}
getData(): Array<string> {
return ["one", "two", "three"];
}
}
angular.module("app.services").service("demoService", demoService);
}
services.module.ts
module App.Services {
"use strict";
// Create the module and define its dependencies.
angular.module("app.services", []);
}
The issue appears to stem from the way the files are combined into the appbundle.js.
My question now is, how can I resolve this issue without compromising the bundling feature?
I understand that changing the filenames could alter the inclusion order, but I am not keen on making such changes :)