3

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
Paresh Gami
  • 4,777
  • 5
  • 23
  • 41

2 Answers2

2

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 
  ],
suhyura
  • 188
  • 1
  • 6
  • useHash may solve it but it won't actually resolve the issue if you want to use "Real" urls which are better for SEO and indexing. Also doesn't help with SSR. – Reza Kajbaf Mar 03 '20 at 18:00
0

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="#">
Brijesh Lakkad
  • 611
  • 10
  • 13