feat: add Angular 5 support

hotforfeature · Aug 2, 2018 · da18ef3 · da18ef3
1 parent 5b00770
commit da18ef3
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -7,14 +7,22 @@ Angular + Polymer
 [![NPM Package](https://badge.fury.io/js/%40codebakery%2Forigami.svg)](https://www.npmjs.com/package/@codebakery/origami)
 [![Build Status](https://saucelabs.com/browser-matrix/codebakery-origami.svg)](https://saucelabs.com/open_sauce/user/codebakery-origami)
 
-## Why?
+## Summary
 
 [Angular and custom elements are BFFs](https://custom-elements-everywhere.com/). With Polymer, there are a few gaps that Origami fills. The library is divided into several modules that can be imported individually to address these gaps.
 
 - [Angular Form Support]('forms/README.md')
 - [ShadyCSS Polyfill]('shadycss/README.md')
 - [Polymer `<template>` Stamping]('templates/README.md')
 
+To setup Origami, follow these steps:
+
+1. [Install and import](#install) `OrigamiModule`]
+2. Install [webcomponent polyfills](#polyfills)
+   1. Add links to them in [`index.html`](#indexhtml)
+   2. Add assets to include them in [`angular.json`](#angularjson) or [`.angular-cli.json`](#angular-clijson)
+3. [Use it!](#usage)
+
 ## Install
 
 > Upgrading from Origami v2? Follow [this guide](UPGRADE.md).
@@ -83,14 +91,18 @@ Add a `<script>` importing `webcomponents-loader.js`. If your app compiles to ES
 
 ### `angular.json`
 
-Add an asset glob to the architect `"build"` and `"test"` sections. The glob will vary depending on if the project is set to compile to ES6 or ES5, since ES5 needs the `custom-elements-es5-adapter.js` file.
+> Skip this section and go to [`.angular-cli.json`](#angular-clijson) if you are using Angular 5.
+
+Add an asset glob to the architect `"build"` and `"test"` sections. The glob will vary depending on if the project is set to compile to ES6 or ES5, since ES5 needs the `custom-elements-es5-adapter.js` file. The `"input"` property of the asset must be relative to the project's `"root"`.
 
 #### ES6
 
 ```json
 {
   "projects": {
     "es6App": {
+      "root": "",
+      "sourceRoot": "src",
       "architect": {
         "build": {
           "options": {
@@ -100,7 +112,7 @@ Add an asset glob to the architect `"build"` and `"test"` sections. The glob wil
               {
                 "glob": "{*loader.js,bundles/*.js}",
                 "input": "node_modules/@webcomponents/webcomponentsjs",
-                "output": "/node_modules/@webcomponents/webcomponentsjs"
+                "output": "node_modules/@webcomponents/webcomponentsjs"
               }
             ]
           }
@@ -113,7 +125,7 @@ Add an asset glob to the architect `"build"` and `"test"` sections. The glob wil
               {
                 "glob": "{*loader.js,bundles/*.js}",
                 "input": "node_modules/@webcomponents/webcomponentsjs",
-                "output": "/node_modules/@webcomponents/webcomponentsjs"
+                "output": "node_modules/@webcomponents/webcomponentsjs"
               }
             ]
           }
@@ -130,6 +142,8 @@ Add an asset glob to the architect `"build"` and `"test"` sections. The glob wil
 {
   "projects": {
     "es5App": {
+      "root": "",
+      "sourceRoot": "src",
       "architect": {
         "build": {
           "assets": [
@@ -138,7 +152,7 @@ Add an asset glob to the architect `"build"` and `"test"` sections. The glob wil
             {
               "glob": "{*loader.js,*adapter.js,bundles/*.js}",
               "input": "node_modules/@webcomponents/webcomponentsjs",
-              "output": "/node_modules/@webcomponents/webcomponentsjs"
+              "output": "node_modules/@webcomponents/webcomponentsjs"
             }
           ]
         },
@@ -150,7 +164,7 @@ Add an asset glob to the architect `"build"` and `"test"` sections. The glob wil
               {
                 "glob": "{*loader.js,*adapter.js,bundles/*.js}",
                 "input": "node_modules/@webcomponents/webcomponentsjs",
-                "output": "/node_modules/@webcomponents/webcomponentsjs"
+                "output": "node_modules/@webcomponents/webcomponentsjs"
               }
             ]
           }
@@ -161,6 +175,56 @@ Add an asset glob to the architect `"build"` and `"test"` sections. The glob wil
 }
 ```
 
+### `.angular-cli.json` (Angular 5)
+
+> Skip this section and refer to [`angular.json`](#angularjson) if you are using Angular 6+.
+
+Add an asset glob to the app's `"assets"` array. The glob will vary depending on if the project is set to compile to ES6 or ES5, since ES5 needs the `custom-elements-es5-adapter.js` file. The `"input"` property of the asset must be relative to the project's `"root"`.
+
+#### ES6
+
+```json
+{
+  "apps": [
+    {
+      "name": "es6App",
+      "root": "src",
+      "assets": [
+        "assets",
+        /* other assets */
+        {
+          "glob": "{*loader.js,bundles/*.js}",
+          "input": "../node_modules/@webcomponents/webcomponentsjs",
+          "output": "node_modules/@webcomponents/webcomponentsjs"
+        }
+      ]
+    }
+  ]
+}
+```
+
+#### ES5
+
+```json
+{
+  "apps": [
+    {
+      "name": "es5App",
+      "root": "src",
+      "assets": [
+        "assets",
+        /* other assets */
+        {
+          "glob": "{*loader.js,*adapter.js,bundles/*.js}",
+          "input": "../node_modules/@webcomponents/webcomponentsjs",
+          "output": "node_modules/@webcomponents/webcomponentsjs"
+        }
+      ]
+    }
+  ]
+}
+```
+
 ## Usage
 
 ### [Angular Form Support]('forms/README.md')

diff --git a/UPGRADE.md b/UPGRADE.md
@@ -1,5 +1,6 @@
 # v3 Breaking Changes
 
+- Dropped Angular 4 support
 - `PolymerModule` has been renamed to `OrigamiModule` and no longer requires `.forRoot()`
 - `[ironControl]` directive has been renamed to `[origami]`
 - Control validation errors are reported as `{ "validate": true }` instead of `{ "polymer": true }`, and may be configured by setting `[validationErrorsKey]`
@@ -41,9 +42,19 @@ Additionally, remove the extra dependencies required for the `patch-cli.js` scri
 npm rm polymer-webpack-loader babel-core babel-loader babel-preset-es2015 script-loader
 ```
 
-## Update Angular to v6
+Finally, re-install @angular-devkit/build-angular (Angular 6) or @angular/cli (Angular 5) to remove the changes from `patch-cli.js`.
 
-Follow the guide at https://update.angular.io/ to update Angular. This will include moving from `.angular-cli.json` to `angular.json`.
+```sh
+rm -rf node_modules/@angular-devkit/build-angular
+# or
+rm -rf node_modules/@angular/cli
+
+npm install
+```
+
+## (Optional) Update Angular
+
+If you plan on updating Angular, do so at this time and follow the guide at https://update.angular.io/. This may include moving from `.angular-cli.json` to `angular.json`.
 
 ## Update Origami
 
@@ -88,28 +99,34 @@ rm -rf src/bower_components/
 
 If you have any `.html` Polymer elements in the `src/elements/` folder, convert them to `.js` or `.ts` files at this time. [polymer-modulizer](https://github.com/Polymer/polymer-modulizer) may assist in the conversion.
 
-## Update `angular.json` Polyfill Assets
+## Update `angular.json` or `.angular-cli.json` Polyfill Assets
+
+Remember that the `"input"` is relative to the `"root"` key of the project. If your root is not the same directory that `node_modules/` are installed to, you may need to go up a directory.
 
 ### ES6 (es2015) Target Apps
 
+`angular.json` (Angular 6+)
+
 ```diff
 {
   "projects": {
     "es6App": {
+      "root": "",
+      "sourceRoot": "src",
       "architect": {
         "build": {
           "options": {
             "assets": [
 -              { "glob": "web*.js", "input": "src/bower_components/webcomponentsjs/", "output": "/bower_components/webcomponentsjs/" }
-+                { "glob": "{*loader.js,bundles/*.js}", "input": "node_modules/@webcomponents/webcomponentsjs", "output": "/node_modules/@webcomponents/webcomponentsjs" }
++              { "glob": "{*loader.js,bundles/*.js}", "input": "node_modules/@webcomponents/webcomponentsjs", "output": "node_modules/@webcomponents/webcomponentsjs" }
             ]
           }
         },
         "test": {
           "options": {
             "assets": [
 -              { "glob": "web*.js", "input": "src/bower_components/webcomponentsjs/", "output": "/bower_components/webcomponentsjs/" }
-+                { "glob": "{*loader.js,bundles/*.js}", "input": "node_modules/@webcomponents/webcomponentsjs", "output": "/node_modules/@webcomponents/webcomponentsjs" }
++              { "glob": "{*loader.js,bundles/*.js}", "input": "node_modules/@webcomponents/webcomponentsjs", "output": "node_modules/@webcomponents/webcomponentsjs" }
             ]
           }
         }
@@ -119,19 +136,40 @@ If you have any `.html` Polymer elements in the `src/elements/` folder, convert
 }
 ```
 
+`.angular-cli.json` (Angular 5)
+
+```diff
+{
+  "apps": [
+    {
+      "name": "es6App",
+      "root": "src",
+      "assets": [
+-        "bower_components/webcomponentsjs/web*.js"
++        { "glob": "{*loader.js,bundles/*.js}", "input": "../node_modules/@webcomponents/webcomponentsjs", "output": "node_modules/@webcomponents/webcomponentsjs" }
+      ]
+    }
+  ]
+}
+```
+
 ### ES5 Target Apps
 
+`angular.json` (Angular 6+)
+
 ```diff
 {
   "projects": {
     "es5App": {
+      "root": "",
+      "sourceRoot": "src",
       "architect": {
         "build": {
           "options": {
             "assets": [
 -              { "glob": "*adapter.js", "input": "src/bower_components/webcomponentsjs/", "output": "/bower_components/webcomponentsjs/" }
 -              { "glob": "web*.js", "input": "src/bower_components/webcomponentsjs/", "output": "/bower_components/webcomponentsjs/" }
-+                { "glob": "{*loader.js,*adapter.js,bundles/*.js}", "input": "node_modules/@webcomponents/webcomponentsjs", "output": "/node_modules/@webcomponents/webcomponentsjs" }
++              { "glob": "{*loader.js,*adapter.js,bundles/*.js}", "input": "node_modules/@webcomponents/webcomponentsjs", "output": "node_modules/@webcomponents/webcomponentsjs" }
             ]
           }
         },
@@ -140,7 +178,7 @@ If you have any `.html` Polymer elements in the `src/elements/` folder, convert
             "assets": [
 -              { "glob": "*adapter.js", "input": "src/bower_components/webcomponentsjs/", "output": "/bower_components/webcomponentsjs/" }
 -              { "glob": "web*.js", "input": "src/bower_components/webcomponentsjs/", "output": "/bower_components/webcomponentsjs/" }
-+                { "glob": "{*loader.js,*adapter.js,bundles/*.js}", "input": "node_modules/@webcomponents/webcomponentsjs", "output": "/node_modules/@webcomponents/webcomponentsjs" }
++              { "glob": "{*loader.js,*adapter.js,bundles/*.js}", "input": "node_modules/@webcomponents/webcomponentsjs", "output": "node_modules/@webcomponents/webcomponentsjs" }
             ]
           }
         }
@@ -150,6 +188,24 @@ If you have any `.html` Polymer elements in the `src/elements/` folder, convert
 }
 ```
 
+`.angular-cli.json` (Angular 5)
+
+```diff
+{
+  "apps": [
+    {
+      "name": "es5App",
+      "root": "src",
+      "assets": [
+-        "bower_components/webcomponentsjs/custom-elements-es5-adapter.js",
+-        "bower_components/webcomponentsjs/web*.js"
++        { "glob": "{*loader.js,*adapter.js,bundles/*.js}", "input": "../node_modules/@webcomponents/webcomponentsjs", "output": "node_modules/@webcomponents/webcomponentsjs" }
+      ]
+    }
+  ]
+}
+```
+
 ## Update `index.html` Polyfill Paths
 
 ```diff

diff --git a/forms/src/value-accessor.ts b/forms/src/value-accessor.ts
@@ -21,7 +21,6 @@ import {
   AbstractControl
 } from '@angular/forms';
 import { shimCustomElements } from '@codebakery/origami/util';
-import { Subscription } from 'rxjs';
 
 // Ensure imported elements can define themselves before polyfills
 shimCustomElements();
@@ -138,7 +137,7 @@ export class OrigamiControlValueAccessor extends DefaultValueAccessor
   /**
    * Subscription to the NgControl's statusChanges.
    */
-  protected statusSub?: Subscription;
+  protected statusSub?: { unsubscribe(): void };
   /**
    * Most custom elements property will emit a `property-changed` event when
    * their value is set. This flag informs the value accessor to ignore the

diff --git a/package.json b/package.json
@@ -42,8 +42,8 @@
     }
   },
   "peerDependencies": {
-    "@angular/core": "^6.0.0-rc.0 || ^6.0.0",
-    "@angular/forms": "^6.0.0-rc.0 || ^6.0.0",
+    "@angular/core": "^5.0.0-rc.0 || ^5.0.0 || ^6.0.0-rc.0 || ^6.0.0",
+    "@angular/forms": "^5.0.0-rc.0 || ^5.0.0 || ^6.0.0-rc.0 || ^6.0.0",
     "@polymer/polymer": "^3.0.5",
     "tslib": "^1.7.0"
   },