3

I am new to the angular2 and web app development. I'm finding it difficult to develop using webpack.

I am using Visual Studio 2017. I want to build an asp.net core web project's UI with angular-cli. When I created an Angular app with angular-cli, webpack had already been selected as my application's bundling tool.

Is there a way I can set up an Angular application with a simpler bundle than webpack?

I am also a little confused regarding karma.conf.js and all of the *.bundle.js files that appear in my project's dist folder.

  • What does karma.conf.js do?
  • Are all the *.bundle.js files generated from webpack? If not, why do they appear there?

Here's a screenshot of my file tree showing the *.bundle.js files.

here is a list of the bundle.js files in my application

Community
  • 1
  • 1
Rachel
  • 349
  • 1
  • 3
  • 19
  • You can go with Rollup or Browserify that aren't really 'simpler' than Webpack. You can go with SystemJS which is used in Angular 'official' plunk. You can go with globals and no modules at all, development will inevitably suck, because A2 was written with ES6 modules in mind. Specifying what's the problem with Webpack would probably make the question more clear. – Estus Flask Jul 24 '17 at 15:58
  • thanks for the answer, i actually want to know what parts are webpack generate for me in my project? – Rachel Jul 24 '17 at 16:04
  • All the stuff in `dist`. That's the purpose. – Estus Flask Jul 24 '17 at 16:16
  • got it. I guess my question is why i have the webpack... i just installed angular-cli , and all there things are automatically generated. – Rachel Jul 24 '17 at 16:58
  • Also, do i need to care about webpack configuration when i am developing the project? Or i could let it automatically generate the bundle for me ? thanks. – Rachel Jul 24 '17 at 16:59
  • Generally you don't, unless it becomes too small for your needs. That's what angular-cli is for. It can generate Webpack configuration too but that's optional. – Estus Flask Jul 24 '17 at 17:24
  • So do you know how to get rid of webpack when i install angular framework ? – Rachel Jul 24 '17 at 17:36
  • i am using visual studio 2017 asp.net core for my project. i just want to use angular 2 as my framwork. – Rachel Jul 24 '17 at 17:36
  • 1
    You shouldn't get rid of it because you won't be able to efficiently use it without Webpack. The framework relies on ES6 modules, and ES6 modules are almost unsupported in browsers. The first comment explains what are the alternatives to Webpack. – Estus Flask Jul 24 '17 at 17:56
  • ok , thanks so much! – Rachel Jul 24 '17 at 19:55
  • You're welcome. You can check this answer on what the alternatives that don't involve a bundling tool like Webpack may look like, https://stackoverflow.com/a/39029435/3731501 . Not really good. – Estus Flask Jul 24 '17 at 20:04

1 Answers1

2

Angular CLI uses webpack in the background - you do not need to configure or use webpack yourself. All your interactions should be via angular CLI, eg:

  • ng serve to run your app locally in your web browser
  • ng build to output a build to your dist folder, that you can publish on a live hosting server
  • ng generate component components/navigation to make a new component called navigation

You can safely ignore pretty much everything outside of the src folder. Everything else is generated. The files are necessary, but you do not need to edit them.

Karma is for unit testing, you may safely ignore karma while learning Angular.

If you wish to use Angular inside a .NET project, keep it in its own subfolder called frontend or similar, to keep the files from getting mixed up.

You need to treat your Angular front end and your .NET Core back end as separate projects, like a website (angular) + an API (.NET Core).

tanya
  • 516
  • 3
  • 8