https://github.com/ziv/embed
Angular component for embedding angular app
https://github.com/ziv/embed
Last synced: 9 months ago
JSON representation
Angular component for embedding angular app
- Host: GitHub
- URL: https://github.com/ziv/embed
- Owner: ziv
- Created: 2020-09-15T11:37:07.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-22T08:17:16.000Z (over 5 years ago)
- Last Synced: 2025-06-30T10:04:29.288Z (11 months ago)
- Language: TypeScript
- Size: 493 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @xpr/embed - Angular Embed
An easy way to embed Angular application in another Angular application.
## Install
```
npm install @xpr/embed
```
## Embedded Application
Preparing embedded Angular app steps:
* Make sure your root components selector (usually `AppComponent`) is not `app-root` (to avoid collision with hosting app).
* Add `@angular/elements` to your app
```
ng add @angular/elements
```
* Add `ngx-build-plus` builder and generate web-components polyfills
```
ng add ngx-build-plus
ng g ngx-build-plus:wc-polyfill
```
* Change your `AppModule` to define a custom element from your root component
```typescript
import {createCustomElement} from '@angular/elements';
...
export class AppModule implements DoBootstrap {
constructor(private injector: Injector) {
}
ngDoBootstrap(appRef: ApplicationRef): void {
const el = createCustomElement(AppComponent, {injector: this.injector});
customElements.define('my-app', el);
}
}
```
* Build yor app using
```
ng build --prod --output-hashing=none --single-bundle
```
## Host Application
* Copy embedded generated files `main.js`, `polyfill-webcomp.js` and `styles.css` into your `src/assets` directory of your host app.
* Install `@xpr/embed`
```
npm i @xpr/embed
```
* Import `XprEmbed` module to your `AppModule`
* Add `xpr-embed` tag to your template:
```html
```
## Embedding App Solution Explained
This project started as research at my workplace. How to start using last Angular without updating our core legacy application (Angular 5).
While searching for solutions using @angular/elements (converting Angular app into Web Component) - I realized that using `shadow DOM` may provide the required solution for this problem.
`ngembed` is the results of this research.
=Z=