Skip to content

HelixUI with Angular

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

Installing

Prerequisites

  1. Latest stable NodeJS (for the npm and npx command-line utilities)

Assumptions

(all paths are relative to the root of the project directory)

  1. Your app was bootstrapped via @angluar/cli
  2. Vendor assets live in src/assets/vendor/ (coded by 3rd party)

Instructions

1. Install NPM Assets

npm install helix-ui
npm install --save-dev vendor-copy
  • vendor-copy allows you to automatically copy bundled assets to your project after npm install.

2. Configure package.json

2.1 - Modify package.json

Include the following configurations:

{
  "scripts": {
    "postinstall": "vendor-copy"
  },
  "devVendorCopy": [
    {
      "from": "node_modules/helix-ui/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js",
      "to": "src/assets/vendor/webcomponents-loader.js"
    },
    {
      "from": "node_modules/helix-ui/node_modules/@webcomponents/webcomponentsjs/bundles",
      "to": "src/assets/vendor/bundles"
    },
    {
      "from": "node_modules/helix-ui/dist/css/helix-ui.min.css",
      "to": "src/assets/vendor/helix-ui.min.css"
    }
  ]
}
2.2 - Copy Vendor Assets

Run the following to copy files configured via the vendorCopy configuration, above.

npx vendor-copy

NOTE: You may also want to verify that your postinstall script is working as expected, by running npm install.

3. Consuming Assets in your App

3.1 - Modify public/index.html

Add the following to the bottom of the <head> element:

<!-- Required for HelixUI to function in older browsers -->
<script src="assets/vendor/webcomponents-loader.js"></script>
3.2 - Modify src/main.js

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