Angular 8 - URL loads with routerLink but doesn't show when directly access in the browser in LOCALHOST

Question

I have developed the Angular 8 application and I am using the routerLink to navigate the components which work fine without any issue but when I enter the same URL directly in the browser it doesn't show anything and in the console, I am seeing the errors as below

For Example, I open the homepage http://localhost:4200/home and I have added the routerLink here to go to http://localhost:4200/about and I will be able to view successfully but if I enter the URL http://localhost:4200/about directly in the ULR nothing shows

I have taken care of the app-routing.model.ts

const routes: Routes =
    [
        { path: 'home', component: HomeComponent },
        { path: 'about', component: AboutComponent },
        { path: '**', redirectTo: '/home', pathMatch: 'full' }
    ];
    @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

And I have header.component.ts to handle the navigation bar so I have added the <router-outlet></router-outlet> in the header.component.html and then I have included the selector of header.component.ts in app.component.ts <app-header></app-header> and then in finally index.html I have included the selector of app.component.ts i.e <app-root></app-root>

Can you please tell me if there is something wrong.

Before asking this question I have gone through below and nothing helps

Hello, @WillAlexander I have updated the question with details as it was a bit explanatory, thanks !! — Mahesh G, Aug 15 '19 at 14:37
And I am seeing the errors as `Failed to load resource: the server responded with a status of 404 (Not Found)` in the console when I directly access the URL — Mahesh G, Aug 15 '19 at 14:42
Have you tried restarting the development server? Have you modified the `base href` at all? Have you tried putting your `router-outlet` in the AppComponent template, as that would make more sense? — Will Alexander, Aug 15 '19 at 14:46
Yeah I have tried putting the router-outlet to app.component and also I have ` ` in the index.html file and still the same issue — Mahesh G, Aug 15 '19 at 14:50
I am using `ng serve` to start in the local system, It was well working before initially and not sure what changed suddenly — Mahesh G, Aug 15 '19 at 14:57
And I know many people suggested to use hash in the router module like `imports: [RouterModule.forRoot(routes, { useHash: true })],`, this will work but I don't want to keep # in the URL and my app was working previously without hash aswell — Mahesh G, Aug 15 '19 at 15:02
I was wondering if you were actually using the CLI or not. Are you sure you don't have any compilation issue? — JB Nizet, Aug 15 '19 at 15:32
I supouse you import the AppRoutingModule in your app.module — Eliseo, Aug 15 '19 at 20:30

score 8 · Answer 1 · edited Dec 15 '19 at 18:13

8

On server we can use hashStrategy for routing.

In routing file just replace RouterModule.forRoot(routes) to RouterModule.forRoot(routes,{useHash : true}).

edited Dec 15 '19 at 18:13

Adrian Mole

49,934
160
51
83

answered Dec 15 '19 at 17:53

aakash varshney

148
1
5

Simple, effective solution – Ayo Makanjuola Jun 25 '20 at 00:13
Thanks Guy, It solved my problem after much searching on google. – Babak irannezhad Apr 08 '21 at 06:12

score 0 · Answer 2 · answered Jul 17 '20 at 16:27

for apache server you can add .htaccess file

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

We have to make sure that inside index.html base href is

score 0 · Answer 3 · answered Sep 17 '20 at 02:47

0

This may be a little odd, but I had a trailing space in a cssclass="class class2 "

answered Sep 17 '20 at 02:47

Dave

1,179
12
18

Angular 8 - URL loads with routerLink but doesn't show when directly access in the browser in LOCALHOST

3 Answers3