feat(stark-demo): adapt polyfills (app and tests) according to the ne…

…w structure in core-js 3.0.0
NationalBankBelgium · Apr 24, 2019 · 3734809 · 3734809
1 parent 48b1d99
commit 3734809
Show file tree

Hide file tree

Showing 15 changed files with 111 additions and 38 deletions.
diff --git a/docs/POLYFILLS.md b/docs/POLYFILLS.md
@@ -39,8 +39,11 @@ The following polyfills are suitable for most of the cases, especially when targ
  * IE11 requires all of the following polyfills.
  *
  * Polyfill: https://github.com/zloirock/core-js
+ * Add the specific lines below corresponding to the version of core-js you want to use: 2.x or 3.x
  */
 /* tslint:disable:no-import-side-effect */
+
+/******************** core-js 2.x ********************/
 import "core-js/es6";
 import "core-js/es7/reflect";
 import "core-js/es7/string";
@@ -51,6 +54,21 @@ import "core-js/stage/4";
  * More info: https://github.com/angular/angular/issues/27887
  */
 import "core-js/modules/web.dom.iterable";
+/*****************************************************/
+
+/******************** core-js 3.x ********************
+ * Make sure you add the 'paths' workaround to the tsconfig.json to support core-js 3.x with Angular CLI 7.x
+ * See: https://github.com/angular/angular-cli/issues/13954#issuecomment-475452588
+ */
+import "core-js/es";
+import "core-js/proposals/reflect-metadata";
+/**
+ * IE11 does not support iteration on certain DOM collections (NodeList).
+ * This polyfill is specifically needed for the animation on mat-menu used in stark-table.
+ * More info: https://github.com/angular/angular/issues/27887
+ */
+import "core-js/modules/web.dom-collections.iterator";
+/*****************************************************/
 
 /**
  * IE11 and Edge require this to support Server-sent events

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "codelyzer": "^4.5.0",
     "commitizen": "^3.0.5",
     "conventional-changelog-cli": "^2.0.11",
+    "core-js": "^3.0.0",
     "cz-customizable": "^6.0.0",
     "hammerjs": "^2.0.8",
     "husky": "^1.3.1",

diff --git a/packages/stark-core/base.spec.ts b/packages/stark-core/base.spec.ts
@@ -1,8 +1,7 @@
 "use strict";
 
-import "core-js/es6";
-import "core-js/es7/reflect";
-import "core-js/stage/4";
+import "core-js/es";
+import "core-js/proposals/reflect-metadata";
 
 /* tslint:disable:no-import-side-effect */
 // FIXME: change when https://github.com/monounity/karma-typescript/issues/320 is resolved

diff --git a/packages/stark-core/tsconfig-build.json b/packages/stark-core/tsconfig-build.json
@@ -11,7 +11,9 @@
       "@angular/router": ["../../node_modules/@angular/router"],
       "rxjs/*": ["../../node_modules/rxjs/*"],
       "environments/environment": ["./src/common/environment"],
-      "@nationalbankbelgium/stark-core": ["."]
+      "@nationalbankbelgium/stark-core": ["."],
+      "core-js/*" : ["../../node_modules/core-js/*"],
+      "zone.js/*": ["../../node_modules/zone.js/*"]
     },
     "outDir": "../../dist/packages/stark-core"
   },

diff --git a/packages/stark-ui/base.spec.ts b/packages/stark-ui/base.spec.ts
@@ -1,9 +1,7 @@
 "use strict";
 
-import "core-js/es6";
-import "core-js/es7/reflect";
-import "core-js/es7/string";
-import "core-js/stage/4";
+import "core-js/es";
+import "core-js/proposals/reflect-metadata";
 
 // IE polyfills
 

diff --git a/packages/stark-ui/tsconfig-build.json b/packages/stark-ui/tsconfig-build.json
@@ -29,7 +29,9 @@
       "rxjs/*": ["../../node_modules/rxjs/*"],
       "environments/environment": ["../../dist/packages/stark-core/src/common/environment"],
       "@nationalbankbelgium/stark-core": ["../../dist/packages/stark-core"],
-      "@nationalbankbelgium/stark-ui": ["."]
+      "@nationalbankbelgium/stark-ui": ["."],
+      "core-js/*" : ["../../node_modules/core-js/*"],
+      "zone.js/*": ["../../node_modules/zone.js/*"]
     },
     "outDir": "../../dist/packages/stark-ui"
   },

diff --git a/showcase/base.spec.ts b/showcase/base.spec.ts
@@ -1,9 +1,7 @@
 "use strict";
 
-import "core-js/es6";
-import "core-js/es7/reflect";
-import "core-js/es7/string";
-import "core-js/stage/4";
+import "core-js/es";
+import "core-js/proposals/reflect-metadata";
 
 // IE polyfills
 

diff --git a/showcase/package-lock.json b/showcase/package-lock.json
diff --git a/showcase/src/app/welcome/pages/getting-started/starter-structure.ts b/showcase/src/app/welcome/pages/getting-started/starter-structure.ts
@@ -183,6 +183,7 @@ export const starkStylesCss = `
 @import "~@nationalbankbelgium/stark-ui/src/modules/session-ui/pages/login/login-page.component";
 @import "~@nationalbankbelgium/stark-ui/src/modules/session-ui/pages/preloading/preloading-page.component";
 `;
+
 export const polyfillsBrowsersContent = `
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
@@ -199,28 +200,56 @@ export const polyfillsBrowsersContent = `
  *
  * Learn more in https://angular.io/guide/browser-support
  */
+
 /***************************************************************************************************
  * BROWSER POLYFILLS
  *
  * See: https://angular.io/guide/browser-support#optional-browser-features-to-polyfill
  */
+
 /**
  * IE11 requires all of the following polyfills.
  *
  * Polyfill: https://github.com/zloirock/core-js
+ * Add the specific lines below corresponding to the version of core-js you want to use: 2.x or 3.x
  */
 /* tslint:disable:no-import-side-effect */
+
+/******************** core-js 2.x ********************/
 import "core-js/es6";
 import "core-js/es7/reflect";
 import "core-js/es7/string";
 import "core-js/stage/4";
+/**
+ * IE11 does not support iteration on certain DOM collections (NodeList).
+ * This polyfill is specifically needed for the animation on mat-menu used in stark-table.
+ * More info: https://github.com/angular/angular/issues/27887
+ */
+import "core-js/modules/web.dom.iterable";
+/*****************************************************/
+
+/******************** core-js 3.x ********************
+ * Make sure you add the 'paths' workaround to the tsconfig.json to support core-js 3.x with Angular CLI 7.x
+ * See: https://github.com/angular/angular-cli/issues/13954#issuecomment-475452588
+ */
+import "core-js/es";
+import "core-js/proposals/reflect-metadata";
+/**
+ * IE11 does not support iteration on certain DOM collections (NodeList).
+ * This polyfill is specifically needed for the animation on mat-menu used in stark-table.
+ * More info: https://github.com/angular/angular/issues/27887
+ */
+import "core-js/modules/web.dom-collections.iterator";
+/*****************************************************/
+
 /**
  * IE11 and Edge require this to support Server-sent events
  * https://caniuse.com/#feat=eventsource
  *
  * Polyfill: https://github.com/Yaffle/EventSource
  */
 import "event-source-polyfill";
+
 /**
  * IE11 requires Element.classList for NgClass support on SVG elements
  * See: https://caniuse.com/#feat=classlist
@@ -230,6 +259,7 @@ import "event-source-polyfill";
  * Polyfill: https://github.com/eligrey/classList.js
  */
 import "eligrey-classlist-js-polyfill";
+
 /**
  * Web Animations polyfill is no longer needed for standard animation support as of Angular 6
  * IMPORTANT: It is only needed in case you use the AnimationBuilder from '@angular/animations' in the application
@@ -239,6 +269,7 @@ import "eligrey-classlist-js-polyfill";
  * Polyfill: https://github.com/web-animations/web-animations-js
  */
 // import "web-animations-js";
+
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */

diff --git a/showcase/src/polyfills.browser.ts b/showcase/src/polyfills.browser.ts
@@ -26,16 +26,16 @@
  * Polyfill: https://github.com/zloirock/core-js
  */
 /* tslint:disable:no-import-side-effect */
-import "core-js/es6";
-import "core-js/es7/reflect";
-import "core-js/es7/string";
-import "core-js/stage/4";
+// FIXME: remove the workaround added to the tsconfig.json to support core-js 3.0.0 with Angular CLI 7.x (https://github.com/angular/angular-cli/issues/13954#issuecomment-475452588)
+// it will be fixed most likely in Angular 8
+import "core-js/es";
+import "core-js/proposals/reflect-metadata";
 /**
  * IE11 does not support iteration on certain DOM collections (NodeList).
  * This polyfill is specifically needed for the animation on mat-menu used in stark-table.
  * More info: https://github.com/angular/angular/issues/27887
  */
-import "core-js/modules/web.dom.iterable";
+import "core-js/modules/web.dom-collections.iterator";
 
 /**
  * IE11 and Edge require this to support Server-sent events

diff --git a/showcase/tsconfig.json b/showcase/tsconfig.json
@@ -12,7 +12,9 @@
     ],
     "paths": {
       "@angular/*": ["../node_modules/@angular/*"],
-      "@nationalbankbelgium/*": ["../node_modules/@nationalbankbelgium/*"]
+      "@nationalbankbelgium/*": ["../node_modules/@nationalbankbelgium/*"],
+      "core-js/es7/reflect": ["../node_modules/core-js/proposals/reflect-metadata"],
+      "core-js/es6/*": ["../node_modules/core-js/es/*"]
     }
   },
   "exclude": ["node_modules", "dist", "src/assets"]

diff --git a/starter/base.spec.ts b/starter/base.spec.ts
@@ -1,9 +1,7 @@
 "use strict";
 
-import "core-js/es6";
-import "core-js/es7/reflect";
-import "core-js/es7/string";
-import "core-js/stage/4";
+import "core-js/es";
+import "core-js/proposals/reflect-metadata";
 
 // IE polyfills
 

diff --git a/starter/src/polyfills.browser.ts b/starter/src/polyfills.browser.ts
@@ -26,23 +26,25 @@
  * Polyfill: https://github.com/zloirock/core-js
  */
 /* tslint:disable:no-import-side-effect */
-import "core-js/es6";
-import "core-js/es7/reflect";
-import "core-js/es7/string";
-import "core-js/stage/4";
+// FIXME: remove the workaround added to the tsconfig.json to support core-js 3.0.0 with Angular CLI 7.x (https://github.com/angular/angular-cli/issues/13954#issuecomment-475452588)
+// it will be fixed most likely in Angular 8
+import "core-js/es";
+import "core-js/proposals/reflect-metadata";
 /**
  * IE11 does not support iteration on certain DOM collections (NodeList).
  * This polyfill is specifically needed for the animation on mat-menu used in stark-table.
  * More info: https://github.com/angular/angular/issues/27887
  */
-import "core-js/modules/web.dom.iterable";
+import "core-js/modules/web.dom-collections.iterator";
+
 /**
  * IE11 and Edge require this to support Server-sent events
  * https://caniuse.com/#feat=eventsource
  *
  * Polyfill: https://github.com/Yaffle/EventSource
  */
 import "event-source-polyfill";
+
 /**
  * IE11 requires Element.classList for NgClass support on SVG elements
  * See: https://caniuse.com/#feat=classlist
@@ -52,7 +54,6 @@ import "event-source-polyfill";
  * Polyfill: https://github.com/eligrey/classList.js
  */
 import "eligrey-classlist-js-polyfill";
-import "zone.js/dist/zone";
 
 /**
  * Web Animations polyfill is no longer needed for standard animation support as of Angular 6
@@ -69,6 +70,7 @@ import "zone.js/dist/zone";
  */
 // workaround for IE11 before loading zone.ks (see: https://github.com/angular/zone.js/issues/933)
 (window as any).__Zone_enable_cross_context_check = true;
+import "zone.js/dist/zone";
 // async stack traces with zone.js included for dev
 // import 'zone.js/dist/long-stack-trace-zone'
 /* tslint:enable */

diff --git a/starter/tsconfig.json b/starter/tsconfig.json
@@ -12,7 +12,9 @@
     ],
     "paths": {
       "@angular/*": ["../node_modules/@angular/*"],
-      "@nationalbankbelgium/*": ["../node_modules/@nationalbankbelgium/*"]
+      "@nationalbankbelgium/*": ["../node_modules/@nationalbankbelgium/*"],
+      "core-js/es7/reflect": ["../node_modules/core-js/proposals/reflect-metadata"],
+      "core-js/es6/*": ["../node_modules/core-js/es/*"]
     }
   },
   "exclude": ["node_modules", "dist", "src/assets"]