如果“router-outlet”是 Angular 组件,则验证它是否是该模块的一部分。怎么解决这个问题

问题描述 投票:0回答:1

“router-outlet”不是已知元素:

  1. 如果“router-outlet”是 Angular 组件,则验证它是否是该模块的一部分。
  2. 如果“router-outlet”是 Web 组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。
app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CommonPopupComponent } from './Shared/Common-popup/common-popup/common-popup.component';
import { PlantComponent } from './Masters/Plant/plant.component';
import DataTables from 'datatables.net';
import DataTable from 'datatables.net-dt';
import { DataTablesModule } from 'angular-datatables';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { CommonSwalService } from './common-swal.service';



@NgModule({
  declarations: [
    AppComponent,
    CommonPopupComponent,
    PlantComponent,
    NgModule
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    CommonModule,
    RouterModule,

    DataTablesModule,
  ],
  
  providers: [CommonSwalService],
  bootstrap: [AppComponent],
  schemas:[CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule { }

app.component.ts
import { Component } from '@angular/core'
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'PlantWeb';
  constructor(private router: Router){}
  gotopage(any1: string):void{

  }
  // gotopage(pageName: string):void{
  //   this.router.navigate([`${pageName}`])
  // }
}


app.component.html
description here](https://i.stack.imgur.com/mcC9R.png)
<router-outlet></router-outlet>

“router-outlet”不是已知元素:

  1. 如果“router-outlet”是 Angular 组件,则验证它是否是该模块的一部分。
  2. 如果“router-outlet”是 Web 组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。

解决这个问题

angular angular-routing angular-router
1个回答
0
投票

第一个NgModule它不应该在声明列表中(这很可能是问题的根源)而不是NgM

第二个 RouterModule 应该使用 forRoot/forChild([//routing config]) 来调用

© www.soinside.com 2019 - 2024. All rights reserved.