fix(express-engine): add webpack option to schematics (#1081)

* Enable webpack option by default
* Bump karma to version 3 to fix audit issues
Fixes #1080

Author: CaerusKaru

modules/express-engine/schematics/install/files/root/webpack.server.config.js

@@ -0,0 +1,47 @@
+// Work around for https://github.com/angular/angular-cli/issues/7200
+
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  mode: 'none',
+  entry: {
+    // This is our Express server for Dynamic universal
+    server: './<%= stripTsExtension(serverFileName) %>.ts'
+  },
+  target: 'node',
+  resolve: { extensions: ['.ts', '.js'] },
+  optimization: {
+    minimize: false
+  },
+  output: {
+    // Puts the output at the root of the dist folder
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js'
+  },
+  module: {
+    rules: [
+      { test: /\.ts$/, loader: 'ts-loader' },
+      {
+        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
+        // Removing this will cause deprecation warnings to appear.
+        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
+        parser: { system: true },
+      },
+    ]
+  },
+  plugins: [
+    new webpack.ContextReplacementPlugin(
+      // fixes WARNING Critical dependency: the request of a dependency is an expression
+      /(.+)?angular(\\|\/)core(.+)?/,
+      path.join(__dirname, 'src'), // location of your src
+      {} // a map of your routes
+    ),
+    new webpack.ContextReplacementPlugin(
+      // fixes WARNING Critical dependency: the request of a dependency is an expression
+      /(.+)?express(\\|\/)(.+)?/,
+      path.join(__dirname, 'src'),
+      {}
+    )
+  ]
+};

modules/express-engine/schematics/install/index.spec.ts

@@ -44,6 +44,38 @@ describe('Universal Schematic', () => {
     expect(contents).toMatch(/\"express\": \"/);
   });
 
+  it('should add dependency: ts-loader', () => {
+    const tree = schematicRunner.runSchematic('ng-add', defaultOptions, appTree);
+    const filePath = '/package.json';
+    const contents = tree.readContent(filePath);
+    expect(contents).toMatch(/\"ts-loader\": \"/);
+  });
+
+  it('should add dependency: webpack-cli', () => {
+    const tree = schematicRunner.runSchematic('ng-add', defaultOptions, appTree);
+    const filePath = '/package.json';
+    const contents = tree.readContent(filePath);
+    expect(contents).toMatch(/\"webpack-cli\": \"/);
+  });
+
+  it('should not add dependency: ts-loader when webpack is false', () => {
+    const noWebpack = Object.assign({}, defaultOptions);
+    noWebpack.webpack = false;
+    const tree = schematicRunner.runSchematic('ng-add', noWebpack, appTree);
+    const filePath = '/package.json';
+    const contents = tree.readContent(filePath);
+    expect(contents).not.toContain('ts-loader');
+  });
+
+  it('should not add dependency: webpack-cli when webpack is false', () => {
+    const noWebpack = Object.assign({}, defaultOptions);
+    noWebpack.webpack = false;
+    const tree = schematicRunner.runSchematic('ng-add', noWebpack, appTree);
+    const filePath = '/package.json';
+    const contents = tree.readContent(filePath);
+    expect(contents).not.toContain('webpack-cli');
+  });
+
   it('should install npm dependencies', () => {
     schematicRunner.runSchematic('ng-add', defaultOptions, appTree);
     expect(schematicRunner.tasks.length).toBe(2);

modules/express-engine/schematics/install/index.ts

@@ -7,22 +7,26 @@
  */
 import {experimental, JsonObject, strings} from '@angular-devkit/core';
 import {
-  Rule,
-  SchematicContext,
-  SchematicsException,
-  Tree,
   apply,
   chain,
+  externalSchematic,
+  filter,
   mergeWith,
+  noop,
+  Rule,
+  SchematicContext,
+  SchematicsException,
   template,
+  Tree,
   url,
-  noop,
-  filter,
-  externalSchematic,
 } from '@angular-devkit/schematics';
 import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks';
 import {getWorkspace, getWorkspacePath} from '@schematics/angular/utility/config';
 import {Schema as UniversalOptions} from './schema';
+import {
+  addPackageJsonDependency,
+  NodeDependencyType,
+} from '@schematics/angular/utility/dependencies';
 
 
 function getClientProject(
@@ -39,7 +43,36 @@ function getClientProject(
 
 function addDependenciesAndScripts(options: UniversalOptions): Rule {
   return (host: Tree) => {
+    addPackageJsonDependency(host, {
+      type: NodeDependencyType.Default,
+      name: '@nguniversal/express-engine',
+      version: '0.0.0-PLACEHOLDER',
+    });
+    addPackageJsonDependency(host, {
+      type: NodeDependencyType.Default,
+      name: '@nguniversal/module-map-ngfactory-loader',
+      version: '0.0.0-PLACEHOLDER',
+    });
+    addPackageJsonDependency(host, {
+      type: NodeDependencyType.Default,
+      name: 'express',
+      version: 'EXPRESS_VERSION',
+    });
+
+    if (options.webpack) {
+      addPackageJsonDependency(host, {
+        type: NodeDependencyType.Dev,
+        name: 'ts-loader',
+        version: '^5.2.0',
+      });
+      addPackageJsonDependency(host, {
+        type: NodeDependencyType.Dev,
+        name: 'webpack-cli',
+        version: '^3.1.0',
+      });
+    }
 
+    const serverFileName = options.serverFileName.replace('.ts', '');
     const pkgPath = '/package.json';
     const buffer = host.read(pkgPath);
     if (buffer === null) {
@@ -48,16 +81,13 @@ function addDependenciesAndScripts(options: UniversalOptions): Rule {
 
     const pkg = JSON.parse(buffer.toString());
 
-    pkg.dependencies['@nguniversal/express-engine'] = '0.0.0-PLACEHOLDER';
-    pkg.dependencies['@nguniversal/module-map-ngfactory-loader'] = '0.0.0-PLACEHOLDER';
-    pkg.dependencies['express'] = 'EXPRESS_VERSION';
-
-    pkg.scripts['serve:ssr'] = 'node dist/server';
+    pkg.scripts['compile:server'] = options.webpack ?
+      'webpack --config webpack.server.config.js --progress --colors' :
+      `tsc -p ${serverFileName}.tsconfig.json`;
+    pkg.scripts['serve:ssr'] = `node dist/${serverFileName}`;
     pkg.scripts['build:ssr'] = 'npm run build:client-and-server-bundles && npm run compile:server';
     pkg.scripts['build:client-and-server-bundles'] =
       `ng build --prod && ng run ${options.clientProject}:server:production`;
-    pkg.scripts['compile:server'] =
-      `tsc -p ${options.serverFileName.replace(/\.ts$/, '')}.tsconfig.json`;
 
     host.overwrite(pkgPath, JSON.stringify(pkg, null, 2));
 
@@ -118,6 +148,8 @@ export default function (options: UniversalOptions): Rule {
 
     const rootSource = apply(url('./files/root'), [
       options.skipServer ? filter(path => !path.startsWith('__serverFileName')) : noop(),
+      options.webpack ?
+        filter(path => !path.includes('tsconfig')) : filter(path => !path.startsWith('webpack')),
       template({
         ...strings,
         ...options as object,

modules/express-engine/schematics/install/schema.json

@@ -77,6 +77,11 @@
       "description": "Skip the Angular Universal schematic",
       "type": "boolean",
       "default": false
+    },
+    "webpack": {
+      "description": "Whether to add webpack configuration files",
+      "type": "boolean",
+      "default": true
     }
   },
   "required": [

modules/express-engine/schematics/install/schema.ts

@@ -63,4 +63,8 @@ export interface Schema {
    * Skip the Angular Universal schematic
    */
   skipUniversal?: boolean;
+  /**
+   * Whether to add webpack configuration files
+   */
+  webpack?: boolean;
 }

package.json

@@ -99,7 +99,7 @@
     "glob": "^7.1.2",
     "hapi": "^17.5.1",
     "jasmine-core": "^2.8.0",
-    "karma": "^2.0.0",
+    "karma": "^3.0.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-jasmine": "^1.1.1",
     "karma-sourcemap-loader": "^0.3.7",