routing children component angular

Question

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!

Answer 1

This code is wrong

{ path: 'ajouter', component: <any> 'AjouterClassificationComponent'}

Don't use strings for the name of the component. It should be like this

{ path: 'ajouter', component: AjouterClassificationComponent}

Also, you forgot to import your components in your NgModule

 declarations: [
       UtilisateurComponent,
        ClassificationComponent,
        AjouterClassificationComponent
        ]
imports: [
    RouterModule.forRoot(routes),
    CommonModule,

  //more code below
  ],

Answer 2

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}