routerLink not working with AOT build

Question

The routerLink works fine when I do a normal JIT build. But when I try to do an AOT build router link does not redirect to the specified route.

My html code

<ul id="submenu" class="lista-menu aln-centro">
     <li><a 
        routerLinkActive='active'
        routerLink='home'
     >Home</a></li>
     <li><a 
        routerLinkActive='active'
        routerLink='products'
    >Products</a></li>
    <li><a 
        routerLinkActive='active'
        routerLink='about'
    >About</a></li>
    <li><a 
        routerLinkActive='active'
        routerLink='contacts'
    >Contacts</a></li>
</ul>

Since the routing is working in the JIT build therefore I think either I have missed something in my webpack build process or this is a bug in the the @angular/router module, more likely the first one.

Link to git repo with the complete code: https://github.com/rachitbhasin/ng2-webpack-aot

Node version: 6.4.0 or greater.

Install dependencies: npm install

Run DEV/JIT build: npm run start

Run AOT build: npm run build

Run server after AOT build: npm run server

Thanks in advance.

Answer 1

The cause is not the Angular router forwarding but the http server, which can not give a suitable response for the request.

Simply configure your http server to always return the index.html file.

See this example with Express.