将Angular2 HTML和TypeScript构建为单个文件

Question

我正在使用Angular2和TypeScript组合一个应用程序（大规模）。它需要分成许多项目，每个项目将有许多组件，每个组件都有.html视图，.css样式表和.ts逻辑/类。

我希望每个项目都能编译成一个*.js文件并将其复制到将在IIS中运行的主机网站。这与将.xaml文件全部编译为.dll的WPF或Silverlight应用程序的构建方式类似。

我已浏览过网页，并且能够使用--outFile选项将.ts文件构建为单个.js文件。但这对.html文件或css没有帮助。

任何帮助将不胜感激，即使它说什么我问的是不可能的:-)

斯蒂芬

Answer 1

如果您使用的是默认Angular2 tsconfig.json与SystemJS loader：

您可以在SystemJS Build Tool上留下所有繁重的工作。例如，这是我如何使用gulp做到这一点在我的项目：

1. 编译* .TS和在线*。html的模板

   我使用gulp-angular-embed-templates马上联所有templateUrl到template字符串（这个插件适用于Angular 1. *和Angular 2）。

   var tsc = require('gulp-typescript'); 
   var tsProject = tsc.createProject('tsconfig.json'); 
   var embedTemplates = require('gulp-angular-embed-templates'); 
   
   gulp.task('app.build', function() { 
       var tsResult = gulp.src('app/src/**/*.ts', {base: './app/src'}) 
        .pipe(embedTemplates()) // inline templates 
        .pipe(tsc(tsProject)); 
   
       return tsResult.js 
        .pipe(gulp.dest('build/js')); 
   }); 
   

   ，这将产生许多anonymous System.register modules在build/js目录。他们都将已经内置templateUrl。

2. 一切都捆绑成一个单一的文件.js

   我用SystemJS Build Tool这个，因为我认为这是比使用例如的WebPack比较容易的方式。所以，我有另一个任务，一饮而尽此过程自动化：

   var SystemBuilder = require('systemjs-builder'); 
   
   gulp.task('app.systemjs.bundle', function() { 
       var builder = new SystemBuilder('build/js, { 
        paths: { 
         '*': '*.js' 
        }, 
        meta: { 
         'angular2/*': { 
          build: false 
         }, 
         'rxjs/*': { 
          build: false 
         } 
        } 
       }); 
   
       return builder.bundle('main', 'build/js/app.bundle.js'); 
   }); 
   

   建设者采取相同的选项，SystemJS所以检查他们Config API。

   调用builder.bundle('main', ...)搜索main.js（这是我与角的bootstrap呼叫最初的剧本。这是你可以看到in the 5 min quickstart相同的文件），因为我追加.js由建设者找遍了所有的路径。这是因为当你在TS导入模块，您通常所说的：

   import {ModalResultComponent} from './modal-result.component'; 
   

   其编译为./modal-result.component依赖，它并不关心文件扩展名。这就是为什么我必须将*.js添加到所有路径来帮助构建器查找所有编译的JavaScript文件。

   meta选项只是告诉构建器忽略我不想捆绑的依赖关系。这是Angular2本身和rxjs库，因为我包括import 'rxjs/add/operator/map'在main.ts。

   这会生成一个app.bundle.js文件，其中所有模块都使用System.register注册为命名模块。

3. 使用我们app.bundle.js

   最后一部分是小菜一碟。我们只导入默认的Angular2东西，然后使用bundle option告诉SystemJS哪里是我们所有的依赖关系。

   <script> 
   System.config({ 
       packages: { 
        '/web': { 
         format: 'register', 
         defaultExtension: 'js' 
        } 
       }, 
       bundles: { 
        '/web/app.bundle': ['main'] 
       } 
   }); 
   System.import('main').then(null, console.error.bind(console)); 
   </script> 
   

   当我们调用System.import('main')它其实首先下载/web/app.bundle.js，并在包注册的所有模块之后，它进口的模块main我们Angular2引导。

   就是这样！

你其实并不需要使用gulp都做纯node脚本的一切。

捆绑CSS文件很容易，比如cssnano，我相信你可以找到关于如何在任何地方使用它的教程。

我确定还有其他方法可以实现同样的功能。 Angular2的目的不是限制你只使用一种技术。但是，使用SystemJS似乎是最简单的方法，因为默认情况下，它使用与Angular2相同的模块系统。

我敢肯定，你也可以使用例如commonjs格式，但这需要你也使用require()加载器的一些polyfill，但我还没有尝试过。我相信UMD也许值得尝试。