編譯爲單個文件後無法啓動Angular應用程序

Question

升級到TypeScript 1.8並將我的應用程序編譯爲單個文件與outFile後，我無法啓動我的應用程序。

我所有的文件都被編譯爲我項目的dist文件夾中的一個app.js。我可以在網絡檢查員看到app.js從服務器上正確加載。沒有顯示錯誤，但它似乎像我的bootstrap功能的應用程序從未執行。該應用程序沒有編譯時工作正常。

SystemJS設置

System.config({ 
    map: { 
    'app': '/path/to/dist' 
    }, 
    packages: {   
    '/path/to/dist': { 
     main: 'app', 
     format: 'register', 
     defaultExtension: 'js' 
    } 
    } 
}); 
System.import('app') 
    .then(null, console.error.bind(console)); 

boot.ts

// Required for https://github.com/angular/angular/issues/7052 
///<reference path="../node_modules/angular2/typings/browser.d.ts"/> 
import {bootstrap} from 'angular2/platform/browser'; 
import {ComponentRef, provide} from 'angular2/core'; 
import {AppComponent} from './components/app/app.component'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy, APP_BASE_HREF} from 'angular2/router'; 
import {PanelsService} from './components/panels/panels.service'; 
import {StoriesService} from './components/stories/stories.service'; 
import {UrlService} from './components/common/url.service'; 
import {UserService} from './components/user/user.service'; 
import {AppService} from './components/app/app.service'; 
import {AlertsService} from './components/alerts/alerts.service'; 

................. 
................. 
................. 
................. 

bootstrap(AppComponent, [ 
    HTTP_PROVIDERS, 
    ROUTER_PROVIDERS, 
    provide(LocationStrategy, {useClass: HashLocationStrategy}), 
    PanelsService, 
    ............. 
    ............. 
    ............. 
    AlertsService 
]).catch(err => console.error(err)); 

我敢肯定，我錯過的東西在這裏簡單。我是否需要在我的連接文件中不包含我的boot.ts？

爲了完整起見，我使用gulp-typescript 2.12.0使用以下任務來編譯我的源文件....

return gulp 
    .src('app/**/*.ts') 
    .pipe(sourcemaps.init()) 
    .pipe(typescript(tscConfig.compilerOptions)) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest('./dist')); 

...我tsconfig.json如下

{ 
    "compilerOptions": { 
    "target": "ES5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outFile": "app.js" 
    }, 
    "exclude": [ 
    "node_modules" 
    ] 
} 

任何幫助將不勝感激。

Answer 1

我認爲你已經將所有已編譯的JS代碼放入單個文件中。所以，你需要包含這個JS文件中script標籤和更新您的SystemJS配置：

<script src="/path/to/dist/app.js"></script 
<script> 
    System.config({ 
    }); 
    System.import('app') 
    .then(null, console.error.bind(console)); 
</script>