Angular4设置指南

Question

It seems that angular-cli is very much in favor at the moment but I would like to get a better understanding of setting up a new Angular (V4) project.

During this setup I would also like to fully understand the impact of integrating WebPack. I'd prefer not to use the "ng eject" option as I would like total control over the configuration right from the start in order that I can experiment.

I am really struggling to find any up-to-date tutorials using the latest version of Angular and NOT using the angular-cli.

Can anyone point me in the right directions for tutorials or perhaps a decent seed with the absolute minimum skeleton framework?

Thanks

Answer 1

You can refer this link for the understanding of webpack. After reading this you will be able to experiment.

Angular webpack

For creating angular application other than angular cli you can try this using VS. Refer this Building Angular app with Visual studio .

when you create a new project with angular cli, it is sufficient and minimum to start experimenting. (It is my opinion.)

Answer 2

In general it's a good approach to know what's happening in that CLI blackbox but I must say the learning curve is steep. If you have ever used "ng eject" and had a look into the webpack config that is generated, you know what I'm talking about. I would suggest to start learning webpack, setup a simple project and extend it step by step.

In most cases you need 2 configuration files, one for local development and one for the distribution build. I prefer to use a "common" config and use the webpack-merge plugin to extend it for the dev and dist build.

Then add plugins and loaders to support typescript, less and asset files like pictures and fonts. Also adding Angular in a simple webpack project works without any problems but to get the equal feature support as ng-CLI including AOT, lazy loading and other specialized optimizations you need to use the ngtools webpack plugin: https://www.npmjs.com/package/@ngtools/webpack

In the process of learning you will definitely figure out how helpful ng-CLI is and how much complexity it keeps away from the user. The Advantage of having an custom setup is clearly the full control and extendability of Webpack. Especially if you depend on custom webpack plugins there is no way around having an own webpack configuration.

I once started an approach to have an Angular project without ng-CLI, it's out-of-date but maybe you can get an impression of how to do it: https://github.com/TekTimmy/angular2-seed