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.

score 3 · Answer 1 · answered Mar 01 '17 at 10:40

3

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]

answered Mar 01 '17 at 10:40

al37350

139
2
8

Ok I created the file with the above. And placed it in the same directory as index.html. Still the same. Am I missing any other steps? How does it automatically know to read from the .htaccess file btw? – Eddy Mar 01 '17 at 11:19
You had to use Apache and allow AllowOverride – al37350 Mar 01 '17 at 12:49
I'm using npm http-server, any idea? – Eddy Mar 01 '17 at 14:41

score 1 · Answer 2 · answered Mar 27 '17 at 16:51

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.

score 0 · Answer 3 · answered Mar 01 '17 at 11:02

0

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>

answered Mar 01 '17 at 11:02

VadimB

5,533
2
34
48

score 0 · Answer 4 · edited Aug 02 '17 at 16:25

0

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

edited Aug 02 '17 at 16:25

Sᴀᴍ Onᴇᴌᴀ

8,218
8
36
58

answered Aug 02 '17 at 16:00

Oscar Avila

26
1

Angular 2 routes not working after aot compilation build

4 Answers4