Configure SystemJS to load my Angular 2 component

Question

I am upgrading from ng1 to ng2. I added Angular 2 and successfully imported its modules:

<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="/node_modules/angular2/bundles/http.dev.js"></script>
<script src="/node_modules/angular2/bundles/router.dev.js"></script>

I added the following config:

 <script>
        System.config({
          packages: {
            app: {
              format: 'cjs',
              defaultExtension: 'js'
            }
          }
        });

        System.import('scripts/bootstrap.js').then(null, console.error.bind(console));

 </script>

Now I am trying to add my first ng2 component/ module and to import it:

The component it written using TypeScript:

import {Component} from 'angular2/core';

@Component({
  selector: 'my-component',
  templateUrl: 'app/components/my-component/my-component.html',
  styleUrls: ['app/components/my-component/my-component.css'],
  providers: [],
  directives: [],
  pipes: []
})
export default class MyComponent {

  constructor() {}

}

importing my component:

import MyComponent from './components/my-component/my-component';

And component's ES5 compiled code is:

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
    switch (arguments.length) {
        case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
        case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
        case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
    }
};
var core_1 = require('angular2/core');
var MyComponent = (function () {
    function MyComponent() {
    }
    MyComponent = __decorate([
        core_1.Component({
            selector: 'my-component',
            templateUrl: 'app/components/my-component/my-component.html',
            styleUrls: ['app/components/my-component/my-component.css'],
            providers: [],
            directives: [],
            pipes: []
        })
    ], MyComponent);
    return MyComponent;
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = MyComponent;

The result is a 404 error looking for

http://localhost:9000/scripts/components/my-component/my-component

Now, I understand that I should either:

Load my component file using script tag, similar to what I did with Angular2 bundles. This ends up with a JS error: required is undefined. This is because my file is not bundled correctly.
Config SystemJS / Typescript so it will know to load my module without adding a script tag to my html.

What am I missing here?

I have not used SystemJS yet, but just from the ES5 output, it seems you have not set the module compiler option (it seems to be producing nodeJS output). See github.com/Microsoft/TypeScript/wiki/…. You have to specify the option in tsconfig.json or your build tool. — billc.cn
I configured my module to use commonjs, so this was not the issue here... — Yaniv Efraim

Poul Kruijt Poul Kruijt · Accepted Answer · 2015-12-23T10:17:27

The packages in the System config should be 'scripts' in your case. It should match the folder name. Because you have it named 'app', it does not add the defaultExtension 'js' to the modules filename

<script>
        System.config({
          packages: {
            scripts: {    // <--- right there
              format: 'cjs',
              defaultExtension: 'js'
            }
          }
        });

        System.import('scripts/bootstrap.js').then(null, console.error.bind(console));

 </script>

Configure SystemJS to load my Angular 2 component

1 Answers