angular - 核心模块组件和角度共享模块的实现

我想在我的角度应用程序（> v2）中实现核心/共享模块结构。

我添加了带有核心组件和共享模块的核心模块。接下来，我添加了用于http的数据表示和数据服务的简单组件。

Core模块具有CommonModule和HttpClientModule导入，CoreComponent声明和数据服务作为提供程序。

用于数据表示的共享模块导出组件（ProductSectionComponent）

CoreComponent具有“应用程序产品部分”标记。

这是我的代码：

app.module：


    import { SharedModule } from './shared/shared.module';
    import { CoreModule } from './core/core.module';
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';

    import { AppComponent } from './app.component';

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

core.module：


    import { DataService } from './../services/data.service';
    import { NgModule, Optional, SkipSelf } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { CoreComponent } from './core.component';
    import { HttpClientModule } from '@angular/common/http';

    @NgModule({
      imports: [
        CommonModule,
        HttpClientModule
      ],
      declarations: [CoreComponent],
      providers: [DataService],
      exports: [CoreComponent]
    })
    export class CoreModule {
      /* make sure CoreModule is imported only by one NgModule the AppModule */
      constructor (
        @Optional() @SkipSelf() parentModule: CoreModule
      ) {
        if (parentModule) {
          throw new Error('CoreModule is already loaded. Import only in AppModule');
        }
      }
    }

core.component：


    <app-product-section></app-product-section>

shared.module：


    import { ProductSectionComponent } from './../public/product-section/product-section.component';
    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';

    @NgModule({
      declarations: [ProductSectionComponent],
      imports: [
        CommonModule
      ],
      exports: [
        ProductSectionComponent
      ]
    })
    export class SharedModule { }

现在，我在core.component.html中遇到了问题：

“ app-product-section”不是已知元素： 1.如果“ app-product-section”是Angular组件，则请验证它是否属于此模块。 2.如果“ app-product-section”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。

当我将SharedModule添加到CoreModule导入中时，问题已解决，但我觉得这不是Core / Shared结构的本质。

核心模块组件和角度共享模块的实现

1 个答案: