3

微前端调查。我使用 cli 创建了一个示例 angular 应用程序，而不是引导应用程序，我创建了一个像这样的入口点：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { R3CompAngGeneratedModule } from './r3-comp-ang-generated.module';

enableProdMode();

export const mount = (htmlElement: HTMLElement) => {
  htmlElement.innerHTML = `<app-root></app-root>`;
  platformBrowserDynamic().bootstrapModule(R3CompAngGeneratedModule)
  .catch(err => console.log(err));
}

我将 package.json 的 entry 属性设置为指向这个 ts 文件，打包它，发布并在另一个项目中，我安装它并像这样调用它：

import { mount } from 'r3-comp-ang-generated';
const root = document.getElementById("angular-root");
mount(root);

然后使用 webpack 我将它捆绑在一起（使用第二个代码片段作为入口点）并在本地运行它。最令我惊讶的是，我得到了一个错误。

Uncaught Error: Can't resolve all parameters for ApplicationModule: (?).
at syntaxError (util.ts:100)
at CompileMetadataResolver._getDependenciesMetadata(metadata_resolver.ts:959)
at CompileMetadataResolver._getTypeMetadata (metadata_resolver.ts:839)
at CompileMetadataResolver.getNgModuleMetadata (metadata_resolver.ts:683)
at CompileMetadataResolver.getNgModuleSummary (metadata_resolver.ts:453)
at metadata_resolver.ts:589
at Array.forEach (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (metadata_resolver.ts:572)
at CompileMetadataResolver.getNgModuleSummary (metadata_resolver.ts:453)
at metadata_resolver.ts:551

安装技术适用于 cli 生成的项目。我点击 ng serve ，我可以看到应用程序。（发布前）

这种确切的方法与 react（使用生成的项目）非常有效。为什么我不能对 Angular 做同样的事情？我很确定 CLI 项目在构建过程中有一些我看不到的神奇之处。弹出不是一种选择，因为 Angular 6+ 尚未实现该功能。

我想这样做，以便我可以使用 npm 作为工具来处理版本控制和依赖关系。例如，如果我要导入两个 Angular 应用程序，一个在 ^6.0.0 上运行，另一个在 ^6.2.0 上运行，那么在最后一个包中，我最终将只有一个 ^6.2.0 实例。

非常感谢！

4

0 回答 0