Setting up Angular 4 Typescript with Webpack 3

Aug 13, 2017

I've just updated to Angular 4 with Webpack 3 (Angular 4 update instruction)

This post will help you setup an Angular project using Webpack. As you may know Webpack 3 has just released recently, so it's time to use it. How up-to-date ;).

As a developer we all need a seed project that contains all things ready for development, such as source code structure, development tools and build. So let's start explore it.

Source code

Fork or download on Github.

What we are going to achieve?

  • Standard code structure (recommended from Angular)
  • Using SASS for styling
  • Auto reload when changes in development
  • Build for Development and Production modes

Standard code structure

config/  
dist/  
src/  
  |
  --app/
  --assets/
  --public/
  --index.html
  --main.ts
  --polyfills.ts
  --vendor.ts
.gitignore
package.json  
readme.md  
tsconfig.json  
tslint.json  
webpack.config.js  

config/

This folder contains all Webpack config files (webpack.common.js, webpack.dev.js and webpack.prod.js).
Why do we need to separate them? Because we have different strategies for building on Development and Production. For example, in Prod mode, we need to minify the source code to reduce the page load when deploy on server, or we have some configures like API urls, they are also different from Dev and Prod.

src/

All source code will be placed in this folder. We will go from top to bottom. The first one, you can see the App folder, this one contains all app source code. Assets will contains images, logo and so on. The Public, it will contain all public things such as the CSS for whole application, as we know we can define style for specific Angular component.

What is the rest?

main.ts, bootstraps your Angular app

polyfills.ts, this one contains all libraries which need for run Angular code on browsers.

vendor.ts, this contains all libraries (Angular, JQuery ...) import for the app.

We do group like that to help the app's bundle is straightforward. When you open index.html, you will see we reference three files (app.js, polyfills.js and vendor.js).

dist/

The bundle of build will be placed here - index.html, js, css and all assets.

In this structure, we are using modular pattern, so in each business domain we will create a module for it. For example, app module, home module and shop module. This pattern help us easy to scale the project.

Using SASS

In this setup, I implement compiling SASS to CSS when building the app. So you can use SASS or CSS up to you. You can find out more in the config/webpack.common.js - module/rules.

Auto reload when changes in development

This is very convenient feature of Webpack. Whenever you changes the files, the app will reload with the latest update code. How cool, it's similar to browsersync when we was using Gulp task runner.

Build for Development and Production modes

As I already said in this post, we have two mode of bundling the source code (build) with examples.
As default, with Prod mode, we ship the bundle with minified code so it will be lighter than in Dev mode. And also we add the hash to the bundle files to deal with browser cache.
To find out more, you can check the webpack.dev.js and webpack.prod.js to see the differences.

Conclution

So, that's all for setting up Angular with Webpack project, again you can find source code in Github. Hope you enjoy it and let me know your feedback in comments.

In the next post, I will show you how to setup an Angular 4, ASP.NET Core project with Webpack 3 using hot module replacement.

Nguyen Tran

I'm Nguyen, a full stack web passion for frontend and love Angular.

Subscribe to Nguyen Tran

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!