跨模块引用Angular组件时生产构建报错求助

场景与问题 #

在Angular项目的Cards模块中新增组件，本地运行正常，但执行ng build --prod生产构建时抛出错误。新组件需要使用独立Widget模块中的组件功能，已在CardsModule的imports中导入WidgetModule，并在新组件模板中使用了<widget>标签，但构建时提示该标签未识别，同时出现模块导入/导出值为undefined的异常。

文件夹结构 #

cards   (当前操作的模块)
 + existing-card-1
 + existing-card-2
 + new-card
    + new-card.component.html
    + new-card.component.scss
    + new-card.component.spec.ts
    + new-card.component.ts
 cards.module.ts
 index.ts
widget
 widget.component.html
 widget.component.scss
 widget.component.spec.ts
 widget.component.ts
 widget.module.ts
 index.ts

代码实现 #

新组件模板（new-card.component.html） #

<div class='new-card'>
  <widget [title]='content.title'>
  </widget>
</div>

CardsModule配置（cards.module.ts） #

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { ExistingCard1Component } from "./existing-card-1/existing-card-1.component";
import { ExistingCard2Component } from "./existing-card-2/existing-card-2.component";
import { NewCardComponent } from "./new-card/new-card.component";
import { WidgetModule } from "../widget/widget.module";

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    WidgetModule,
  ],
  exports: [
    ExistingCard1Component,
    ExistingCard2Component,
    NewCardComponent,
  ],
  declarations: [
    ExistingCard1Component,
    ExistingCard2Component,
    NewCardComponent,
  ],
})
export class CardsModule {}

生产构建报错信息 #

ERROR in Unexpected value 'undefined' imported by the module 'CardsModule in /Users/me/projects/our-system/dist/our-system/our-system.d.ts'
Unexpected value 'undefined' exported by the module 'CardsModule in /Users/me/projects/our-system/dist/our-system/our-system.d.ts'
'widget' is not a known element:
1. If 'widget' is an Angular component, then verify that it is part of this module.
2. If 'widget' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<div class="new-card">
  [ERROR ->]<widget [title]="content.title">
")

解决步骤 #

1. 确认WidgetModule的导出配置 #

Widget模块必须将需要对外暴露的组件添加到exports数组中，否则其他模块导入后无法使用其组件。检查widget.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WidgetComponent } from './widget.component';

@NgModule({
  declarations: [WidgetComponent],
  imports: [CommonModule],
  exports: [WidgetComponent] // 关键：导出组件供外部模块使用
})
export class WidgetModule {}

2. 验证导入路径正确性 #

检查CardsModule中WidgetModule的导入路径../widget/widget.module是否准确，生产构建时路径解析可能更严格。如果widget模块的index.ts有导出配置（如export * from './widget.module';），也可以简化为import { WidgetModule } from '../widget';，避免路径拼写错误。

3. 清理构建缓存 #

执行以下命令清理缓存后重新构建：

ng clean
rm -rf dist .angular/cache
ng build --prod

4. 排查循环依赖 #

确认CardsModule与WidgetModule之间没有循环导入（比如WidgetModule是否也导入了CardsModule），循环依赖会导致生产构建时模块解析为undefined。

5. 检查组件Selector匹配 #

确保WidgetComponent的selector与模板中使用的<widget>标签完全一致：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'widget', // 必须和模板中的标签名一致
  templateUrl: './widget.component.html',
  styleUrls: ['./widget.component.scss']
})
export class WidgetComponent {
  @Input() title: string;
}

内容的提问来源于stack exchange，提问作者Simba