2016-03-01 79 views
2

我試過將所有的TypeScript代碼編譯成一個單獨的Javascript文件。但每當我嘗試導入該文件使用SystemJS,網頁卡住loading...你如何在瀏覽器中使用捆綁的Angular 2應用程序?

我使用gulp將打字稿文件編譯成一個單一的Javascript文件,然後複製到dist文件夾。

咕嘟咕嘟任務:

在網頁
gulp.task("dist:compileTSConcat", function() { 
    return gulp.src("./app/**/*.ts") 
    .pipe(ts({ 
     typescript: require('typescript'), // In my package.json I have "typescript": "1.8.2" 
     target: 'ES5', 
     module: 'system', 
     moduleResolution: 'node', 
     experimentalDecorators: true, 
     emitDecoratorMetadata: true, 
     outFile: 'app.js' 
    })) 
    .pipe(gulp.dest("./dist/")) 
}) 

SystemJS導入代碼:

... 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.4/es6-shim.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.23/system-polyfills.js"></script> 

    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.23/system-register-only.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.7/router.dev.js"></script> 

    <script> 
     //System.config({}); 
     System.import('app.js').then(null, console.error.bind(console)); 
    </script> 
... 

回答

1

你應該包括在script標記您的JS文件,並導入您的應用程序的入口點模塊:

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

如果您在文件調用中引導您的Angular 2應用程序編輯boot.ts位於app文件夾下。

+0

這樣做後,我得到一個錯誤 - 「EXCEPTION:選擇器」只是一些學習「沒有匹配任何元素」 – Bryan

+0

這是當你的主要組件有一個選擇器,無法在主HTML頁。你應該在這個HTML頁面中加入<<只是一些學習>加載...。 –

+2

@Bryan試着把你的選擇器標籤放在腳本標籤上面... – Sasxa

相關問題