javascript - 在另一个 javascript 项目中导入 2 个 Angular 项目

Question

我有 2 个独立的 Angular 项目。对于它们中的每一个，我运行以下 CLI 命令：

ng build --prod --output-hashing=none

它为每个项目创建以下文件：

runtime.js polyfills.js main.js

现在我想将项目导入另一个项目，这是一个简单的 javascript 项目（不是 Angular 项目）。

我知道顺序很重要，runtime.js而且polyfills.js出现两次。所以我确保这些文件是相同的（因为我在两个项目中使用相同的 Angular 版本）。

简单 javascript 项目中的导入如下所示：

<script src="runtime.js"></script>
<script src="polyfills.js"></script>
<script src="main1.js"></script>
<script src="main2.js"></script>

不幸的是，似乎只有一个项目以这种方式工作（并且没有例外）。如果我只导入main1.js或只有main2.js它们会正常工作。

我想问题是我在每个项目中使用的依赖库，它们可能会相互覆盖，但我不知道我能做些什么。

更新：

不确定它是否相关，但在每个 Angular 项目中，我使用@angular/elements它来发布我需要的组件。像这样的东西：

export class AppModule {
  constructor(private injector: Injector) {
    const elem = createCustomElement(MyFirstComponent, { injector });
    customElements.define('my-first-element', elem);
  }
  ngDoBootstrap() {}
}

然后在javascript项目中，我这样使用它：

var elem1 = document.createElement('my-first-element');
container.append(elem1);
var elem2 = document.createElement('my-second-element');
container.append(elem2);

标签： javascriptangularangular-cliangular-elements

Answer 1

检查<app-root></app-root>index.html 中的标记。您的 AppComponent 可能需要 2 个不同的选择器：

// app.component.ts for the first project
selector: 'app-root-one',


// app.component.ts for the second project
selector: 'app-root-two',