ng serve with Apache + baseUrl gives 404 for included scripts

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.

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

[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