Merge pull request #1237 from IgniteUI/hPopov/fix-issue-1226

Add polyfill template for IE

Author: zdrawku

live-editing/generators/SharedAssetsGenerator.ts

@@ -17,7 +17,7 @@ const ANGULAR_JSON_TEMPLATE_CSS_SUPPORT_PATH =
 const MAIN_TS_FILE_PATH = path.join(__dirname, "../templates/main.ts.template");
 const APP_COMPONENT_SCSS_PATH = path.join(__dirname, "../../src/app/app.component.scss");
 const APP_COMPONENT_TS_PATH = path.join(__dirname, "../../src/app/app.component.ts");
-
+const IE_POLYFILLS_TS_PATH = path.join(__dirname, "../templates/polyfills.ts.template");
 export class SharedAssetsGenerator extends Generator {
     private _showLogs: boolean;
 
@@ -69,15 +69,21 @@ export class SharedAssetsGenerator extends Generator {
         let args = new SharedAssetsGeneratorArgs("styles.css", styles,
             ANGULAR_JSON_TEMPLATE_CSS_SUPPORT_PATH, "app.component.css",
             appComponentStylesFileContent, appComponentTsFileContnet);
-        this._generateSharedAssets(args);
+        this._generateSharedAssets(args, true);
     }
 
-    private _generateSharedAssets(args: SharedAssetsGeneratorArgs) {
+    private _generateSharedAssets(args: SharedAssetsGeneratorArgs, cssAssets?: boolean) {
         let indexFile = fs.readFileSync(INDEX_FILE_PATH, "utf8");
-        let polyfillsFile = fs.readFileSync(POLYPFILLS_FILE_PATH, "utf8");
         let angularJsonFile = fs.readFileSync(args.angularJsonFilePath, "utf8");
         let mainTsFile = fs.readFileSync(MAIN_TS_FILE_PATH, "utf8");
         let files = new Array<LiveEditingFile>();
+        let polyfillsFile;
+
+        if (cssAssets) {
+            polyfillsFile = fs.readFileSync(IE_POLYFILLS_TS_PATH, "utf8");
+        } else {
+            polyfillsFile = fs.readFileSync(POLYPFILLS_FILE_PATH, "utf8");
+        }
 
         files.push(new LiveEditingFile(SAMPLE_SRC_FOLDER + "index.html", indexFile));
         files.push(new LiveEditingFile(SAMPLE_SRC_FOLDER + "polyfills.ts", polyfillsFile));

live-editing/templates/polyfills.ts.template

@@ -0,0 +1,80 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/* IE9, IE10 and IE11 requires all of the following polyfills. */
+import "core-js/es6/array";
+import "core-js/es6/date";
+import "core-js/es6/function";
+import "core-js/es6/map";
+import "core-js/es6/math";
+import "core-js/es6/number";
+import "core-js/es6/object";
+import "core-js/es6/parse-float";
+import "core-js/es6/parse-int";
+import "core-js/es6/regexp";
+import "core-js/es6/set";
+import "core-js/es6/string";
+import "core-js/es6/symbol";
+import "core-js/es6/weak-map";
+import "core-js/es7/object";
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+import "classlist.js";  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+import "core-js/es6/reflect";
+
+/* Evergreen browsers require these. */
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+import "core-js/es7/reflect";
+
+/*
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ */
+import "web-animations-js";  // Run `npm install --save web-animations-js`.
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import "hammerjs/hammer";
+import "zone.js/dist/zone";  // Included with Angular CLI.
+
+/***************************************************************************************************
+ * @angular/animations polyfill
+ */
+if (!Element.prototype.matches) {
+    Element.prototype.matches = (Element.prototype as any).msMatchesSelector;
+}
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import "intl";  // Run `npm install --save intl`.
+// import "intl/locale-data/jsonp/de";
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import "intl/locale-data/jsonp/en";