你如何在浏览器中使用捆绑的Angular 2应用程序？

Question

我试过将所有的TypeScript代码编译成一个单独的Javascript文件。但每当我尝试导入该文件使用SystemJS，网页卡住loading...

我使用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> 
... 

Answer 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文件夹下。