使用 Angular Elements 创建的 Angular Web 组件会覆盖 Angular Shell 项目的 app-root

如何解决使用 Angular Elements 创建的 Angular Web 组件会覆盖 Angular Shell 项目的 app-root

我目前正在尝试使用 Angular Elements 来创建 Web 组件。我创建了一个在 html 页面中工作的 web 组件：

<!doctype html>
<html lang="en">
<head>
  <Meta charset="utf-8">
  <title>Test</title>
</head>
<body>
<nav-bar title="Test"></nav-bar>
<script type="text/javascript"
        src="https://dev-week-web-components.s3.eu-central-1.amazonaws.com/nav-bar.js"></script>
</body>
</html>

web 组件显示正确，设置了 title 属性。

一旦我将 Web 组件嵌入到 Angular 应用程序中，应用程序根组件就不再起作用。应用程序根组件始终为空，即使它有内容！如果删除用于加载 Web 组件的脚本标记，shell 项目的应用程序根组件将再次运行。

<!doctype html>
<html lang="en">
<head>
  <Meta charset="utf-8">
  <title>NgElementsShell</title>
  <base href="/">
  <Meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script type="text/javascript"
          src="https://dev-week-web-components.s3.eu-central-1.amazonaws.com/nav-bar.js"></script>
</head>
<body>
<nav-bar></nav-bar> 
<app-root></app-root> <!-- Always empty! -->
</body>
</html>

为了创建 Web 组件，我遵循了本教程：https://medium.com/comsystoreply/angular-elements-569025b65c69（仅限德语）。

使用 Angular Elements 创建的 Web 组件是另一个 Angular 项目的应用组件。

@NgModule({
  declarations: [AppComponent],imports: [
    browserModule,NgbModule,],entryComponents: [AppComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
  }

  ngdobootstrap() {
    if (!customElements.get('nav-bar')) {
      const navBarElement = createCustomElement(AppComponent,{injector: this.injector});
      customElements.define('nav-bar',navBarElement);
    }
  }
}

Web 组件的 Angular 项目仅包含这一组件：

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'nav-bar',templateUrl: './app.component.html',styleUrls: ['./app.component.scss'],encapsulation: ViewEncapsulation.ShadowDom
})
export class AppComponent implements OnInit {
  @input() title = 'Web-Component';

  constructor() { }

  ngOnInit(): void {
  }
}

nav-bar.js 文件是来自构建的 Angular 应用程序的 main.js、polyfill.js runtime.js 和 vendor.js 的合并文件。在教程中，使用了一个 scripts.js 文件。我没有这个文件。如果我省略了 vendor.js 文件，Web 组件将无法工作。

我做错了什么？

解决方法

感谢 user14649759 的提示，我解决了问题！ :)

必须使用 Webpack 5。为此，我进行了以下更改：

npm install -g yarn@latest
yarn add webpack@latest
yarn add copy-webpack-plugin@latest

添加到 package.json：

  "resolutions": {
    "webpack": "^5.31.0"
  },

告诉 Angular 使用纱线：

ng config cli.packageManager yarn

yarn 的使用是必须的，因为yarn 使用 resolutions 规范。

来源：

https://www.angulararchitects.io/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/

https://github.com/jhipster/generator-jhipster/issues/13642