angular - 我如何使用 Angular2 连接 TypeScript 文件,例如 Rails Assets :precompile?

标签 angular typescript gulp

我如何将多个 TypeScript 与 Angular2 文件连接成单个 JS 文件,如 Rails assets:precompile?

例如,在 a tutorial of angular2 official page 中,你会看到四个 .ts 文件:

  • 应用程序组件.ts
  • boot.ts
  • 英雄.ts
  • hero-detail.component.ts

当您查看 app.component.ts 文件时,您会看到以下部分:

import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail.component';

当您单独编译所有 .ts 文件时,它工作得很好,但我想将它们连接到一个 .js 文件中,这样就会有更少的 http 请求。我正在使用 gulp,并尝试了 gulp-concat,但没有用。 browserify 两者都不是。

有人愿意帮忙吗? 提前致谢。

最佳答案

听起来您正在寻找类似 Webpack 的东西。 Webpack 会将您的 ts 文件转换为 js,然后创建一个模块包,您可以将其包含在 <script> 中。标签。它不仅会转换您的代码,还会构建其依赖项,包括 Angular 2 本身(及其依赖项)。

这是 Angular 2 开发人员之一为 Angular 2 和 Webpack 编写的简单入门项目:https://github.com/pkozlowski-opensource/ng2-webpack-play

关于angular - 我如何使用 Angular2 连接 TypeScript 文件,例如 Rails Assets :precompile?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34416066/

相关文章:

angular - Ngxs - 如何链接操作?

javascript - 如何在使用 *ngFor 时仅将类设置为特定元素?

javascript - 为什么 gulp cssnano 失败了?

angular - 如何在 ionic 3 中使用 Angular 6?

javascript - Window.print 抛出程序停止错误

Typescript 忽略 null 或 undefined 作为函数返回的可能性

javascript - 我可以在 mat-expanded 行中显示另一个表格吗?

javascript - Karma (mocha) - 每当单元测试失败时出现意外的标记 N

batch-file - 阻止 gulp 更改 shell/cmd 标题名称

javascript - Angular 5 : Using Service from inside Custom Decorator Function