Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular webpack compiled successfully, stuck in compile stage - webpage didn't opened

When execed npm start, the first compiling will done successfully.

BUT! When I save the app code, the compiling will stucked. Just display webpack: Compiling... in shell

enter image description here

like image 412
Manoj Patidar Avatar asked Oct 08 '17 17:10

Manoj Patidar


People also ask

How to compile an angular application?

An angular application can be compiled by using the following two commands in Angular CLI. Both the commands compile the application and produce development build by default. In development build, compiled files doesn’t have any optimization done by Angular. Both do bundling of all the files present in the application.

What are bundled JavaScript files in angular?

It is one of the optimization process done by Angular. In this process it produces 5 types of bundled JavaScript files along with their source map files by default. These files will be embedded in index.html file which is loaded by the browser. 1) inline.bundle.js — Contains the scripts which are necessary for WebPack to run.

When should I compile my HTML templates into JavaScript?

Angular itself needs to compile your HTML templates into JavaScript and this can occurred at 2 different points of time: Right after development, at build time, before your app is downloaded in the Browser (AoT) What is webpack? According to Wikipedia: Webpack is an open source JavaScript module bundler.

How to do AOT compilation using angular CLI?

When the ng-serve or ng-build command executes, type of compilation depends on the ‘aot’ value present in the respective sections in ‘angular.json’ file. aot property which decides the type of compilation in both ng serve, ng build Also AOT compilation can be done using Angular cli by setting ‘aot’ flag to true in Angular CLI


1 Answers

That's exactly what it's supposed to look like. Now go to your browser and hit the URL:

http://localhost:4200/

If you want the output to automatically open after compilation in your browser, then pass --open argument while hitting ng serve:

ng serve --open

If you want the process to happen automatically whenever you hit npm start then you should modify the scripts property from package.json of your project:

...
"scripts": {
    ...
    "start": "ng serve --open",
    ...
},
...

Now whenever you hit npm start it will compile as well as open the webpage for that project.

like image 133
Raman Sahasi Avatar answered Oct 18 '22 07:10

Raman Sahasi