How to use Angular app from another website

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.

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

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}

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.

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