In this blogpost I want to show you how you can move from an existing Angular application using systemjs to an application with webpack.
Imagine the following application.
app ├── // modules, components and so on ├── app.component.ts ├── app.component.html ├── app.module.ts └── main.ts ... systemjs.config.js tsconfig.json tslint.json ...
Because we want to get away from systemjs here we will first introduce a webpack.config.js which holds your configuration and which can handle all you files and stuff.
But before we do please install webpack and the webpack-dev-server first:
npm install webpack-dev-server webpack --save-dev
So now we can add a webpack.config.js. This is the file webpack is searching per default.
app ├── // modules, components and so on ├── app.component.ts ├── app.component.html ├── app.module.ts └── main.ts ... systemjs.config.js webpack.config.js // <--- tsconfig.json tslint.json ...
Of course you have to modify the config that it fits to your application. A structure of this could be useful:
You can see an example here webpack.dev.js
To have your Angular application ready for handling polyfills you have to introduce another file
polyfills.ts where you import all polyfills your application needs.
app ├── // modules, components and so on ├── app.component.ts ├── app.component.html ├── app.module.ts ├── polyfills.ts // <--- └── main.ts ... systemjs.config.js webpack.config.js tsconfig.json tslint.json ...
The file could look like this:
Notice that when you import things you also have to install them via npm which also should be reflected in you package.json
Adding Third-Party dependencies
If you have to include external libs like jquery or bootstrap you can manage them in a seperate file called
vendor.ts. After installing them via npm you can consume them here:
app ├── // modules, components and so on ├── app.component.ts ├── app.component.html ├── app.module.ts ├── polyfills.ts ├── vendor.ts // <--- └── main.ts ... systemjs.config.js webpack.config.js tsconfig.json tslint.json ...
Which could look like this
You should include all your custom files here
You can now delete the systemjs.config.js because you do not need it anymore.
app ├── // modules, components and so on ├── app.component.ts ├── app.component.html ├── app.module.ts ├── polyfills.ts ├── vendor.ts └── main.ts ... webpack.config.js tsconfig.json tslint.json ...
Note that you now have three entrypoint for your application:
polyfills.ts. Due to the fact that webpack is reading all you files and going through all imports importing what is included you have the possibility to:
give your webpack config all three entrypoint like this:
or you import the two files in you main.ts like:
and in your webpack.config.ts you only need one entrypoint then:
Asking for the environment (dev/prod)
We will set the environment from the outside later. To consume it in your application we can simply ask for a variable like this:
With this you can apply multiple ways of generating your output based on the given environment asking for the variable “NODE_ENV” which we will set up later in our scripts.
You can see an example here webpack.config.js
Triggering it from the npm scripts
Now that we introduced webpack we can add the commands to our package.json like this:
Here we are setting the environment variable accordingly and start webpack with the
When you run
npm start and have the correct configuration in your webpack & package.json a browser should open up displaying your page while reloading if you change something.
Feel free to comment if I missed something.
Hope this helps and happy coding.