Angular 6：在功能模块之间共享组件不起作用

Posted 2023-03-13

【中文标题】Angular 6：在功能模块之间共享组件不起作用

【英文标题】：Angular 6: Sharing component between feature modules doesn't work

【发布时间】：2018-12-30 01:56:20

【问题描述】：

我创建了 2 个功能模块（PagesSharedModule & HomeModule）。 现在我尝试在来自HomeModule 的组件的模板内使用来自PagesSharedModule 的导出组件，我收到此错误：

ERROR Error: Uncaught (in promise): Error: Template parse errors: 'app-main-menu' is not a known element:
1. If 'app-main-menu' is an Angular component, then verify that it is part of this module.
2. If 'app-main-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR
->]<app-main-menu></app-main-menu>"): ng:///HomeModule/HomeComponent.html@0:0 Error: Template parse errors: 'app-main-menu' is not a known element:
1. If 'app-main-menu' is an Angular component, then verify that it is part of this module.
2. If 'app-main-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR
->]<app-main-menu></app-main-menu>"): ng:///HomeModule/HomeComponent.html@0:0
    at syntaxError (compiler.js:215)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14687)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22687)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22674)
    at compiler.js:22617
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22617)
    at compiler.js:22527
    at Object.then (compiler.js:206)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22526)
    at syntaxError (compiler.js:215)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14687)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22687)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22674)
    at compiler.js:22617
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22617)
    at compiler.js:22527
    at Object.then (compiler.js:206)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22526)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3751)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

如果有什么不同，HomeModule 是一个路由延迟加载模块。

我的代码：

src/app/pages/pages-shared/pages-shared.module.ts

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  MainMenuComponent  from './main-menu/main-menu.component';

@NgModule(
  imports: [
    CommonModule
  ],
  declarations: [
    MainMenuComponent
  ],
  exports: [
    MainMenuComponent
  ]
)

export class PagesSharedModule  

src/app/pages/pages-shared/main-menu/main-menu.component.ts

import  Component, OnInit  from '@angular/core';

@Component(
  selector: 'app-main-menu',
  templateUrl: './main-menu.component.html',
  styleUrls: ['./main-menu.component.scss']
)
export class MainMenuComponent implements OnInit 
  constructor()  
  ngOnInit()  

src/app/pages/home/home.module.ts

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  HomeComponent  from './home.component';
import  HomeRoutingModule  from './home-routing.module';
import  PagesSharedModule  from 'src/app/pages/pages-shared/pages-shared.module';

@NgModule(
  imports: [
    CommonModule,
    HomeRoutingModule,
    PagesSharedModule
  ],
  declarations: [
    HomeComponent
  ]
)

export class HomeModule  

src/app/pages/home/home.component.html

<app-main-menu></app-main-menu>

src/app/pages/pages-routing.module.ts

...

  path: '',
  component: PagesComponent,
  children: [
    
      path: '',
      pathMatch: 'full',
      loadChildren: './home/home.module#HomeModule'
    ,
    
      path: 'about',
      pathMatch: 'full',
      loadChildren: './content/content.module#ContentModule'
    ,
     path: '**', component: PageNotFoundComponent 
  ]
,
...

src/app/pages/home/home-routing.module.ts

  path: '',
  pathMatch: 'full',
  component: HomeComponent

我做错了什么？谢谢。

【问题讨论】：

我在 stackblitz 项目中复制了你的代码。它正在工作。检查此网址stackblitz.com/edit/angular-p6enbz

请包含整个错误消息，因为它告诉您代码中的实际错误。正如上面提到的，你的代码应该可以工作，所以我认为你没有提到什么

@Houssem Romdhani，我查看了您的代码，唯一似乎与我所做的不同的是，在我的情况下，功能模块是使用路由模块延迟加载的（不包括在上面） .对我来说，由于某种未知原因它仍然无法正常工作......

@yurzui，我用完整的错误消息更新了我的问题。

@Pini，请提供 HomeRoutingModule 代码。

【参考方案1】：

更新：难以置信！！！我停止了 Angular CLI 并再次提供服务，现在一切正常，代码没有任何更改。将此注释留在这里以防万一其他人面临同样的问题...