Für das Routing auf Url Pfade wie /List /read /Write muss
man im Angular Routing was eintragen
Prüfen:
app-routing.module.ts
Prüfen Routes=[..]
Pfade
app.module.ts
Prüfen ob AppRoutingModule eingetragen ist
app.component.html
Prüfen ob router-outlet vorhanden ist
App-routing.module.ts
Check for
the routes: Routes=[…url pathes ..]
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { EditArticleComponent } from './components/articles/edit-article/edit-article.component';
import { ListArticlesComponent } from './components/articles/list-articles/list-articles.component';
import { ReadArticleComponent } from './components/articles/read-article/read-article.component';
const routes: Routes = [
{ path: 'list', component:
ListArticlesComponent },
{ path: 'edit', component:
EditArticleComponent },
{ path: 'read', component:
ReadArticleComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
|
In App.module.ts
Check if
AppRoutingModule is embedded
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; //*for
url to web-api
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ListArticlesComponent } from './components/articles/list-articles/list-articles.component';
import { EditArticleComponent } from './components/articles/edit-article/edit-article.component';
import { ReadArticleComponent } from './components/articles/read-article/read-article.component';
@NgModule({
imports: [
BrowserModule,
AppRoutingModule, //*imports
app-routing file
HttpClientModule //for
web-api cll
],
declarations: [
AppComponent,
ListArticlesComponent,
EditArticleComponent,
ReadArticleComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
|
In app.component.html
Check for
the router-outlet
<div
style="flex-direction:
column;">
<div
>
<a
[routerLink]="['/list']">List
Articles</a>
</div>
<div>
<a
[routerLink]="['/read']">read</a>
</div>
</div>
<router-outlet></router-outlet>
|