Loading a page directly in Angular 6

Question

I have an Angular 6 application with a component called assets. When I navigate to the component through routerLinks, the page load and shows data as expected:

http://localhost:4200/assets/2

However if I refresh the page, or just load the link directly in a browser then a lot of my scripts fail to load:

GET http://localhost:4200/assets/runtime.js net::ERR_ABORTED 404 (Not Found)

Refused to execute script from '<URL>' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

GET http://localhost:4200/assets/polyfills.js net::ERR_ABORTED 404 (Not Found)

Do I need to do something in the router or what's causing this?

Answer 1

Enable hash location in your route module. It should look something like the follow.

const routes: Routes = [
  { path: '', component: MyComponent },
  { path: 'my-other', component: MyOtherComponent }
];

@NgModule({
  exports: [ RouterModule ],
  imports: [ RouterModule.forRoot(routes, {useHash: true}) ]
})
export class MyRoutingModule { }

After that Angular will be able to process refreshing.

Answer 2

This is because, Angular router by default uses PathLocationStrategy.

http://localhost:4200/assets/2. When you refresh the browser, you need to redirect to home page (index.html) and this should be handled in server side router redirect settings.

You can also try HashLocationStrategy i.e it will add router path with '#'. http://localhost:4200/#assets/2. If you follow this, you can handle page refresh. But we need to make sure the page state is available in all the modules including Lazy Loaded Modules.