Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ng serve with Apache + baseUrl gives 404 for included scripts #4211

rscottfree opened this issue Jan 24, 2017 · 7 comments

ng serve with Apache + baseUrl gives 404 for included scripts #4211

rscottfree opened this issue Jan 24, 2017 · 7 comments


Copy link


macOS Sierra


angular-cli: 1.0.0-beta.26
node: 4.4.5
os: darwin x64
@angular/common: 2.4.4
@angular/compiler: 2.4.4
@angular/core: 2.4.4
@angular/forms: 2.4.4
@angular/http: 2.4.4
@angular/platform-browser: 2.4.4
@angular/platform-browser-dynamic: 2.4.4
@angular/router: 3.4.4
@angular/compiler-cli: 2.4.4

Repro steps.

Create new app with angular-cli.
Change <base href="/"> to <base href="/myapp/">
In package.json change the start script to: "start": "ng serve --port 3000",
Run npm start

The log given by the failure.

Server starts up fine: ** NG Live Development Server is running on http://localhost:3000. **

Mention any other details that might be useful.

I have an Apache virtualhost proxy that forwards http://localhost/myapp to http://localhost:3000/myapp.

<VirtualHost *:80>
  ServerName localhost

  ProxyPreserveHost on

  ProxyPass /myapp http://localhost:3000/myapp/
  ProxyPassReverse /myapp http://localhost:3000/myapp/

When I access http://localhost/myapp the initial index.html loads fine but the included js files do not load -- they return 404.

http://localhost/myapp returns 200 and has the index.html as response.
http://localhost/myapp/inline.bundle.js returns 404 as well as the other bundle files.

I had this same setup with an Angular 1 app before and using BrowserSync. In that case I had to configure BrowserSync to serve requests to /myapp from the /dist folder with this configuration:

  port: serverPort,
  server: {
    baseDir: './dist',
    routes: { '/myapp': 'dist' }
  middleware: [historyApiFallback()],

However, I'm not sure how to do something similar with angular-cli or if it is possible. I would like to access my app from http://localhost/myapp. Is this setup possible with the angular-cli dev server? Can anyone point me in the right direction?

Other things I tried

I tried adding in the deployUrl to angular-cli.json, setting it to "myapp/" but that would make the url look like http://localhost/myapp/myapp/inline.bundle.js which is not my intention (and also returns 404 for included scripts).

I also tried setting up a proxy even though I don't think this is the right path since I'm already kind of doing this through Apache. This was my proxy.conf.json:

	"/myapp": {
		"target": "http://localhost:3000",
		"secure": false

When running with the proxy I would get an error in the browser either a bad gateway error or something that said it couldn't load that path.

Copy link

danielsogl commented Jan 24, 2017

Did you tried this by adding this line of code to your index.html?

<script>document.write('<base href="' + document.location + '" />');</script>

I also fixed problems like this on tomcat with <base href="./">

Copy link

@MTechDE Thanks for the suggestion. Unfortunately this doesn't work. I get the same error. I tried it along with the deployUrl property with same result.

I also read that this may not work with URLs more than one "folder" deep.

Copy link

I fixed my issue with an answer by @Meligy on a separate issue: #4226 (comment)

To summarize the steps I took:

  1. In index.html I set my base href to <base href="/myapp/">
  2. I configured the proxy to redirect by adding a proxy.conf.json file alongside the angular-cli.json file:
  "/myapp/**": {
    "target": "http://localhost:3000/",
    "pathRewrite": {
      "^/myapp": ""
  1. Configured my npm "start" script in package.json to run on the port and proxy specified:
    ng serve --port 3000 --proxy=proxy.conf.json

This allows me to maintain my apache virtualhost proxies and to keep the same URL structure as is in my production environment.

Copy link

The proxy.conf.json worked for me too, thanks a lot for posting, @rscottfree

Copy link

Could you help me to configure the proxy.conf.json file in angular-cli.json file.
Because calling proxy.conf.json in ng server worked fine for me.

But I need to do the same in prod where I cant do ng serve.

Appreciate your help

Copy link

@dhamotharan19, How are you running your app in production? In my case I run ng build --prod and then copy the contents of the /dist folder to the production environment. At that point it's up to whatever server you are using in production to serve up this directory. If you're using Apache to serve your webpage then you'll need to configure apache to look at this /dist folder to serve content to your url, e.g. You'll no longer use angular-cli.json or proxy.conf.json to configure this.

Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
None yet
None yet

No branches or pull requests

4 participants