2

My project is a hybrid AngularJS / Angular project and we are using gulp to perform the following transformation on the Angular part. TS -> ES6 -> BABEL (ES5+) -> Rollup or SystemJS And alot of gulp watch and caching and Map-magic

I would like this to be more standard using angular cli but cannot find a way to do the babel transform in angular cli. I want it to be able to gradually move to ES6 and beyond as supported platforms allow but also want to keep map files working.

Is there a way to tie Babel into Angular-cli and keep map files through the whole process?

I have tried a broccoli build before I went with gulp but could not get all plugins to work with map files there and since Angular Cli is based on broccoli I can't find a way.

Please help out. :)

JGoodgive
  • 1,068
  • 10
  • 20

1 Answers1

1

For completeness if someone else looks at this:

Basically, use webpack to bundle the Angular build. It is the only way to check all the boxes:

  • ts -> aot -> js -> bundling -> optimization transformation chain
  • source maps across multiple build steps
  • multiple outputs
  • watch mode

But! You don't have to use the ng CLI to do so, actually it makes it more difficult since you most likely have a large AngularJS investment that does not conform to all the how-tos.

I ended up keeping gulp as main build framework and calling webpack for the Angular build inside a gulp task using the gulp-webpack package. The only limit I have had lately is that I would like to only run webpack (in non watch mode) when at least 1 file in that directory changed. It seem that gulp-webpack executes also when the stream is empty.

JGoodgive
  • 1,068
  • 10
  • 20