routing children component angular

edkeveked

Sorry, this question may have already been asked. But it has been hours since I am trying to figure out what I am doing wrong. I want to display a child component inside a parent. But so far I haven't succeeded to do so.

routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import ... 

const routes: Routes = [

  { path: 'utilisateurs', component: UtilisateurComponent },
  { path: 'classifications', component: ClassificationComponent ,
    children: [
      { path: '', redirectTo: 'ajouter',  pathMatch: 'full'},
      { path: 'ajouter', component: <any> 'AjouterClassificationComponent'}
    ]
  }

]

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
   // RouterModule.forChild(routes),
    CommonModule
  ],
  exports:[ RouterModule ]
  //declarations: []
})
export class RoutingModule { }

component

import {Component, OnInit, Input} from '@angular/core';
import {AppService} from "../../app-service.service";
import { Location } from "@angular/common";
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-classification',
  templateUrl: './classification.component.html',
  styleUrls: ['./classification.component.css']
})
export class ClassificationComponent implements OnInit {

  constructor(
    private appService: AppService,
    private location: Location,
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit(): void{
    this.appService.getClassifications()
      .then(classifications => this.classifications = classifications)
  }


 ouvrirFormulaireClassification(): void{
    //this.afficherFormulaireClassification = true;
    this.router.navigate(['ajouter']);
 }

}

My HTML template

<br/>
    <!--<a routerLink="['ajouter']">
      <input type="submit" value="Ajouter une classification"/>
    </a>-->
    <button (click)="ouvrirFormulaireClassification()">Ajouter une classification</button><br/>
  </form>

And in the browser console, I have this long list of errors

error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: No component factory found for AjouterClassificationComponent. Did you add it to @NgModule.entryComponents?
Error: No component factory found for AjouterClassificationComponent. Did you add it to @NgModule.entryComponents?
    at NoComponentFactoryError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:7388:33)
    at NoComponentFactoryError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:31323:16)
    at new NoComponentFactoryError (http://localhost:4200/vendor.bundle.js:31443:16)
    at _NullComponentFactoryResolver.resolveComponentFactory (http://localhost:4200/vendor.bundle.js:31460:15)
    at AppModuleInjector.CodegenComponentFactoryResolver.resolveComponentFactory (http://localhost:4200/vendor.bundle.js:31504:35)
    at RouterOutlet.activate (http://localhost:4200/vendor.bundle.js:78010:49)
    at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/vendor.bundle.js:26177:16)
    at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:26144:26)
    at http://localhost:4200/vendor.bundle.js:26080:58
    at Array.forEach (native)
    at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:26080:29)
    at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:26145:26)
    at http://localhost:4200/vendor.bundle.js:26080:58
    at Array.forEach (native)
    at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:26080:29)

zone.js:522 Unhandled Promise rejection: No component factory found for AjouterClassificationComponent. Did you add it to @NgModule.entryComponents? ; Zone: angular ; Task: Promise.then ; Value: 
NoComponentFactoryError {__zone_symbol__error: Error: No component factory found for AjouterClassificationComponent. Did you add it to @NgModule.en……}
 Error: No component factory found for AjouterClassificationComponent. Did you add it to @NgModule.entryComponents?
    at NoComponentFactoryError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:7388:33)
    at NoComponentFactoryError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:31323:16)
    at new NoComponentFactoryError (http://localhost:4200/vendor.bundle.js:31443:16)
    at _NullComponentFactoryResolver.resolveComponentFactory (http://localhost:4200/vendor.bundle.js:31460:15)
    at AppModuleInjector.CodegenComponentFactoryResolver.resolveComponentFactory (http://localhost:4200/vendor.bundle.js:31504:35)
    at RouterOutlet.activate (http://localhost:4200/vendor.bundle.js:78010:49)
    at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/vendor.bundle.js:26177:16)
    at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:26144:26)
    at http://localhost:4200/vendor.bundle.js:26080:58
    at Array.forEach (native)
    at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:26080:29)
    at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:26145:26)
    at http://localhost:4200/vendor.bundle.js:26080:58
    at Array.forEach (native)
    at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:26080:29)

Anyone to help me out? Thanks!

Tatsuyuki Ishi

You have to import the component into the module to use it in routing (presumably root module app.module.ts in this case).

Make sure your module has this:

declarations: [
  ...
  AjouterClassificationComponent,
  ...
]

Using string identifiers in routing will not work. Do not cast them to <any>. Import and use the class instead:

import AjouterClassificationComponent from '.../...component.ts';

{ path: 'ajouter', component: AjouterClassificationComponent}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related