运输服务模块angular 2

Question

I have a common module in an angular 2 application. This is how the project is structured:

main
--app
   /common
   --config
    //.ts configs for modules
   --services
    //angular services
   --models
   --store
    //ngrx store
   /component1
   /component2
   app.module.ts
   main.ts
--js
  //systemjs dependencies
  Gruntfile.js
  package.json
  tconfig.json

The project is configured to transpile to bundle.js and works as expected. However, now I want to bundle out the contents of common folder and package it in isolation. Such that, I can just load its dependency using system js , and then include it is app.module.ts to use in components.

I need help in getting started, is it some gruntfile/tsconfig changes that I need to make? Or would I have to create a separate package.json/index.ts to transpile .ts dependencies?

Answer 1

The feature I believe you are looking for is the Bundle Arithmetic feature of the systemjs-builder. It is built into SystemJS and works very well.

However, it will mean using SystemJS to bundle your app instead of a grunt.

This has many advantages and actually simplifies many scenarios, like your specific use case, but it may take you a little while to get everything set up.

TypeScript does not support splitting bundles at this time.

Splitting your app into multiple npm packages is not necessary and will introduce significant complexity into development process if your application is small.