Skip to content

HelixUI with Angular

Ryan Johnson edited this page Jan 31, 2020 · 7 revisions

(IN PROGRESS...)

Installing

TBD...

Vendor-Copy

TBD...

Compatibility

@angular/cli

If you want use @angular/cli to bootstrap your application, you'll need to make sure to do the following to ensure maximum compatibility with HelixUI.

  1. copy node_modules/helix-ui/ assets to src/assets/helix-ui/
  2. copy node_modules/@webcomponents/webcomponentsjs/ assets to src/assets/webcomponentsjs/
  3. update src/index.html contents with official Helix layout markup
  4. make sure <link> and <scripts> in src/index.html point to files in src/assets/helix-ui and src/assets/webcomponentsjs
  5. add CUSTOM_ELEMENTS_SCHEMA to the list of schemas in src/app/app.module.ts (see snippet below)
  • Configures angular that to allow 3rd-party custom elements.
/* 
 * src/app/app.module.ts 
 */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

Other Notes

TBD...

Clone this wiki locally