How do I consolidate multiple TypeScript files in Angular 2?

If you look at the Angular2 formula tutorial 3, you will find the following four .ts files.

app.component.ts
boot.ts
hero.ts
hero-detail.component.ts

For example, if you look at app.component.ts, you can import it as follows:

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

Of course, there is no problem to compile individually as *.ts with gulp, but what should I do if I want to compile it into a single .js file?
I would like to reduce HTTP requests by loading them all together.

angularjs gulp typescript

2022-09-30 21:11

2 Answers

TypeScript 1.8 will be able to combine AMD and system modules into one file, but it is still not possible, so it will be summarized by compiling the module with commonjs and using browserify.

//tsconfig.json
{
  "compilerOptions": {
  "target": "ES5",
  "module": "system",
...


$ npm ibrowserify
$ npm runtsc
$ ./node_modules/.bin/browserify app/boot.js-o app/app.js

2022-09-30 21:11

In tconfig.json, specify the output destination filename in the out property of compiralOptions to compile import or require resolved and combined.

2022-09-30 21:11

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656