Confused about actual webroot with "ng serve", *.bundle.js not loading

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?) W10

Versions.

Please run ng --version. If there’s nothing outputted, please run in a Terminal: node --version and paste the result here: angular-cli: 1.0.0-beta.25.5 node: 6.9.1 os: win32 x64 @angular/common: 2.4.3 @angular/compiler: 2.4.3 @angular/core: 2.4.3 @angular/forms: 2.4.3 @angular/http: 2.4.3 @angular/platform-browser: 2.4.3 @angular/platform-browser-dynamic: 2.4.3 @angular/router: 3.4.3 @angular/compiler-cli: 2.4.3

Repro steps.

Was this an app that wasn’t created using the CLI? What change did you do on your code? etc.

Hi,

I got stuck and I hope you could help me out.

I started out normally with the CLI and then decided to put the app behind a proxy. The proxy must distribute requests to various services, all under a common origin. For that, I needed to add a web root prefix to the app, which ran under 4200/ as per default. The app should run under 4200/monitoring/ui so that the proxy can route everything under 80/monitoring/ui to 4200/monitoring/ui

I did the following:

index.html: changed base href from “/” to “/monitoring/ui/”

.angular-cli.json: “outDir”: “dist/monitoring/ui”

The build worked ok. Now, with ng serve running, http://localhost:4200/monitoring/ui will open, but all the .bundle.js files get a 404. I noticed that it is totally irrelevant what I type behind 4200, index.html will always open.

With an external http server sitting on ./dist instead of ng serve the app starts fine, but the angular router won’t work anymore.

I don’t understand where ng serve actually has its web root and how this is intertwined with the angular router.

Thanks!

The log given by the failure.

Normally this include a stack trace and some more information.

Mention any other details that might be useful.

---

Thanks! We’ll be in touch soon.

[Meligy]

I got it working!

One thing I thought you might try to get ng serve to work, is adding a proxy config as explained in README.

I created a JSON file proxy.conf.json that looks like

{
  "/monitoring/ui/**": {
    "target": "http://localhost:4200/",
    "pathRewrite": {
      "^/monitoring/ui": ""
    }
  }
}

(The config is inspired by examples from Webpack docs linked in the Angular CLI proxy section)

And ensured the base href is set correctly in my src/index.html like:

<base href="/monitoring/ui/">

Then ran ng serve like this:

ng serve --proxy=proxy.conf.json

It worked just fine including routing, even lazy loading.

One thing to beware of though is that ng serve is meant for development and debugging. It’s NOT meant to run as a production server.

For production you need to bring your own server and use it with dist folder. In that context, the previous comment should help you.

[Meligy]

Here’s my working example source code:

https://github.com/Meligy/routing-angular-cli/tree/custom-base-path

Look at this commit specifically https://github.com/Meligy/routing-angular-cli/commit/eee45cff8d6f763d3260d6eee55dd3a945888db9

Check the start NPM script.