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 ie <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
On server we can use hashStrategy for routing.
In routing file just replace RouterModule.forRoot(routes)
to RouterModule.forRoot(routes,{useHash : true})
.
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
这可能有点奇怪,但我在cssclass="class class2 " 中有一个尾随空格
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.