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

Question

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

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

我浏览了 Web 并能够使用 --outFile 选项将 .ts 文件构建为单个 .js 文件。但这对 .html 文件或 css.

没有帮助

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

斯蒂芬

Answer 1

如果您使用默认 Angular2 tsconfig.json 和 SystemJS loader:

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

您可以将所有繁重的工作留给SystemJS Build Tool。这就是我在我的项目中使用 gulp:

的方式

编译 *.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'));
});

这将在build/js 目录中生成许多anonymous System.register modules。他们所有人的 templateUrl 都已内联。

将所有内容打包成一个 .js 文件

我为此使用 SystemJS Build Tool，因为我认为它比使用 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 so check their Config API 相同的选项。

调用 builder.bundle('main', ...) 搜索 main.js（这是我使用 Angular 的 bootstrap 调用的初始脚本。它与您可以看到的文件相同 in the 5 min quickstart) 因为我将 .js 附加到构建器搜索的所有路径。这是因为在 TS 中导入模块时通常会调用：
```
import {ModalResultComponent} from './modal-result.component';
```
被编译为 ./modal-result.component 依赖项，它不关心文件扩展名。这就是为什么我必须将 *.js 添加到所有路径以帮助构建器找到所有已编译的 JavaScript 文件。

meta 选项只是告诉构建器忽略我不想捆绑的依赖项。那是 Angular2 本身和 rxjs 库，因为我在 main.ts.
中包含了 import 'rxjs/add/operator/map'
这会生成一个 app.bundle.js 文件，其中所有模块都使用 System.register.
使用我们的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 bootstrap.

就是这样！

您实际上根本不需要使用 gulp 并使用纯 node 脚本完成所有操作。

使用 cssnano 之类的东西可以轻松捆绑 CSS 文件，我相信您可以在任何地方找到有关如何使用它的教程。

我敢肯定还有其他方法可以解决同样的问题。 Angular2 旨在不限制您只能使用一种技术。但是，在我看来，使用 SystemJS 是最简单的方法，因为它默认使用与 Angular2 相同的模块系统。

我确定您也可以使用 commonjs 格式，但这需要您还为 require() 加载程序使用一些 polyfill，但我还没有尝试过。我相信 UMD 可能也值得一试。

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

Build Angular2 HTML and TypeScript to a single file

angular

typescript

systemjs

systemjs-builder