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

我正在使用 Angular2 和 TypeScript 构建一个应用程序（大型）。它将需要分为许多项目，每个项目将有许多组件，每个组件都有一个.html view, .css样式表和.ts逻辑/类。

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

我浏览了网络并且能够得到.ts文件构建为单个.js文件使用--outFile选项。但这对我没有帮助.html文件或css.

任何帮助将不胜感激，即使这是说我所要求的是不可能的:-)

Stephen

如果您使用默认的 Angular2tsconfig.json with SystemJS加载器 https://github.com/systemjs/systemjs:

"module": "system",
"moduleResolution": "node",
...

你可以把所有繁重的工作交给SystemJS 构建工具 https://github.com/systemjs/builder。例如，这就是我在项目中使用的方法gulp:

1. 编译 *.ts 和内联 *.html 模板

   我在用着gulp-angular-embed-templates https://github.com/laxa1986/gulp-angular-embed-templates立即内联所有templateUrl into 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'));
   });
   

   这会产生很多匿名 System.register 模块 https://github.com/systemjs/systemjs/blob/master/docs/system-api.md in build/js目录。他们所有人都会有他们的templateUrl已经内联了。

2. 将所有内容打包成一个.js file

   I use SystemJS 构建工具 https://github.com/systemjs/builder因为我认为这比使用 webpack 更容易。因此，我有另一个 gulp 任务来自动化该过程：

   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 https://github.com/systemjs/systemjs所以检查他们的配置接口 https://github.com/systemjs/systemjs/blob/master/docs/config-api.md.

   Calling builder.bundle('main', ...)搜索main.js（这是我用 Angular 编写的初始脚本bootstrap称呼。这是您可以看到的同一个文件在 5 分钟快速入门中 https://angular.io/docs/ts/latest/quickstart.html）因为我附加.js到构建器搜索的所有路径。这是因为当你在 TS 中导入模块时你通常会调用：

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

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

   The meta选项只是告诉构建器忽略我不想捆绑的依赖项。这就是 Angular2 本身rxjs图书馆，因为我包括import 'rxjs/add/operator/map' in main.ts.

   这会生成一个app.bundle.js文件，其中所有模块注册为命名模块，使用系统寄存器 https://github.com/systemjs/systemjs/blob/master/docs/system-api.md#systemregistername--deps-declare.

3. 使用我们的app.bundle.js

   最后一部分是小菜一碟。我们只需导入默认的 Angular2 内容，然后使用bundle option https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#bundle告诉 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 script.

捆绑 CSS 文件很容易，例如cssnano https://github.com/ben-eb/cssnano我相信您可以在任何地方找到有关如何使用它的教程。

我确信还有其他方法可以达到同样的目的。 Angular2 的设计并不是为了限制您只能使用一种技术。然而，在我看来，使用 SystemJS 是最简单的方法，因为它默认使用与 Angular2 相同的模块系统。

我相信你也可以使用例如commonjs格式，但这需要你使用一些填充require()加载器，但我还没有尝试过。我相信UMD https://github.com/umdjs/umd也许也值得尝试。