javascript - Wie kann man Angular2 in einem generierten Distributionsordner zum Laufen bringen?

Ich versuche, mein eigenes Starterprojekt für Angular2+TypeScript (+SystemJS+Gulp4) aufzusetzen, aber ich bin auf einige Probleme gestoßen, als ich vom Kompilieren des TypeScript im gleichen Ordner wie das JavaScript und mit Zugriff auf den node_modules-Ordner dazu gewechselt habe, alles in einen dist-Ordner zu legen (mit dist/js für das kompilierte JavaScript und dist/js/lib für die Vendor-Dateien (angular2.dev.js, http.dev.js, router.dev.js, Rx.js, system.src.js usw.)).

Sie können das komplette Projekt auf GitHub (souldreamer/event-planner) finden.

Ist jemand bereit, einen Blick darauf zu werfen und zu sehen, was ich falsch mache? Wahrscheinlich liegt es an der SystemJS-Konfiguration in index.html, denn je nachdem, welche Konfiguration ich versuche, bekomme ich entweder kein tatsächliches Laden von boot.js (die Netzwerkanzeige zeigt jedoch, dass alles geladen wurde, aber das System.import()-Promise löst sich nie auf), oder Fehler wie core_1.Component ist keine Funktion oder core_1.Input ist keine Funktion, wenn ich auch die InputComponent hinzufüge.

Hinweis: Bevor Sie daran denken, dies als Duplikat zu markieren, habe ich in den letzten Tagen das Netz und StackOverflow durchsucht und jede Variation ausprobiert, die ich finden konnte, daher ist es wirklich kein Duplikatproblem (auch wenn es viele ähnliche Fragen gibt).

Hier sind einige Stücke, die meiner Meinung nach relevant sein könnten, falls Sie das gesamte Projekt nicht ansehen möchten:

• TypeScript-Kompilierung (Gulp4-Aufgabe):

  function tsCompile() {
    var tsResult = gulp
      .src(['./app/**/*.ts', './typings/**/*.ts'])
      .pipe(sourcemaps.init())
      .pipe(tsc(tsc.createProject('tsconfig.json')));
  
    return merge([
      tsResult.dts.pipe(gulp.dest('./typings/typescriptApp.d.ts')),
      tsResult.js
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist/js'))
    ]);
  }
  

• tsconfig.json

  {
    "compilerOptions": {
      "outDir": "dist/js",
      "target": "ES5",
      "module": "system",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
    },
    "exclude": [
      "node_modules"
    ]
  }
  

• index.html

  <head>
    <base href="/">
    <link rel="stylesheet" href="styles.css">
    <!-- inject:libs -->
    <!--   add wanted libs to gulpfile -->
    <!--   this is replaced by the gulp task runner -->
    <!--   lib order: -->
    <!--     angular2-polyfills, system.src, Rx, -->
    <!--     angular2.dev, router.dev, http.dev -->
    <!-- endinject -->
    <script>
      System.config({
        baseUrl: './', // same result with this omitted
        transpiler: 'typescript', // same result with this omitted
        defaultJSExtensions: true,
        bundles: {
          './js/lib/angular2.dev.js': ['angular2/*']
        },
        packages: {
          js: {
            format: 'register',
            defaultExtension: 'js'
          }
        },
        paths: {
          'angular/http': './js/lib/router.dev.js',
          'angular/router': './js/lib/http.dev.js',
          'angular2/*': './js/lib/angular2.dev.js',
          'rx/*': './js/lib/Rx.js'
        }
      });
      System.import('js/boot')
        .then(
          function() {console.log('loaded')},
          console.error.bind(console)
        );
    </script>
  </head>
  
  <body>
    <main-app>Loading...</main-app>
  </body>
  
  </html>
  

• boot.ts (die eigentliche Angular2-App ist unerheblich, sie sollte so wie sie ist funktionieren, der Fehler liegt nicht hier, enthalten der Vollständigkeit halber)

  import {bootstrap} from 'angular2/platform/browser';
  import {AppComponent} from './components/app.component';
  
  bootstrap(AppComponent, []);
  

• app.component.ts (die eigentliche Angular2-App ist unerheblich, sie sollte so wie sie ist funktionieren, der Fehler liegt hier nicht, ist der Vollständigkeit halber enthalten)

  import {Component} from 'angular2/core';
  import {InputComponent} from './input.component';
  
  @Component({
    selector: 'main-app',
    template: `<h1>Hi!</h1>
    <input-component label="A"></input-component>
    <input-component label="B"></input-component>
    `,
    directives: [InputComponent]
  })
  export class AppComponent {
  
  }
  

• input.component.ts (die eigentliche Angular2-App ist unerheblich, sie sollte so wie sie ist funktionieren, der Fehler liegt hier nicht, ist der Vollständigkeit halber enthalten)

  import {Component, Input} from 'angular2/core';
  
  @Component({
    selector: 'input-component',
    template: `
      <label [attr.for]="inputName">{{label}}
      <input #input [attr.id]="inputName" type="text"></label>
    `,
    styles: [
      `label { color: red; }`
    ]
  })
  export class InputComponent {
    public static latestId: number = 0;
    private inputId: number = InputComponent.latestId;
    @Input() public label: string = '';
  
    constructor() {
      InputComponent.latestId++;
    }
    get inputName(): string {
      return 'input-' + this.inputId;
    }
  }
  

Antwort #1

Es ist mir gelungen, die Lösung zu finden, die System.config()-Parameter waren falsch. Dies ist die funktionierende Version für alle, die ähnliche Probleme haben:

    System.config({
      packages: {
        js: {
          format: 'register',
          defaultExtension: 'js'
        }
      }
    });

Der Rest erledigt sich anscheinend von selbst.