How to make webpack working together with Angular4

The official demo for Angualr 4 is using angular CLI to create project and run it. This approach is not friendly If you want to create a web application has .NET or Node.js as server side and Angualr 4 as client side.

Iet’s take a look inside the project created by angular CLI.

package.json : determain the library needed.
tsconfig.json : ts compiling
tslint.json : syntax checking
.angular-cli.json

 

 

 

 

 

I create a Node.js project and copy the content of those config files. And follow the document WEBPACK: AN INTRODUCTION [https://angular.io/docs/ts/latest/guide/webpack.html] to create webpack config file.

The key point is how to setup typescript:
“lib”: [ “es2016”, “dom” ]

I used webpack to compile and bundle all of the client side code into client_dist and reference them in the tempalte of Node.js

The project can be found at https://github.com/benjaminhuanghuang/nodejs-ng4-seed