How do I consolidate multiple TypeScript files in Angular 2?

Asked 1 years ago, Updated 1 years ago, 88 views

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


© 2024 OneMinuteCode. All rights reserved.