Question

我有两个有角度的应用程序，分别是A和B。现在在B应用程序的“一个”选项卡中，我要加载整个应用程序A 。我该如何实现？

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

Answer 1

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

有关更多信息，请参阅微型前端（Angular Elements）

请不要使用iframe，因为它们很难管理，要了解更多有关Angular的Micro Front End的知识，可以在同一篇文章中找到很多写得很好的博客。

Answer 2

正如Akshay所提到的，您可以使用Angular Elements将应用程序A公开为自定义元素，并在应用程序B中使用它。

以您为例，您希望将AppComponent公开为自定义元素。

Answer 3

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

在以下步骤中，在应用程序A中定义了标记 shiny-app-a ，稍后将该应用程序B通过将A的JavaScript文件导入B并通过该标记对其进行引用而在应用程序B中使用。

它在以下环境中工作：

Angular 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

这会生成其他文件：

runtime.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。

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

3 个答案: