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

Closed
rscottfree opened this Issue Jan 24, 2017 · 6 comments

Comments

Projects
None yet
4 participants
@rscottfree

rscottfree commented Jan 24, 2017

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

This comment has been minimized.

Show comment
Hide comment
@danielsogl

danielsogl Jan 24, 2017

Contributor

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

Contributor

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

@rscottfree

This comment has been minimized.

Show comment
Hide comment
@rscottfree

rscottfree Jan 24, 2017

@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 commented Jan 24, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@rscottfree

rscottfree Jan 26, 2017

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.

rscottfree commented Jan 26, 2017

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.

@rscottfree rscottfree closed this Jan 26, 2017

@0DdoomUs0

This comment has been minimized.

Show comment
Hide comment
@0DdoomUs0

0DdoomUs0 Apr 30, 2017

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

0DdoomUs0 commented Apr 30, 2017

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

@dhamotharan19

This comment has been minimized.

Show comment
Hide comment
@dhamotharan19

dhamotharan19 May 1, 2018

@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

dhamotharan19 commented May 1, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@rscottfree

rscottfree May 2, 2018

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

rscottfree commented May 2, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment