コンパイル済みのAngular2コンポーネントを1つのファイルにインポートする方法

Question

Angular2をLaravelに統合しようとしています。私はQuick Start guideに従っています。私はすべてのタイプスクリプトファイルを1つのapp.jsにコンパイルするようにelixir-typescriptを設定しました。私はgulpを実行し、すべてが正しくコンパイルされます。私は、ブラウザで私のページを訪問した場合、私は、コンソールにこのエラーが表示されます。

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

これは私のapp.component.tsファイル

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

これは私のmain.tsファイル

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

出力ファイルであります（）は：

"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 

私から最後から2番目の行を変更する場合は、次へ

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

：

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

私のアプリが正常に動作し、私はページでレンダリングコンポーネントを見ることができます。私はmain.tsをこれにコンパイルする方法を理解できません。私がのタイプスクリプトを'./app.js'からインポートするように変更した場合、typescriptコンパイラは失敗します。

私の問題は、私のgulpfileは、コンパイルされたtypescriptファイルを1つに連結するだけですが、バンドルするために何もしないということです。すべてのコンポーネントを1つの.jsファイルにまとめて、アプリケーション内のすべてにアクセスできるようにtypescriptコンパイラを設定するにはどうすればよいですか？

私はtsconfig.jsonで関連行が、これらはあると思います： node_modules /エリクサー-typescriptです/ index.jsとコメントに行き、

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

Answer 1

あなたは、単一のファイルにコンパイルするのjsファイルを防ぐためにはこの行.pipe（$。concat（paths.output.name））。