Angular15+NX微前端共享组件无法识别问题求助

我正在用Angular 15、NX（集成模式）和模块联邦搭建微前端项目，现有shell和video两个应用。通过NX CLI在packages目录创建了shared/ui包及widget组件，但在video应用中使用时遇到以下错误：

error NG8001: 'my-org-widget' is not a known element:

1. If 'my-org-widget' is an Angular component, then verify that it is part of this module.
2. If 'my-org-widget' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

相关配置文件 #

nx.json #

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "npmScope": "my-org",
  "tasksRunnerOptions": {
    "default": {
      "runner": "@nrwl/nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "x"
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "^production"]
    },
    "test": {
      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"]
    },
    "e2e": {
      "inputs": ["default", "^production"]
    },
    "lint": {
      "inputs": ["default", "{workspaceRoot}/.eslintrc.json"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "sharedGlobals"],
    "production": [
      "default",
      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
      "!{projectRoot}/tsconfig.spec.json",
      "!{projectRoot}/jest.config.[jt]s",
      "!{projectRoot}/.eslintrc.json"
    ],
    "sharedGlobals": []
  },
  "workspaceLayout": {
    "appsDir": "packages",
    "libsDir": "packages"
  },
  "generators": {
    "@nrwl/angular:application": {
      "style": "scss",
      "linter": "eslint",
      "unitTestRunner": "jest",
      "e2eTestRunner": "cypress"
    },
    "@nrwl/angular:library": {
      "linter": "eslint",
      "unitTestRunner": "jest"
    },
    "@nrwl/angular:component": {
      "style": "scss"
    }
  },
  "defaultProject": "shell"
}

packages/shared/ui/src/lib/shared-ui.module.ts #

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

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

packages/video/src/app/app.module.ts #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { SharedUiModule } from '@my-org/shared/ui';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    SharedUiModule,
    RouterModule.forRoot(
      [
        {
          path: '',
          loadChildren: () =>
            import('./remote-entry/entry.module').then(
              (m) => m.RemoteEntryModule
            ),
        },
      ],
      { initialNavigation: 'enabledBlocking' }
    ),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

解决思路 #

1. 检查组件选择器匹配 #

确认WidgetComponent的装饰器中selector字段是否为my-org-widget，组件代码示例：

@Component({
  selector: 'my-org-widget',
  templateUrl: './widget.component.html',
  styleUrls: ['./widget.component.scss']
})
export class WidgetComponent {}

如果选择器是其他值，模板中要对应使用正确的标签。

2. 确认共享库的构建与导出 #

• 检查packages/shared/ui/package.json中的main/module/exports字段是否正确指向SharedUiModule的编译输出文件，NX生成的库通常会自动配置，若手动修改过需验证正确性。
• 先执行nx build shared-ui构建共享库，确保video应用能获取到最新的编译产物。

3. 验证模块导入的作用域 #

如果my-org-widget是在RemoteEntryModule或其下属组件中使用，需要在对应模块中也导入SharedUiModule。Angular模块的导入是作用域化的，只有导入了模块的NgModule才能使用其导出的组件。示例：

// packages/video/src/app/remote-entry/entry.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RemoteEntryComponent } from './entry.component';
import { SharedUiModule } from '@my-org/shared/ui';

@NgModule({
  declarations: [RemoteEntryComponent],
  imports: [CommonModule, SharedUiModule],
  exports: [RemoteEntryComponent]
})
export class RemoteEntryModule {}

4. 检查TS路径映射 #

确认根目录tsconfig.base.json中的路径映射配置是否正确：

{
  "compilerOptions": {
    "paths": {
      "@my-org/shared/ui": ["packages/shared/ui/src/index.ts"]
    }
  }
}

NX通常会自动添加该配置，若缺失会导致模块导入路径解析错误。

5. 清除NX缓存 #

若以上配置均正确，执行以下命令清除NX缓存后重启开发服务器：

nx reset

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