chore(scripts): update e2e prod build to work with ionic-app-scripts (#10083)

* chore(e2e): WIP to add files needed for app-scripts

* chore(e2e): WIP one e2e test building but with errors

* chore(e2e): move e2e.prod to working with app-scripts

move shared functions into util, add support for debug flag when
running e2e.prod / demos.prod which gets passed to app-scripts

* chore(build): fix app-scripts build for all e2e and demos

* chore(e2e): update ionic-angular import path

* chore(build): update dev paths to work with prod

* chore(e2e): get watch working with e2e prod

* docs(scripts): update README for running e2e and demos

closes #8411
closes #10023

scripts/e2e/copy.config.js

@@ -0,0 +1,7 @@
+// we don't want to run copy for the demos, so just override the config for now
+module.exports = {
+  copyAssets: { },
+  copyIndexContent: { },
+  copyFonts: { },
+  copyPolyfills: { }
+}

scripts/e2e/e2e.template.dev.html

@@ -48,7 +48,7 @@
         '@angular/http': '/node_modules/@angular/http/bundles/http.umd.js',
         '@angular/platform-browser': '/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
         '@angular/platform-browser-dynamic': '/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-        'ionic-angular': location.protocol + '//' + location.host,
+        'ionic-angular': location.protocol + '//' + location.host + '/ionic-angular',
         'rxjs': '/node_modules/rxjs'
       },
       packages: {

scripts/e2e/e2e.template.prod.html

@@ -6,8 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <meta name="apple-mobile-web-app-capable" content="yes">
 
-  <link id="ionicLink" href="../../../../css/ionic.css" rel="stylesheet">
-  <link href="../../../../css/e2e.shared.css" rel="stylesheet">
+  <link id="ionicLink" href="./build/main.css" rel="stylesheet">
+	<link href="../../../../css/e2e.shared.css" rel="stylesheet">
 
   <script>
     if (location.href.indexOf('snapshot=true') > -1) {
@@ -43,7 +43,7 @@
       document.body.classList.remove('rtl');
     }
   </script>
-  <script src="../../../../polyfills/polyfills.ng.js"></script>
-  <script src="./app.bundle.js"></script>
+  <script src="../../../../polyfills/polyfills.js"></script>
+  <script src="./build/main.js"></script>
 </body>
 </html>

scripts/e2e/entry.ts

@@ -1,4 +0,0 @@
-import { platformBrowser } from '@angular/platform-browser';
-import { AppModuleNgFactory } from './app.module.ngfactory';
-
-platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

scripts/e2e/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

scripts/e2e/sass.config.js

@@ -0,0 +1,103 @@
+
+// https://www.npmjs.com/package/node-sass
+
+module.exports = {
+
+  /**
+   * outputFilename: The filename of the saved CSS file
+   * from the sass build. The directory which it is saved in
+   * is set within the "buildDir" config options.
+   */
+  outputFilename: process.env.IONIC_OUTPUT_CSS_FILE_NAME,
+
+  /**
+   * sourceMap: If source map should be built or not.
+   */
+  sourceMap: false,
+
+  /**
+   * outputStyle: How node-sass should output the css file.
+   */
+  outputStyle: 'expanded',
+
+  /**
+   * autoprefixer: The config options for autoprefixer.
+   * Excluding this config will skip applying autoprefixer.
+   * https://www.npmjs.com/package/autoprefixer
+   */
+  autoprefixer: {
+    browsers: [
+      'last 2 versions',
+      'iOS >= 8',
+      'Android >= 4.4',
+      'Explorer >= 11',
+      'ExplorerMobile >= 11'
+    ],
+    cascade: false
+  },
+
+  /**
+   * includePaths: Used by node-sass for additional
+   * paths to search for sass imports by just name.
+   */
+  includePaths: [
+    'src/themes',
+    'node_modules/ionicons/dist/scss',
+    'src/fonts'
+  ],
+
+  /**
+   * includeFiles: An array of regex patterns to search for
+   * sass files in the same directory as the component module.
+   * If a file matches both include and exclude patterns, then
+   * the file will be excluded.
+   */
+  includeFiles: [
+    /\.(s(c|a)ss)$/i
+  ],
+
+  /**
+   * excludeFiles: An array of regex patterns for files which
+   * should be excluded. If a file matches both include and exclude
+   * patterns, then the file will be excluded.
+   */
+  excludeFiles: [
+    /*  /\.(wp).(scss)$/i  */
+  ],
+
+  /**
+   * variableSassFiles: Lists out the files which include
+   * only sass variables. These variables are the first sass files
+   * to be imported so their values override default variables.
+   */
+  variableSassFiles: [
+    './scripts/e2e/variables.scss'
+  ],
+
+  /**
+   * directoryMaps: Compiled JS modules may be within a different
+   * directory than its source file and sibling component sass files.
+   * For example, NGC places it's files within the .tmp directory
+   * but doesn't copy over its sass files. This is useful so sass
+   * also checks the JavaScript's source directory for sass files.
+   */
+  directoryMaps: {
+    '{{TMP}}': '{{SRC}}'
+  },
+
+  /**
+   * excludeModules: Used just as a way to skip over
+   * modules which we know wouldn't have any sass to be
+   * bundled. "excludeModules" isn't necessary, but is a
+   * good way to speed up build times by skipping modules.
+   */
+  excludeModules: [
+    '@angular',
+    'commonjs-proxy',
+    'core-js',
+    'ionic-native',
+    'rxjs',
+    'zone.js'
+  ]
+
+};

scripts/e2e/variables.scss

@@ -0,0 +1,79 @@
+// Ionic Variables and Theming. For more info, please see:
+// http://ionicframework.com/docs/v2/theming/
+
+// Font path is used to include ionicons,
+// roboto, and noto sans fonts
+$font-path: "../../../../../fonts";
+
+@import "ionic.globals";
+
+
+// Shared Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass variables found in Ionic's source scss files.
+// To view all the possible Ionic variables, see:
+// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
+
+
+// Named Color Variables
+// --------------------------------------------------
+// Named colors makes it easy to reuse colors on various components.
+// It's highly recommended to change the default colors
+// to match your app's branding. Ionic uses a Sass map of
+// colors so you can add, rename and remove colors as needed.
+// The "primary" color is the only required color in the map.
+
+$colors: (
+  primary:    #387ef5,
+  secondary:  #32db64,
+  danger:     #f53d3d,
+  light:      #f4f4f4,
+  dark:       #222,
+  vibrant:    rebeccapurple,
+  bright:     #ffc125
+);
+
+
+// App iOS Variables
+// --------------------------------------------------
+// iOS only Sass variables can go here
+
+
+
+// App Material Design Variables
+// --------------------------------------------------
+// Material Design only Sass variables can go here
+
+
+// App Windows Variables
+// --------------------------------------------------
+// Windows only Sass variables can go here
+
+
+
+// App Theme
+// --------------------------------------------------
+// Ionic apps can have different themes applied, which can
+// then be future customized. This import comes last
+// so that the above variables are used and Ionic's
+// default are overridden.
+
+@import "ionic.theme.default";
+
+
+// Ionicons
+// --------------------------------------------------
+// The premium icon font for Ionic. For more info, please see:
+// http://ionicframework.com/docs/v2/ionicons/
+
+@import "ionicons";
+
+
+// Fonts
+// --------------------------------------------------
+// Roboto font is used by default for Material Design. Noto sans
+// is used by default for Windows.
+
+@import "roboto";
+@import "noto-sans";