3

I am trying to run my dist folder directly instead of doing ng serve. For that I wrote a script in package.json.

start-dev: ng build && http-server dist

The problem is I want it to auto run whenever I save any file. Also it will build the whole npm again which is a very slow procedure. Any other method on how I can do it? And do it faster?

Improve this question
3
  • What about start-dev: ng build --watch && http-server -c-1 dist? This should prevent caching from server Commented Jul 14, 2020 at 7:19
  • I face facing caching issue. I mean when I save my code and refresh browser I don't get to see the latest change. I have to empty cache first Commented Jul 14, 2020 at 13:01
  • Why not run ng serve --prod Commented Jul 18, 2020 at 14:16

3 Answers 3

Reset to default
2
+50

You can use the --watch flag when you run ng build. So the command will be ng build --watch to auto rebuild when you change a file.

To auto restart the http-server dist/<app_name> command you can use nodemon

With nodemon the command would be nodemon --watch dist --exec 'http-server dist/<app_name>'

You can run both commands together like this ng build --watch & nodemon --watch dist --exec 'http-server dist/<app_name>'

The above commands will work together. Angular will rebuild the dist folder and nodemon will restart your server when the dist folder changes.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Is this going to be as fast as webpack in react?
That depends on the project. Using the --watch flag will mean that builds after file changes are faster as it won't need to build the entire project.
So when I run nodemon --watch dist http-server dist I am getting the error Cannot find module 'C:\Users\AngularProject\dist' [nodemon] app crashed - waiting for file changes before starting...
Does the dist folder exits?
nodemon is installed and I am using "start-dev": "ng build --watch & nodemon --watch dist http-server dist", On running I get An unhandled exception occurred: ENOTEMPTY: directory not empty, rmdir
|
2

Like indicated in Chris' answer, you can automatically rebuild your app when using ng build --watch.

If you just want to serve the latest version of your app, you can disable caching from http-server (which is on by default), using -c-1 option (doc)

On linux (use single & to run scripts in parallel)

"start-dev": "ng build --watch & http-server -c-1 dist",

On windows (notice the start command):

"start-dev": "start ng build --watch && start http-server -c-1 dist",

Notes

  • Your browser has probably already cached the files dist before you deactivate the cache like above, so clear the cache manually once. You won't need to to that after

  • This solution will not reload the page, you have to do it yourself

  • http-server does not support fallbacks, which might be a problem if you are using angular's default strategy. So if you were on http://localhost:8080/module1/path1 and you reload the page, you'll get a 404. You need to reload http://localhost:8080 and navigate to the correct url from the app router

  • Depending on your angular.json, the output folder might be dist, dist/projectName, or dist/projectName/browser, or whatever you indicated

Improve this answer

2 Comments

I don't want to open two new terminal. and without it the second command won't work. I am okay with two terminal on vscode though.
If you are on linux, it will not open 2 terminals. Otherwise use npm-run-all package
1

Better you should install lite-server. For install lite-server:-

npm install --global lite-server

then open the dist folder in cmd or terminal

lite-server

Resource:- https://www.npmjs.com/package/lite-server

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.