CODEWITHSUNDEEP
angular
VeganHunter
VeganHunter

Reputation: 5974

How to use Angular app from another website

  1. I have my Angular application that is hosted at www.A.com,
  2. My customer has a web site that is hosted at www.B.com
  3. I need to let my customer to insert the Angular app on his webpage without copying application files to his website. I want my customer to just add some HTML code that references the files from my original www.A.com website.

So, at some page www.B.com/somepage.html customer would put something like that:

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

I tried this approach but encountered with a whole bunch of issues related to CORS and CORB.

Does anyone have a clear path on how a webpage can use Angular app from another domain?

EDIT NOTE 1: solution with iframe does not work for us because it negatively affects SEO (Google penalizes us for it), so we cannot use iframe with external link on our website.

EDIT NOTE 2: I have ownership of www.A.com (so I can adjust any configuration/HTTP headers required for my app to be used from external websites)

Upvotes: 4

Views: 1902

Answers (5)

Srikar Phani Kumar M
Srikar Phani Kumar M

Reputation: 1374

This is where the concept of micro-front-ends come into picture. This is the exact scenario.

Now this can be done in n number of ways. One of which is Angular Elements.

Angular provides you an option to make your application into a web-element, which can be included into another index.html file as a main.js file.

You can read more about it here:

How to make angular elements: https://angular.io/guide/elements

What is micro-front-end and how to use it: Method 1) Use a framework called SPA (single page application) you can read about it here: https://single-spa.js.org/docs/microfrontends-concept

Example:

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

Upvotes: 1

Amirhossein Mehrvarzi
Amirhossein Mehrvarzi

Reputation: 18954

You can't make a functional page or element by putting some lines of Angular client-side rendered codes on the fly. They are meaningful for the Angular app. In case of successful injection regarding default Angular configurations, the main script's hash changes every time you build the project.

Best way regarding iframe avoidance is creating a web component using angular so that you can later use that element anywhere by just importing a single file. In this way, this is recommended to reuse simple components, not a whole functional page for a perfect working and secure (prevent phishing) project. There's a good and brief sample Using Angular component in Non-Angular App. More professional considerations using web components listed inside Why I don't use web components which I agree with Rich Harris.

Upvotes: 1

Jorge Dieguez Perez
Jorge Dieguez Perez

Reputation: 186

Were you compiling the application with the --base-href flag pointing to the client application domain?

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

In this way, the application will be based on the client's domain, and maybe(i never try before) you can access www.B.com/[ruta that you define in angular routing as input to the app}

Upvotes: 1

Bartosh
Bartosh

Reputation: 420

By using Angular Elements you can package Angular component as Web Component, a web standard for defining new HTML elements in a framework-agnostic way.

https://angular.io/guide/elements

Upvotes: 1

Mahesh Perla
Mahesh Perla

Reputation: 61

We can Do it in multiple ways

  1. You can use subdomain, to point the other project,
  2. You can use the Iframe, to load it and style it.
  3. You can make your one Application as a Independent Module and make it as NPM Module and use it in another Application.

Upvotes: 6

Related Questions