Angular 2 routes not working after aot compilation build

Question

I am using RouterModule, I have this in my app.module.ts

const appRoutes: Routes = [
{ path: '', redirectTo: 'mainMenu', pathMatch: 'full' },
{ path: 'mainMenu', component: MainComponent,
  children: [
    {
        path: '',
        redirectTo: 'products',
        pathMatch: 'full'  
    },
    {
        path: 'products',
        component: ProductsComponent
    }
  ] 
},
{ path: 'targeting', component: TargetingComponent }
];

It works really fine when I'm testing locally. /mainMenu/products takes me to the MainComponent and it includes the ProductsComponent. and /targeting takes me to the TargetingComponent as well.

I built the project using

ng build --aot

The generated files in dist were placed on the server. The page automatically redirects to /mainMenu/products. But if I enter in the URL /mainMenu/products or /targeting it does not work. I get GET /mainMenu/products" Error (404): "Not found" or GET /targeting" Error (404): "Not found" . So I assume this is happening because of the ahead of time compilation, is this true? Is there anything I should do in the configuration for this to work?

I'm using npm http-server.

Answer 1

When you build Angular 2 app runs on index.html and tells to the browser which route to show. So you must add a htaccess file to redirect incoming traffic to index.html

This is the .htaccess I'm using:

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

Answer 2

http-server does not work well with angular paths when it is build using ng build --aot . Instead you can use simple node js express server.

Install express using following command.

npm install --save express

Create a file named server.js in your root directory with following contents.

const express = require('express');
const app = express();
const path = require('path');

app.use(express.static(__dirname + '/dist'));
app.listen(process.env.PORT || 8080);

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname + '/dist/index.html'));
});

In your package.json change start like this.

"scripts": {
    "start": "node server.js",
    //**
    "postinstall": "ng build --aot -prod"
 },

Now build using ng build --aot and run with npm start .

Answer 3

Configure your server to return "index.html" for all 404 errors and your problem will be solved.

In ASP.NET this can be like this:

<customErrors>
     <error statusCode="404" redirect="~/app/index.html" />
</customErrors>

Answer 4

I think this article can help you: http://blog.angular-university.io/angular2-router/ In that article there is a section "What could go wrong so soon?" that I think it is what is happening to you

Answer 5

you can use this

<IfModule mod_rewrite.c>
RewriteEngine On  

# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteCond %{HTTPS} off
RewriteRule (.*) http://%{HTTP_HOST}/sgt/index.html
</IfModule>

it works for me