Problems with webpack build

[dazzbourgh]

OS
Windows 10

Versions.
angular-cli: 1.0.0-beta.21
node: 6.9.4
os: win32 x64

Repro steps.
I am using angular-cli with built-in webpack and encounter the following problem: if I use ng serve --host 0.0.0.0 --port 3000 everything works fine, but when I try to build the app (no matter developer mode or production) with ng build and then put it into my nginx, not a single route works and every attempt of browser to download image, which is used on start page, ends with 404 error. Am I doing something wrong?

The log given by the failure.
Either gives 404 on request to get image or redirects to "page not found" if any route activated

[beeman]

@dazzbourgh it seems that you are using quite an old version of the CLI.

It might make sense to upgrade to the latest version to see if you still have the issue

https://github.com/angular/angular-cli#updating-angular-cli

[dazzbourgh]

@beeman just tried - no luck

[Meligy]

Let me guess, is your nginx path different from /?

[dazzbourgh]

@Meligy no, it's not. But after your answer I made some research and it seems like problem is likely to be in location inside my confing in sites-available folder. Is there any tutorial on how to deploy angular-cli app to nginx? Can't seem to find one.

[Meligy]

There's not much Angular or Angular CLI specific to it.

Exceptions:

• /dist should be mapped to / by default, but you can ng build --base-href="/some/path/" if you are going to configure your server to have the site at /some/path/.
• You might also want to have URL rewrite rules that redirect non-existing files to index.html if you use client-side routing.

Apart from that, /dist is just a static site. Nothing specific about Angular CLI etc.

[dazzbourgh]

@Meligy so if I want my routes (which are processed with Angular's Router) to work fine, I should add redirect to each one of them to index.html? And how do I do that?

[deebloo]

@dazzbourgh it is something you can configure with nginx

[catull]

Is this really a problem with angular CLI ?

Seems a config / deployment job for nginx; correct me if I over-simplify here.

[dazzbourgh]

@catull that may be the case, but I can not find any information on how do I deploy my project after I do ng build --prod, so I can't even tell what exactly is causing the problem

[catull]

@dazzbourgh Out of curiosity, how are you deploying it now ? ZIP up the dist folder and unpacking at destination ?

[dazzbourgh]

@catull I put contents of dist folder to /var/www/html and this is my nginx config at /etc/nginx/sites-available/default:

server {
	listen 80 default_server;
	root /var/www/html;
	index index.html index.htm;
	server_name localhost;
	location / {
		try_files $uri $uri/ =404;
	}
}

This is where I got the idea from

[filipesilva]

I'm going to close this issue as it's not something actionable to fix on the repo. Feel free to continue the conversation though.

You can also find some more information regarding deployments (and nginx config) here: https://angular.io/docs/ts/latest/guide/deployment.html#!#production-servers

[arjunramaswami]

Could someone find a solution? I did and get the exact same thing

[Meligy]

The recommended config in the doc page referenced suggests that

Instead of

try_files $uri $uri/ =404;

You use:

try_files $uri $uri/ /index.html;

In my experience this seems to work best when your base href is not just '.', but starts and ends in /, so either / or /some/path/.