-3

I am starting a new Angular 4 project and was looking for the best practices/configuration to setup an angular 4 project. Came across Angular CLI based approach and quickstart project based on System js on angular.io . I am curious to know the best one to start my development with.

Is CLI the only way to use Webpack2 with Angular 4? I read that with CLI one loses the flexibility because of not being able to play with Webpack2 like setting up bundling, uglify and minify etc. Is this correct? Is there any other way to use Webpack2 with Angular 4 without using CLI?

Is System js based approach the best one in that case. Please share your experience on this.

I Know that it's choice based and will drive some negative response but want to know the details about it before I go ahead with the development. Hope you guys will understand my concern.

Peter
  • 10,492
  • 21
  • 82
  • 132

1 Answers1

0

Matter of opinion, but angular-cli is definitely the best choice IMHO.

Because angular-cli is developed by Google in tandem with Angular, you can depend on it to always be up to date, to provide migration tools to Angular 5, proactively add new features such as support for service workers, integrate with Webpack 3 when it's ready, etc.

If you find yourself really needing to play (I think you mean "fight") with webpack, angular-cli allows you to "eject" the webpack configuration so you can tweak it.

I just finished a migration of a project originally built around quickstart to angular-cli and it is far easier to understand and maintain and configure. I am also involved with two other large-scale projects using angular-cli and we never felt any need for the "flexibility" that comes with working directly with webpack.

  • Does angular CLI provides ability to add plugins like babel etc without ejecting Webpack? Is there any issues associated with ejecting Webpack? – Peter Jul 17 '17 at 18:21
  • Why would you need to use Babel? –  Jul 17 '17 at 18:27
  • Just an example. Like with Webpack2 I can bundle and uglify my code, how is that achieved in CLI? – Peter Jul 17 '17 at 18:44
  • It all just works (minification will happen on production builds). Probably creating a new `angular-cli` app and playing with is the best way to see how things work. –  Jul 17 '17 at 19:18
  • `ng build` creates a `dist` folder. –  Jul 17 '17 at 19:20
  • I tried my hands at CLI but don't see a dist folder here. Where is the production build in CLI. Also in package.json there is no script that runs Webpack then how is Webpack managing the build if it's not invoked in package Jon? – Peter Jul 17 '17 at 19:25
  • `ng build` invokes webpack under the hood. –  Jul 17 '17 at 19:25
  • Thanks for bringing some clarity. And the uglify and all are also done by default? Where by the way is that dist folder stored? How will I deploy the production build to server? – Peter Jul 17 '17 at 19:28
  • Copy all the files in `dist` to your app server. –  Jul 17 '17 at 19:31
  • That's the issue. I don't see a dist folder in my build even though the app runs fine. Where is that dist folder created? – Peter Jul 17 '17 at 19:32
  • Are you using `ng build --prod`? That will generate a dist folder under your application root folder. (At the same level as the `src` folder.) – DeborahK Jul 17 '17 at 23:57
  • Yes thanks.. it worked. Could you please clarify my doubt is CLI the only way we use Webpack2 with Angular or is there any other way? – Peter Jul 18 '17 at 02:40
  • 1
    Of course it's not the only way. You could instead spend hours fighting with webpack configs and gulp scripts. –  Jul 18 '17 at 03:45
  • thanks both for your inputs. I am much more confident about using CLI. – Peter Jul 18 '17 at 08:53