Get navigation error after ng build --prod in angular 7

Question

I am working with a very simple angular application.

I have below routing file.

const routes: Routes = [
    {
        path: '',
        component: SelectFrameworkComponent
    }, {
        path: 'angular-4-bootstrap-3',
        component: AngularFourBootstrapThreeComponent
    }
];

That is working fine but when I make a build using ng build --prod and try to run index.html file locally after changing href to my dist folder <base href="">

I am getting this error in console.

Unhandled Navigation Error:  main.eac436052bd523dffe9b.js

Answer 1

Got same issue after added angular router. It seems to have routing problem and found the solution that works for me well. Add in index.html

 <script>document.write('<base href="' + document.location + '" />');</script>

instead of

 <base href="./">

Chaned router configuration which allows me to use hashes in browser link in app.module.ts

 @NgModule({ imports: [ BrowserModule, RouterModule.forRoot(routes,{useHash:true}), Bootstrap4FrameworkModule, BrowserAnimationsModule ],

Answer 2

set useHash: true as @suhyura mentioned at RouterModule.forRoot

You may also want to set the base href to # as showed below in your index.html

<base href="#">