webpack plugin for cypress

apps/app1-e2e/cypress.json

@@ -1,8 +1,7 @@
 {
-  "fileServerFolder": "../../dist/out-tsc/apps/app1-e2e",
-  "fixturesFolder": "../../dist/out-tsc/apps/app1-e2e/src/fixtures",
-  "integrationFolder": "../../dist/out-tsc/apps/app1-e2e/src/integration",
-  "pluginsFile": "../../dist/out-tsc/apps/app1-e2e/src/plugins/index.js",
+  "fileServerFolder": "./",
+  "integrationFolder": "./src/integration",
+  "pluginsFile": "./src/plugins/index.js",
   "supportFile": false,
   "video": true,
   "videosFolder": "../../dist/out-tsc/apps/app1-e2e/videos",

apps/app1-e2e/src/plugins/index.js

@@ -0,0 +1,50 @@
+const wp = require('@cypress/webpack-preprocessor')
+const pathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+
+  // TODO: make this require('@nrwl/cypress/plugins/preprocessor');
+  on('file:preprocessor',
+    wp({
+      webpackOptions: {
+        resolve: {
+          extensions: ['.ts', '.js'],
+          plugins: [
+            new pathsPlugin({
+              configFile: path.join(__dirname, '../../tsconfig.e2e.json'),
+              extensions: [".ts", ".js"]
+            })
+          ]
+        },
+        module: {
+          rules: [
+            {
+              test: /\.ts$/,
+              loader: 'ts-loader',
+              options: {
+                configFile: path.join(__dirname, '../../tsconfig.e2e.json'),
+                // https://github.com/TypeStrong/ts-loader/pull/685
+                experimentalWatchApi: true
+              }
+            },
+          ],
+        }
+      }
+    })
+  );
+};

package.json

@@ -36,31 +36,35 @@
     "@angular/platform-browser": "^8.0.0",
     "@angular/platform-browser-dynamic": "^8.0.0",
     "@angular/router": "^8.0.0",
+    "@nrwl/angular": "^8.0.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.4.0",
-    "zone.js": "^0.9.1",
-    "@nrwl/angular": "^8.0.0"
+    "zone.js": "^0.9.1"
   },
   "devDependencies": {
-    "jest-preset-angular": "7.0.0",
+    "@angular-devkit/build-angular": "^0.800.0",
+    "@angular/cli": "8.0.0",
     "@angular/compiler-cli": "^8.0.0",
     "@angular/language-service": "^8.0.0",
-    "@angular-devkit/build-angular": "^0.800.0",
-    "codelyzer": "~5.0.1",
-    "cypress": "3.1.0",
-    "@types/jquery": "3.3.6",
+    "@cypress/webpack-preprocessor": "^4.1.0",
     "@nrwl/cypress": "8.0.0",
     "@nrwl/jest": "8.0.0",
-    "jest": "24.1.0",
-    "@types/jest": "24.0.9",
-    "ts-jest": "24.0.0",
     "@nrwl/workspace": "8.0.0",
+    "@types/jest": "24.0.9",
+    "@types/jquery": "3.3.6",
     "@types/node": "~8.9.4",
+    "codelyzer": "~5.0.1",
+    "cypress": "^3.3.1",
     "dotenv": "6.2.0",
+    "jest": "24.1.0",
+    "jest-preset-angular": "7.0.0",
+    "prettier": "1.16.4",
+    "ts-jest": "24.0.0",
+    "ts-loader": "^6.0.2",
     "ts-node": "~7.0.0",
+    "tsconfig-paths-webpack-plugin": "^3.2.0",
     "tslint": "~5.11.0",
     "typescript": "~3.4.5",
-    "prettier": "1.16.4",
-    "@angular/cli": "8.0.0"
+    "webpack": "^4.33.0"
   }
 }