Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use Angular app from another website

Tags:

angular

  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)

like image 664
VeganHunter Avatar asked Oct 24 '25 01:10

VeganHunter


2 Answers

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.
like image 176
Mahesh Perla Avatar answered Oct 25 '25 17:10

Mahesh Perla


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

like image 21
Bartosh Avatar answered Oct 25 '25 17:10

Bartosh