Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Angular 15: Check Routing to pages

03.02.2023 (👁4481)

 

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

Ein Bild, das Text enthält.

Automatisch generierte Beschreibung

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>

 

 

 

Ein Bild, das Text enthält.

Automatisch generierte Beschreibung