Angular 在 NX 中找不到共享組件

Question

我正在嘗試使用 Nx（集成）和模塊聯合在 angular 15 中啟動一個小型微前端項目。 目前我有兩個應用程序：

• 殼
• 視頻

我需要創建共享組件包，這些組件最終將在我添加更多應用程序時使用。 我在包中創建了一個shared/ui packages （使用 nx cli 命令）並在那里生成了一個我需要在video應用程序中使用的widget組件。 但是，當我嘗試使用它時，出現以下錯誤：

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 {}

公平地說，我對 Nx 和微前端都很陌生，所以任何幫助都可以。

有任何想法嗎？

PS完整的當前代碼可以在這里找到： https ://github.com/mmvcode/mfa

謝謝。

Answer 1

由於WidgetComponent是獨立組件，因此您必須導入它而不是在SharedUiModule中聲明它 [參考： https ://angular.io/guide/standalone-components#the-standalone-flag-and-component-imports]

更改： declarations: [WidgetComponent],到

@NgModule({


imports: [CommonModule, WidgetComponent],
  declarations: [],
  exports: [WidgetComponent],
})

並更新entry.module.ts以導入SharedUiModule ，因為您已將VideoDisplayComponent聲明為該模塊的一部分（它在內部使用您的小部件組件）

import { SharedUiModule } from '@my-org/shared/ui';
@NgModule({
  declarations: [
    RemoteEntryComponent,
    NxWelcomeComponent,
    VideoDisplayComponent,
  ],
  imports: [CommonModule,SharedUiModule , RouterModule.forChild(remoteRoutes)],
  providers: [],
})
export class RemoteEntryModule {}

這至少應該成功構建您的應用程序