CODEWITHSUNDEEP
angularwebpack
Bryan
Bryan

Reputation: 3009

Going from SystemJS to Webpack with Angular 2 2.4

I was using SystemJS, just like Angular uses throughout their documentation. I'm now to the point of wanting to bundle things up for dev and prod deployments, so I started following the Webpack tutorial on Angular's website: https://angular.io/docs/ts/latest/guide/webpack.html#!#common-configuration

I've finished the tutorial, but I'm getting the following build errors in numerous files:

Build:Cannot find name 'Set'.

Build:Cannot find name 'Promise'.

Build:Cannot find name 'Map'.

There are certain parts of the tutorial I wasn't sure about and figure they may be the source of this issue and/or potentially other ones.

One of my biggest concerns is that I strayed away from the documentation slightly when initially building my app (before using Webpack). In an effort to avoid clutter in my app folder, I added the following code to the systemjs.config.js file so that the transpiled javascript files would be sent to a dist folder: 

map: {
        app: 'Angular2_Apps/Tasks/dist',
        ...
     }

I also added the following code to the "compilerOptions" in my tsconfig.json file:

"outDir": "dist",

Now that my transpiled javascript files are in that dist folder I created, I would ideally like to keep them there for organization purposes. Do I need to change any of the Webpack files to accommodate for that?

Upvotes: 3

Views: 3041

Answers (1)

Peter Salomonsen
Peter Salomonsen

Reputation: 5683

Webpack will not help you get rid of the most heavy component of angular which is the JIT compiler.

So to avoid shipping the JIT compiler to production you need to use Ahead Of Time compilation. You'll find a cookbook here: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

This way you will get a small and fast starting app - since the HTML template sources and angular compiler is not part of the bundle. Also there will be only one file.

I have a full example with an angular2 app with material design with compiled AOT-bundle in this repository:

https://github.com/fintechneo/angular2-templates

Also in the future the ng cli should be able to produce an AOT bundle for you, but right now the ng build --prod --aot feature is still experimental and it creates larger bundles than just following the AOT cookbook directly. Also it still seems like the bundle produced by ng cli has longer loading/starting time than the bundles produced using the AOT cookbook example.

Upvotes: 4

Related Questions