Wie kann ich Angular2-Komponenten importieren, die in einer einzigen Datei kompiliert wurden

Question

Ich versuche Angular2 in Laravel zu integrieren. Ich folge dem Quick Start guide. Ich habe elixir-typescript konfiguriert, um alle meine Typoskript-Dateien in eine einzige app.js zu kompilieren. Ich laufe gulp und alles kompiliert korrekt. Wenn ich meine Seite im Browser besuchen bekomme ich diesen Fehler in der Konsole:

Error loading http://localhost/app/app.component.js as 
"./app.component" from http://localhost/app/app.js ng:16:49 

Das ist meine app.component.ts Datei

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    template: '<h1>My First Laravel-Angular 2 App</h1>' 
}) 
export class AppComponent { } 

Das ist meine main.ts Datei

///<reference path="../../../typings/index.d.ts"/> 
import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { AppComponent } from './app.component'; 
bootstrap(AppComponent); 

Die Ausgabedatei ist (app.js) ist:

"use strict"; 
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('@angular/core'); 
var AppComponent = (function() { 
    function AppComponent() { 
    } 
    AppComponent = __decorate([ 
     core_1.Component({ 
      selector: 'my-app', 
      template: '<h1>My First Laravel-Angular 2 App</h1>' 
     }), 
     __metadata('design:paramtypes', []) 
    ], AppComponent); 
    return AppComponent; 
}()); 
exports.AppComponent = AppComponent; 

"use strict"; 
///<reference path="../../../typings/index.d.ts"/> 
var platform_browser_dynamic_1 = require('@angular/platform-browser-dynamic'); 
var app_component_1 = require('./app.component'); 
platform_browser_dynamic_1.bootstrap(app_component_1.AppComponent); 

//# sourceMappingURL=app.js.map 

Wenn ich den zweiten bis letzten Zeile ändern aus:

var app_component_1 = require('./app.component'); 

zu:

var app_component_1 = require('./app.js'); 

Meine App funktioniert richtig und ich kann die Komponente in der Seite dargestellt sehen. Ich kann nicht herausfinden, wie man meine main.ts kompiliert, um dies jedoch. Wenn ich das Typoskript main.ts ändere, um von './app.js' zu importieren, schlägt der Typskriptcompiler fehl.

Ich denke, das Problem ist, dass meine gulpfile ist nur die kompilierten Typoskript-Dateien in einem verkettet, aber es tut nichts, sie zu bündeln. Wie kann ich den Typskript-Compiler konfigurieren, um alle Komponenten in einer einzelnen .js-Datei zu bündeln und dann in meiner App auf alles zugreifen zu können?

denke ich, die entsprechenden Zeilen in den tsconfig.json sind diese:

{ 
    ..., 
    "module": "commonjs", 
    "moduleResolution": "node", 
    ... 
} 

Answer 1

Für Sie die js Dateien zu verhindern, in eine einzige Datei zu kompilieren, gehen Sie zu node_modules/Elixier-Typoskript/index.js und Kommentar Diese Zeile .pipe ($. concat (paths.output.name)).