Programozás Angular Element

Angular beszúrása egy sima HTML oldalba?

Igen, lehetséges.
Figyelem: a példa csak a legújabb Angular verzióval működik!
Én már sokat gondolkodtam rajta, hogyan lehetne a weblapomnak csak egy bizonyos része Angular? A megoldást most neked is megmutatom.

Videós magyarázat


Forráskód a Github -on:

Github repo

Szöveges segítség

Nem nagy ügy, három lépés az egész:

Először tedd fel a szükséges csomagokat:

  • npm i -g concat-glob-cli ez kell a fájlok kombinálásához
  • npm i @angular/elements vagy ng add @angular/elements a második az app.module.ts -ben is belövi a függőségeket.

Ezután a szükséges parancs a package.json -ba:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --output-hashing=none",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "package": "ng build --prod --output-hashing=none && concat-glob-cli -f dist/angular-element-app/*-es2015.js -o web/app.js"
},

Végül jön az AppModule meghekkelése:

export class AppModule implements DoBootstrap {

  constructor(
    private injector: Injector,
  ) {
    const mainComponent = createCustomElement(AppComponent, { injector });
    customElements.define('cj-ang-app', mainComponent);
  }

  ngDoBootstrap() {}
}

Próba

Ha így elkészült az alkalmazásod és futtatod az npm run package parancsot, akkor már csak egy projekt kell, ahol a HTML fájlba beszúrod az elemed nevét, majd elhelyezed az elkészített .js fájlt.

That's it!