如何在另一个角度应用程序中加载角度应用程序

Question

我有两个角度应用程序 A 和 B。现在在 B 应用程序的 One 选项卡中我想加载整个应用程序 A。我该如何实现这一目标？

请让我知道如何实现此功能。Angular 是否有任何我可以使用的特殊标签

Answer 1

解决您的问题的一种方法可能是创建您自己要求的标签。我通过如上所述的名为 Web 组件或Angular 元素的技术在 Angular 应用程序 B 中实现了 Angular 应用程序 A ，请参见https://www.techiediaries.com/angular/angular-9-elements-web-components/

在以下步骤中，在应用程序 A 中定义了一个标签shiny-app-a，稍后通过将 A 的 JavaScript 文件导入到 B 并通过标签引用它们来在应用程序 B 中使用该标签。

它在以下环境中工作：

• 角度 CLI：11.0.2
• 节点：12.16.1
• 操作系统：win32 x64

使其运行的步骤是：

1. 创建应用程序A

该应用程序还需要包@angular/elements。

1.1. 创建应用程序A的骨架

$ ng new App-A
$ cd  App-A
$ ng add @angular/elements

1.2. 将更改应用到 app.modules.ts 以创建 Web 组件/元素并定义相应的标签shiny-app-a

我的app.modules.ts看起来像这样：

import { BrowserModule } from '@angular/platform-browser';
// import Injector
import { Injector, NgModule } from '@angular/core';
// import createCustomElement
import { createCustomElement } from '@angular/elements';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
  AppComponent
  ],
  imports: [
  BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

  constructor(private injector: Injector){}

  ngDoBootstrap(){
    const el = createCustomElement(AppComponent, {injector:this.injector});
    // Here you define your new tag shiny-app-a
    customElements.define('shiny-app-a', el);
  }
 }

1.3. 构建项目

$ ng build --prod --output-hashing none

这会生成以下文件：

• 运行时.js
• main.js
• polyfills.js

您将在文件夹 [...]\App-A\dist\App-A 中找到它们

1.4. 测试一下

跑步

$ ng serve

并在浏览器中看到您新建的应用程序 A。

2. 创建应用程序B

注意：这里不需要@angular/elements。

2.1. 创建应用程序B的骨架

$ ng new App-B

2.2. 将文件从应用程序 A 复制到应用程序 B 可访问的文件夹

在此示例中，我使用文件夹 [...]/src/assets。

$ cd App-B/src/assets/

并将 JavaScript 从应用程序 A 复制到此文件夹，即：

• [...]/App-A/dist/App-A/main.js
• [...]/App-A/dist/App-A/polyfills.js
• [...]/App-A/dist/App-A/runtime.js

2.3. 调整应用程序 B 的源以使用步骤 1 中定义的标签。

2.3.1 让app.module.ts中的应用程序B知道自定义元素

要实现的关键项目是CUSTOM_ELEMENTS_SCHEMA。我的应用程序 B 的app.modules.ts如下所示：

import { BrowserModule } from '@angular/platform-browser';
// import CUSTOM_ELEMENTS_SCHEMA
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  // add schemas
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2.3.2 在 app.component.ts 中从外部源加载 JavaScript

JavaScript 文件也可以从任何源加载。在这种情况下，文件由 OnInit() 从 [...]/assets 文件夹加载。因此我的应用程序 B 的app.component.ts如下所示：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'App-B';

  ngOnInit() {
    this.loadScript('/assets/runtime.js');
    this.loadScript('/assets/main.js');
    this.loadScript('/assets/polyfills.js');
  }

  public loadScript(url: string) {
    const body = <HTMLDivElement> document.body;
    const script = document.createElement('script');
    script.innerHTML = '';
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
  }
}

2.3.3 在app.component.html中使用标签

替换文件app.component.html中的任何内容，只需：

<shiny-app-a></shiny-app-a>

2.4. 测试一下

跑步

$ ng serve

并在浏览器应用程序 A 中查看应用程序 B。

Answer 2

您想要类似 MICRO 前端的东西，将应用程序 A 构建为 Angular 自定义元素（Web 组件 - Angular Elements），输出将是一个脚本。在应用程序 B 中加载此脚本。将您在微应用程序 B 中创建自定义元素时提供的选择器放置在您想要加载应用程序 A 的位置。

有关微前端（角度元素）的更多信息，请阅读

请不要使用 iframe，它们会变得非常难以管理，要了解更多信息，请阅读一些有关 Angular 微前端的内容，有很多写得很好的博客。