typescript - Konfigurer SystemJS for å laste min Angular 2-komponent

Jeg oppgraderer fra ng1 til ng2. Jeg la til Angular 2 og importerte modulene dens med suksess:

<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>

Jeg la til følgende konfigurasjon:

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

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

 </script>

Nå prøver jeg å legge til min første ng2-komponent/modul og importere den:

Komponenten er skrevet ved hjelp av 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() {}

}

importerer min komponent:

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

Og komponentens ES5-kompilerte kode er:

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;

Resultatet er en 404-feil som leter etter

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

Nå forstår jeg at jeg enten bør:

  1. Last inn komponentfilen min ved å bruke script-taggen, på samme måte som jeg gjorde med Angular2-bunter. Dette resulterer i en JS-feil: required er udefinert. Dette skyldes at filen min ikke er bundlet riktig.
  2. Konfigurer SystemJS/Typescript slik at det vet å laste modulen min uten å legge til et skript-tagg i HTML-en min.

Hva går jeg glipp av her?

Svar #1

Pakkene i systemkonfigurasjonen bør være 'scripts' i ditt tilfelle. Det bør samsvare med mappenavnet. Fordi du har kalt den 'app', legges ikke defaultExtension 'js' til modulens filnavn.

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

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

 </script>

Relaterte artikler