ルーティング子供コンポーネント角

Question

申し訳ありませんが、この質問は既に尋ねられている可能性があります。しかし、私が間違っていることを理解しようとしてから数時間を要しています。私は親の中に子コンポーネントを表示したい。しかし、これまで私は成功していませんでした。

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 { } 

コンポーネント

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']); 
} 

} 

私のHTMLテンプレート

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

とブラウザのコンソールで、私はエラーのこの長いリストを持っている

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) 

誰かが私を助ける？ありがとう！

Answer 1

ルーティングに使用するコンポーネントをモジュールにインポートする必要があります（この場合ルートモジュールapp.module.tsと推測されます）。ルーティングでは、文字列の識別子を使用して

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

動作しません。

は、あなたのモジュールは、これは持っていることを確認してください。 <any>にキャストしないでください。インポートし、代わりにクラスを使用します。

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

---

{ path: 'ajouter', component: AjouterClassificationComponent} 

Answer 2

をこのコードは、コンポーネントの名前に文字列を使用しないでください

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

間違っています。 は、それはあなたのNgModuleであなたのコンポーネントをインポートするのを忘れ、また、この

{ path: 'ajouter', component: AjouterClassificationComponent}

ようにする必要があり

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

    //more code below 
    ],