如何使用其他网站的 Angular 应用程序答案

【问题标题】：How to use Angular app from another website如何使用其他网站的 Angular 应用程序
【发布时间】：2021-03-03 05:19:56
【问题描述】：

我的 Angular 应用程序托管在 www.A.com，
我的客户有一个托管在www.B.com 的网站
我需要让我的客户在他的网页上插入 Angular 应用程序而不将应用程序文件复制到他的网站。我希望我的客户只需添加一些 HTML 代码，这些代码引用了我原来的 www.A.com 网站中的文件。

所以，在某些页面www.B.com/somepage.html 客户会这样写：

<base href="https://www.A.com" />
<app-root></app-root>
<script src="runtime.469fa17746b90e8a757c.js" defer></script>
<script src="polyfills.35a5ca1855eb057f016a.js" defer></script>
<script src="scripts.3cf90f8fc92130239739.js" defer></script>
<script src="main.f229882672708596d13b.js" defer></script>

我尝试了这种方法，但遇到了一大堆与 CORS 和 CORB 相关的问题。

是否有人对网页如何使用来自另一个域的 Angular 应用程序有明确的路径？

编辑注释 1： iframe 的解决方案对我们不起作用，因为它会对 SEO 产生负面影响（Google 会因此而惩罚我们），因此我们不能在我们的网站上使用带有外部链接的 iframe。

编辑注释 2： 我拥有www.A.com 的所有权（因此我可以调整我的应用所需的任何配置/HTTP 标头以便从外部网站使用）

【问题讨论】：

您的要求似乎不可行，Angular 的特性可以防止来自外界的注入
@Romesh - 据我所知，Angular 中没有这样的特定功能。您能否为您的索赔添加证明（文档网址）？谢谢。
您可以尝试将其他页面用作 iframe
@Lord Midi，你为什么删除你的答案？你的想法最接近解决方案

标签： angular

【解决方案1】：

我们可以通过多种方式做到这一点

您可以使用子域，指向其他项目，
您可以使用 Iframe 来加载它并设置它的样式。
您可以将您的一个应用程序作为独立模块并将其作为 NPM 模块并在另一个应用程序中使用。

【讨论】：

感谢@Mahesh 的努力，但让我评论您的观点：1）我不控制客户的域（子域）。我需要将我的应用程序保留在我的独立域中。 2) 由于谷歌的 SEO 惩罚，iframe 不是公共网站的好解决方案。 3) 模块在构建阶段会被处理到主应用程序中，然后复制到客户的网站，因此无法从原始位置重用。

【解决方案2】：

通过使用 Angular Elements，您可以将 Angular 组件打包为 Web 组件，这是一种以与框架无关的方式定义新 HTML 元素的 Web 标准。

https://angular.io/guide/elements

【讨论】：

【解决方案3】：

您是否使用指向客户端应用程序域的 --base-href 标志编译应用程序？

ng build --prod --base-href www.B.com

这样，应用程序将基于客户端的域，也许（我以前从未尝试过）您可以访问您在角度路由中定义为应用程序输入的www.B.com/[ruta}

【讨论】：

【解决方案4】：

您不能通过即时放置几行 Angular 客户端渲染代码来制作功能性页面或元素。它们对 Angular 应用程序很有意义。如果成功注入默认 Angular 配置，则每次构建项目时主脚本的哈希都会更改。

避免iframe 的最佳方法是创建web component using angular，以便您以后只需导入单个文件即可在任何地方使用该元素。这样，建议重用简单组件，而不是整个功能页面，以实现完美工作和安全（防止phishing）项目。有一个很好的简短示例Using Angular component in Non-Angular App。使用Why I don't use web components 中列出的 Web 组件进行更专业的考虑，我同意 Rich Harris 的观点。

【讨论】：

【解决方案5】：

这就是微前端概念出现的地方。这是确切的场景。

现在这可以通过 n 种方式完成。其中之一是 Angular Elements。

Angular 为您提供了一个选项，可以将您的应用程序变成一个 web 元素，它可以作为 main.js 文件包含在另一个 index.html 文件中。

您可以在此处阅读更多信息：

如何制作角度元素：https://angular.io/guide/elements

什么是微前端以及如何使用它：方法一）使用一个叫SPA（单页应用）的框架你可以在这里阅读：https://single-spa.js.org/docs/microfrontends-concept

例子：

import { Component, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { PopupService } from './popup.service';
import { PopupComponent } from './popup.component';

@Component({
  selector: 'app-root',
  template: `
    <input #input value="Message">
    <button (click)="popup.showAsComponent(input.value)">Show as component</button>
    <button (click)="popup.showAsElement(input.value)">Show as element</button>
  `,
})
export class AppComponent {


/************* 
This particular constructor will make your component into an angular element there-by allowing you to use this as a main.js file once you compile it and put it in a SPA page or however you want to use it
**************/

  constructor(injector: Injector, public popup: PopupService) {
    // Convert `PopupComponent` to a custom element.
    const PopupElement = createCustomElement(PopupComponent, {injector});
    // Register the custom element with the browser.
    customElements.define('popup-element', PopupElement);
  }
}

【讨论】：