Angular 5 - “验证它是此模块的一部分”消息

时间:2018-01-14 15:01:27

标签: angular angular-ui-router

将我的组件从app.component.html更改为另一个other-component.html

后,我遇到了错误

app.component.html (这很有效)

<main>
  <my-component></my-component>
  <router-outlet></router-outlet>
</main>

但是,就这样......

app.component.html

<main>
  <router-outlet></router-outlet>
</main>

other.component.html (此操作失败)

<section>
    Something here
    and my-component here: <my-component></my-component>
</section>

得到错误:

  
      
  1. 如果'my-component'是Angular组件,请验证它是否是此模块的一部分。
  2.   
  3. 如果'my-component'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'   压制此消息。
  4.   

我在路由器上使用“子组件延迟加载”。

应用-routing.module.ts

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

const routes: Routes = [
  {
    path: 'first-module',
    loadChildren: 'app/first-module/first-module.module#FirstModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: false })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这是我的app.module.ts加载core.module(我在{core.module btw中有my-component}

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { provideRoutes} from '@angular/router';

import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CoreModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    NO_ERRORS_SCHEMA
  ]
})
export class AppModule { }

core.module

import { NgModule, NO_ERRORS_SCHEMA, Optional, SkipSelf } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule, DatePipe } from "@angular/common";

import { MyComponent} from './components/my-component/my-component.component';

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    HttpClientModule,
    CommonModule
  ],
  exports: [
    MyComponent
  ],
  providers: [
    DatePipe
  ],
  schemas: [
    NO_ERRORS_SCHEMA
  ]
})
export class CoreModule {

  constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error(
        'CoreModule is already loaded. Import it in the AppModule only');
    }
  }

 }

因此,应用程序在y转到url localhost:4200 / first-component时启动,它会加载主app.module,它会加载核心模块,最后一个加载my-component。但似乎只有将my-component放在app.component.html上才有效。

有人可以给我一些帮助吗?

0 个答案:

没有答案