时间戳

首页 > 解决方案 > 组件不是已知元素 - 多模块应用程序

angular - 组件不是已知元素 - 多模块应用程序

问题描述

我认为我的模块设置方式存在问题，因为我不能在我的任何模块中使用任何共享组件。

基本上，我有一个核心模块，然后是一个功能模块。核心模块包含我希望在众多功能模块中共享的所有组件。FeatureModule 正在导入 CoreModule。

我有一个组件，PageSectionComponent我想在 FeatureModule 的仪表板页面上显示它。但是，当我尝试使用选择器时，我得到了page-section is not a known element错误。

文件路径

src
   - components
      - site-layout.component.html
      - site-layout.component.ts
   - modules
      - core
         - core-routing.module.ts
         - core.module.ts
      - feature
         - pages
            - dashboard-page.component.html
            - dashboard-page.component.ts
         - components
            - page-section.component.html
            - page-section.component.ts
         - feature-routing.module.ts
         - feature.module.ts

功能模块.ts

import { NgModule } from '@angular/core';

import { FeatureRoutingModule } from './feature-routing.module';
import { CoreModule } from '../core/core.module';

@NgModule({
  imports: [
    CoreModule,
    FeatureRoutingModule
  ]
})
export class FeatureModule {}

core.module.ts - 导入 SiteLayout 和 PageSection。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SiteLayoutComponent } from 'app/components';
import { CoreRoutingModule } from './core-routing.module';

import { PageSectionComponent } from '@feature/components';

@NgModule({
  declarations: [
    PageSectionComponent,
    SiteLayoutComponent
  ],
  imports: [
    CommonModule,
    CoreRoutingModule,
  ],
  exports: [
    PageSectionComponent,
    SiteLayoutComponent
  ]
})
export class CoreModule {}

我认为我的问题在我的路由范围内。我有一个SiteLayoutComponent我试图用来包装来自核心和功能模块的页面。所以我FeatureRoutingComponent最终看起来像这样，所有路径都有SiteLayoutComponent，然后根据路径获取特定的仪表板或其他组件。

功能路由.component.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SiteLayoutComponent } from '@components/layouts/site-layout.component';
import { DashboardPageComponent } from '@feature/pages';

const routes: Routes = [
  {
    path: '',
    component: SiteLayoutComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, 
      { path: 'dashboard',  component: DashboardPageComponent }
    ]
  }
];

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

目前，SiteLayoutComponent仅包含路由器插座。

站点布局.component.html

<router-outlet></router-outlet>

所以这就是我开始遇到麻烦的地方。在 上DashboardPageComponent，我试图放置一个“PageSectionComponent”。

仪表板页面.component.html

<page-section></page-section>

这就是我最终得到错误说明page-section不是已知元素的地方。

我正在阅读多模块应用程序，据我所知，似乎我所要做PageSectionComponent的就是CoreModule将不工作。CoreModuleFeatureModule

目前，我唯一的猜测是，因为 Site-Layout 是一个可共享的组件，并且直接在feature-routing.module.tsAND内部引用，所以它以某种方式core.module.ts失去了导入的范围。PageSectionComponent

标签： angulartypescript

解决方案

我的朋友，我找不到您在哪里声明您的 DashboardPageComponent... 我认为您需要先进行此声明。

尝试类似：

import { NgModule } from '@angular/core';

import { FeatureRoutingModule } from './feature-routing.module';
import { DashboardPageComponent } from './feature.module';
import { CoreModule } from '../core/core.module';

    @NgModule({
      declarations:[
         DashboardPageComponent 
      ],
      imports: [
        CoreModule,
        FeatureRoutingModule
      ],
      export: [
        DashboardPageComponent
       ]
    })
    export class FeatureModule {}

您不能忘记制作的导入组件。

我也会认为这种模块化更好，它非常令人困惑。

推荐阅读