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

我有两个角度应用程序，比如A和B。现在在B应用程序的一个选项卡中，我想加载整个应用程序A。我如何做到这一点

---

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

如果您想要微型前端之类的东西，请将应用程序构建为angular自定义元素（web组件-angular元素），输出将是脚本。在应用程序B中加载此脚本。将您在Micro App B中创建自定义元素时提供的选择器放置在希望加载应用程序a的位置

有关Micro前端的更多信息，请阅读（）

---

请不要使用iframe，因为它们变得很难管理，要了解更多，请阅读一些有关Angular的微前端的内容。在同一个平台上有很多写得很好的博客。

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

---

在您的情况下，您希望将AppComponent作为自定义元素公开。

解决问题的一个方法可能是创建您自己要求的标记。我通过一种名为web组件的技术或如上所述，在Angular application B中实现了Angular application A，请参见

在以下步骤中，在应用程序a中定义了一个标记shinny-app-a，该标记稍后将在应用程序B中使用，方法是将a的JavaScript文件导入B并通过标记引用它们

它在以下环境中工作：

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

使其运行的步骤包括：

1.创建应用程序 此应用程序还需要包@angular/elements

1.1. 创建应用程序的框架 1.2. 将更改应用于app.modules.ts以创建web组件/元素，并定义相应的标记shinny-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);
  }
 }

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 { }

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);
  }
}

1.3. 建设项目 这将生成以下文件：

• runtime.js
• main.js
• polyfills.js

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

1.4. 测试一下 跑

并在浏览器中查看新构建的应用程序A

2.创建应用程序B 注意：此处不需要角度/元素

2.1. 创建应用程序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使应用程序B在app.module.ts中了解自定义元素 要实现的关键项目是自定义元素\u模式。应用程序B的Myapp.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);
  }
 }

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 { }

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.2从app.component.ts中的外部源加载JavaScript JavaScript文件也可以从任何源加载。在这种情况下，文件由OnInit（）从[…]/assets文件夹加载。因此，我的应用程序B的app.component.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);
  }
 }

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 { }

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);
  }
}

---

请参见浏览器应用程序B中的应用程序A。

在本例中，您仅加载一个组件。。我想把整个应用程序加载到另一个appAngular元素中，它不仅仅是一个组件，它是一个完整的应用程序，包装成一个组件。这对我来说部分有效。我很好地显示了第二个angular应用程序的组件，但它是全屏的，所以我不显示基本应用程序。我怎样才能修好它？