Angular-cli: ng serve with Apache + baseUrl gives 404 for included scripts

[rscottfree]

OS?

macOS Sierra

Versions.

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/
</VirtualHost>

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.

[danielsogl]

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="./">

[rscottfree]

@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.

[rscottfree]

I fixed my issue with an answer by @Meligy on a separate issue: https://github.com/angular/angular-cli/issues/4226#issuecomment-275355701

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.

[0DdoomUs0]

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

[dhamotharan19]

@rscottfree
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

[rscottfree]

@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. example.com/myapp/. You'll no longer use angular-cli.json or proxy.conf.json to configure this.

[angular-automatic-lock-bot[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._}