Issue
I created a component called detail associated to a button but it won't route me to it, no error is displayed, I don't know how to solve it, thanks.
detail.component.ts :
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-detail',
templateUrl: './detail.component.html',
styleUrls: ['./detail.component.scss']
})
export class DetailComponent {
constructor( private router: Router){console.log('ciao')}
}
and this is my app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DetailComponent } from './detail/detail.component';
import { DisplayBookComponent } from './display-book/display-book.component';
import { AddBookComponent } from './add-book/add-book.component';
const routes: Routes = [
{
path: 'add',
component: AddBookComponent
},
{
path: 'display',
component: DisplayBookComponent
},
{
path: '**',
redirectTo: 'display'
},
{
path: 'detail/:id',
component: DetailComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
the button is on the display-book.component, this is the ts:
import { Component, OnInit } from "@angular/core";
import { BookServiceService } from "../book-service.service";
import { Book } from '../book';
import { Router } from "@angular/router";
@Component({
selector: "app-display-book",
templateUrl: "./display-book.component.html",
styleUrls: ["./display-book.component.scss"]
})
export class DisplayBookComponent implements OnInit {
books: Book[] = [];
constructor(private bookService: BookServiceService, public router:Router) {}
ngOnInit(): void {
this.bookService.getBooks().subscribe((data: Book[]) => {
this.books = data;
});
}
removeBook(book: Book) {
this.bookService.removeBook(book.id.toString()).subscribe(() => {
this.books = this.books.filter(b => b !== book);
});
}
navigateToDetail(book: Book) {
this.router.navigate(['/detail', book.id]);
}
}
and this is the html button in the display-book.html:
<button mat-raised-button (click)="navigateToDetail(book)">Detail</button>
and this is my app.module.ts:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { RouterModule } from "@angular/router";
import { AppComponent } from "./app.component";
import { BookServiceService } from "./book-service.service";
import { DisplayBookComponent } from "./display-book/display-book.component";
import { AddBookComponent } from "./add-book/add-book.component";
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatDividerModule } from '@angular/material/divider';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { DetailComponent } from "./detail/detail.component";
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
MatButtonModule,
MatDividerModule,
MatIconModule,
MatCardModule,
MatInputModule,
RouterModule.forRoot([
{
path: "add",
component: AddBookComponent
},
{
path: "display",
component: DisplayBookComponent
},
{
path: "**",
redirectTo: 'display'
},
{
path: "detail",
component: DetailComponent
},
]),
BrowserAnimationsModule
],
declarations: [
AppComponent,
DisplayBookComponent,
AddBookComponent
],
bootstrap: [AppComponent],
providers: [BookServiceService]
})
export class AppModule {}
I tried to modify both the app-routing.module, the app.module.ts and add imports on the specs, import { RouterTestingModule } from "@angular/router/testing"; import { HttpClientTestingModule } from "@angular/common/http/testing";
Solution
The problem is with your route config. Actually angular matches routes in a sequence as mentioned in routes array. So your '**' route should be at end. correct route config would be :-
const routes: Routes = [
{
path: 'add',
component: AddBookComponent
},
{
path: 'display',
component: DisplayBookComponent
},
{
path: 'detail/:id',
component: DetailComponent
},
{
path: '**',
redirectTo: 'display'
}
];
Answered By - Aakash Garg
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.