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

[alpengeist]

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.

[beeman]

@alpengeist can you try to run ng build with the parameters --output-path and --base-href, with the correct values?

[alpengeist]

I've tried that. Same result. The build was never the problem in the first place. The files are at the right place under dist/. The --base-ref modified index.html, which I had done manually. Thus, it is all the same.

The webserver configuration of ng serve is the confusing bit. I know it is webpack, but what is its configuration? Why is everything behind 4200/ irrelevant and index.html gets opened no matter what? It seems as if it has a default fallback rule built-in.

Moreover, ng serve runs a build but the files appear nowhere. It won't write into dist/.

[rscottfree]

@alpengeist This isn't an answer to your question, but one oddity I discovered is that for me when I changed the href on my tag from <base href="/myapp/"> to <base href="/myapp"> (omitting the trailing forward slash) then my bundle files would load -- otherwise I got a 404 like you. Also, the base href is the only thing I changed; I'm still building everything to the 'dist' directory as it was by default. ("outDir": "dist").

However, it's loading them from the root URL, which is strange. E.g. http://localhost:4200/vendor.bundle.js instead of what I expect would be http://localhost:4200/myapp/vendor.bundle.js

I'm also trying to setup a proxy to route everything through port 80 (using Apache) but without any luck. Using other static file servers works fine except for the angular routes, which is why I'm trying to get ng serve to work.

[Meligy]

The way I got this working is by running ng build -bh "/monitoring/ui/" (-bh is short for --base-href).

The bad news is that this is not supported in ng serve.

In my case, I serve the dist folder under my server (IIS in that case). I have a web.config file that rewrites all URLs to index.html, and got it in my angular-cli.json assets so that it exists in dist.

I use ng build --watch -bh "/monitoring/ui/" instead of ng serve, since the server takes care of the actual serving.

[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 Meligy/routing-angular-cli@eee45cf

Check the start NPM script.

[alpengeist]

@Meligy This is great, thank you so much!

I got away without the -bh option by synchronizing the outDir in angular.cli.json and in tsconfig.json with the base href.

I know that ng serve is just for development, but I wanted it to work with the same project config, which is now fixed with the proxy option.

And thank you also for the last bit for me to understand the router. The reroute to index.html is the detail that I was missing. It occured to me this morning and you confirmed it. Funny that this is not prominently explained in the router manual.

[filipesilva]

Awesome writeup by @Meligy, adding this to the FAQs!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}