How to get angular-cli live reload working with my web server

5
votes

I need to figure out how to get live reload working with my local web server. I'm using vagrant to host my project at http://admin.myproject.local and using angular-cli to build my app.

When using npm start I can view my changes live at http://localhost:4200 but nothing changes on my admin.myproject.local until a do a build. I've looked at the angular-cli docs and thought the proxy would be the solution. I created a proxy.conf.json file and added the following code:

{
  "/admin": {
    "target": "http://admin.myproject.local",
    "secure": "false"
  }
}

However this doesn't seem to help. If I try http://localhost:4200/admin I get a 404.

Can someone point me in the right direction to get live reloading working when accessing the site through my .local url?

1
angularvagrantangular-cli

1 Answers

1
votes

You can create another HTML file (or use your existing server index file) and point your script tags to the generated js files. For example..

<!doctype html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <base href="/"> 
</head>
<body>
    <my-app></my-app>
    <script src="http://localhost:4200/inline.js"></script>
    <script src="http://localhost:4200/scripts.bundle.js"></script>
    <script src="http://localhost:4200/main.bundle.js"></script>
</body>
</html>

This works for development. And for production include the script files from the dist directory after running ng build -prod.