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?

On your routing module add `{useHash: true}`. It would look something like this: `RouterModule.forRoot(routes, {useHash: true})`. With hash it will be able to handle refresh. — ygorazevedo, Sep 28 '18 at 12:49
@YgorAzevedo your suggestions did it. Can you make an answer. Thanks all for helping! — Thomas Segato, Sep 28 '18 at 15:58

score 7 · Answer 1 · answered Sep 28 '18 at 16:28

7

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.

answered Sep 28 '18 at 16:28

ygorazevedo

487
1
4
14

2

you saved my life. – dipesh Jun 20 '19 at 17:56
I'm glad I could help. – ygorazevedo Jun 26 '19 at 19:33

score 2 · Accepted Answer · answered Sep 28 '18 at 12:47

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.

Thanks for you replies all @Suresh and Ygor solved the issue. — Thomas Segato, Sep 28 '18 at 16:00

score 1 · Answer 3 · answered Oct 19 '20 at 06:41

1

This issue is also occurs when you have changed base href value

<base href="/"> to Something else

in index.html

answered Oct 19 '20 at 06:41

Basavaraj

11
1

This was the pesky issue I was running into. – Tony Brasunas Apr 07 '21 at 01:51

score 0 · Answer 4 · answered Sep 28 '18 at 13:36

0

It seems that it is a URL Re-write issue. If you have iis server then you need to put web.config file in the server and add logic for url rewrite. you can find it in the angular.io

If you have apache then you need to write you have to add [.htaccess][2]

[2]: Deploy Angular 2 to Apache Server file.

answered Sep 28 '18 at 13:36

saumil_

304
2
11

I am using ng serve. – Thomas Segato Sep 28 '18 at 15:53
on which system are you working on? Windows or Apache? – saumil_ Sep 29 '18 at 04:53
Windows and Angular CLI. – Thomas Segato Sep 29 '18 at 05:58
Then please add web.config and add below logic – saumil_ Sep 29 '18 at 06:03

Loading a page directly in Angular 6

4 Answers4