Angular 2 import error with RequireJS - asp.net

Question

I'm unable to import Angular2/core due to the following error:
Module name "angular2/core" has not been loaded yet for context: _. Use require([])
This is my Typescript file:
import {Component, View} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
#Component({
selector: "menu"
})
class MenuComponent {
isActive(path: string) {
return true
}
}
bootstrap(MenuComponent);
Which is compiled with this configuration:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": true,
"sourceMap": true,
"target": "es5",
"module": "commonjs",
"outDir": "../wwwroot/js",
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},
"exclude": [
"node_modules",
"wwwroot"
]
}
This is the compiled Javascript file:
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require("angular2/core");
var browser_1 = require("angular2/platform/browser");
var MenuComponent = (function () {
function MenuComponent() {
}
MenuComponent.prototype.isActive = function (path) {
var page = window.location.pathname;
if (path === undefined || path === '') {
path = '';
}
var result = path === '' ? path === page[page.length - 1] : page[page.length - 1].indexOf(path) > -1;
return result;
};
MenuComponent = __decorate([
core_1.Component({
selector: "menu"
}),
__metadata('design:paramtypes', [])
], MenuComponent);
return MenuComponent;
})();
browser_1.bootstrap(MenuComponent);
//# sourceMappingURL=menu.js.map
My javascript is imported in this order:
<script type="text/javascript" src="~/lib/requirejs/require.js"></script>
<script type="text/javascript" src="~/lib/angular2-polyfills.js"></script>
<script type="text/javascript" src="~/lib/es6-shim.js"></script>
<script type="text/javascript" src="~/lib/system-polyfills.js"></script>
<script type="text/javascript" src="~/lib/angular2-polyfills.js"></script>
<script type="text/javascript" src="~/lib/system.src.js"></script>
<script type="text/javascript" src="~/lib/rx.js"></script>
<script type="text/javascript" src="~/lib/angular2.js"></script>
<script type="text/javascript" src="~/js/menu.js"></script>
I was wondering what's causing the above error. Since I'm unable to change the Javascript code which is compiled from the Typescript file.
I'm also using Visual Studio 2015 with ASP.Net 5.
I know Angular 2 is still in beta and ASP.Net 5 is still in RC, but I doubt this combination is causing the issue.
Thanks for the help.

Answer 1

I think that you use two module loaders, RequireJS and SystemJS. See what you included in your HTML file:
<script type="text/javascript" src="~/lib/requirejs/require.js"></script> <------
<script type="text/javascript" src="~/lib/angular2-polyfills.js"></script>
<script type="text/javascript" src="~/lib/es6-shim.js"></script>
<script type="text/javascript" src="~/lib/system-polyfills.js"></script>
<script type="text/javascript" src="~/lib/angular2-polyfills.js"></script>
<script type="text/javascript" src="~/lib/system.src.js"></script> <------
<script type="text/javascript" src="~/lib/rx.js"></script>
<script type="text/javascript" src="~/lib/angular2.js"></script>
<script type="text/javascript" src="~/js/menu.js"></script>
You only need one. For example SystemJS. That's the reason of the message. Both libraries try to load the angular2/core module...
Edit
If you want to use SystemJS only, you could update your tsconfig.json file:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": true,
"sourceMap": true,
"target": "es5",
"module": "system", <--------
"moduleResolution": "node", <--------
"outDir": "../wwwroot/js",
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},
"exclude": [
"node_modules",
"wwwroot"
]
}
Hope it helps you,
Thierry