Angular 2 import error with RequireJS

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.

Thierry Templier · Accepted Answer · 2016-01-28 09:40:13Z

2

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

edited Jan 28, 2016 at 9:40

answered Jan 28, 2016 at 9:26

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jeffrey Rosselle Over a year ago

When I'm not adding RequireJS I'm getting an error saying that "require is not defined". And after looking at this post github.com/angular/angular/issues/1559, I added RequireJs.

Thierry Templier Over a year ago

Perhaps you could try to change the properties module and moduleResolution into your tsconfig.json file. I updated my answer...

Jeffrey Rosselle Over a year ago

That seems to have fixed it! Thanks Thierry.

Collectives™ on Stack Overflow

Angular 2 import error with RequireJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related