Update for Angular 8 (#22)

* Set directTemplateLoading to False for Angular 8

* Update direct template loading to false for Angular 8

* Fix the existing broken unit tests
Add a unit test for Angular 8
Add a check to maintain Angular 6/7 compatability per PR feedback

* add "update needed to typescript.js check" to ng-add-pug-loader.js script
make changes requested in PR:
* fix typo on unit test description
* refactor variable names relating to version of Angular
* alter mocked unit test file utilize subset of typescript.js

Author: JoshuaNitschke

src/files/ng-add-pug-loader.js

@@ -24,3 +24,30 @@ fs.readFile(commonCliConfig, (err, data) => {
     fs.close(file, () => {});
   });
 });
+
+/**
+ * Set's directTemplateLoading: false to allow custom pug template loader to work
+ * @see https://github.com/angular/angular-cli/issues/14534
+ */
+const typescriptCliConfig = '__TYPESCRIPT_CLI_CONFIG_PATH__';
+
+fs.readFile(typescriptCliConfig, (err, data) => {
+  if (err) { throw err; }
+
+  const typescriptText = data.toString();
+
+  // check if needed to be set or already set
+  if (typescriptText.indexOf('directTemplateLoading') === -1 || typescriptText.indexOf('directTemplateLoading: false,') > -1) { return; }
+  
+  // update the setting
+  const output = typescriptText.replace('directTemplateLoading: true,', 'directTemplateLoading: false,');
+
+  // rewrite the file
+  const file2 = fs.openSync(typescriptCliConfig, 'r+');  
+  fs.writeFile(file2, output, error => {
+    if (error)
+      console.error("An error occurred while overwriting Angular CLI's Webpack config");
+
+    fs.close(file2, () => {});
+  });
+});

src/schematics/ng-add/index.ts

@@ -11,7 +11,8 @@ import { throwError } from 'rxjs';
 import { addDependencyToPackageJson, addScriptToPackageJson } from '../../utils/package';
 import { devDependencies } from './dependencies';
 
-const TARGET_CONFIG_PATH = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js';
+const TARGET_COMMON_CONFIG_PATH = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js';
+const TARGET_TYPESCRIPT_CONFIG_PATH = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js';
 const NG_ADD_PUG_LOADER_SCRIPT_NAME = 'ng-add-pug-loader.js';
 
 /**
@@ -60,21 +61,33 @@ function addLoadersToPackageJson() {
  */
 function addPugRules() {
   return (tree: Tree) => {
-    const configFile = tree.read(TARGET_CONFIG_PATH);
-    if (!configFile)
+    const commonConfigFile = tree.read(TARGET_COMMON_CONFIG_PATH);
+    const typescriptConfigFile = tree.read(TARGET_TYPESCRIPT_CONFIG_PATH);
+      
+    if (!commonConfigFile || !typescriptConfigFile)
       return throwError(new Error(`CLI's Webpack config was not found. Try running \`npm install\` before running this tool.`));
-
-    const configText = configFile.toString('utf-8');
+    
+    const commonConfigText = commonConfigFile.toString('utf-8');
     const strPugRules = getPugLoaderRules();
 
     // make sure we don't add the rule if it already exists
-    if (configText.indexOf(strPugRules) > -1) { return; }
+    if (commonConfigText.indexOf(strPugRules) > -1) { return; }
 
     // We made it this far, let's insert that pug webpack rule
-    const position = configText.indexOf('rules: [') + 8;
-    const output = [configText.slice(0, position), `\n${strPugRules}`, configText.slice(position)].join('');
+    const position = commonConfigText.indexOf('rules: [') + 8;
+    const commonOutput = [commonConfigText.slice(0, position), `\n${strPugRules}`, commonConfigText.slice(position)].join('');
+
+    tree.overwrite(TARGET_COMMON_CONFIG_PATH, commonOutput);
+
+    // now we update the typescript config file for Angular8 to turn off direct template loading  
+    const typescriptConfigText = typescriptConfigFile.toString('utf-8');
 
-    tree.overwrite(TARGET_CONFIG_PATH, output);
+    // if directTemplateLoading not present (Angular 6) no change needed, if Angular 8 and already set to false, no change needed
+    if (typescriptConfigText.indexOf('directTemplateLoading') === -1 || typescriptConfigText.indexOf('directTemplateLoading: false,') > -1) { return; }
+
+    // change needed, make and write it
+    const typescriptOutput = typescriptConfigText.replace('directTemplateLoading: true,', 'directTemplateLoading: false,');
+    tree.overwrite(TARGET_TYPESCRIPT_CONFIG_PATH, typescriptOutput)
   }
 }
 
@@ -98,7 +111,8 @@ function addScriptToProject() {
     const scriptContent = files.read(NG_ADD_PUG_LOADER_SCRIPT_NAME)!.toString('utf-8');
 
     const modifiedContent = replaceVars(scriptContent, {
-      COMMON_CLI_CONFIG_PATH: TARGET_CONFIG_PATH,
+      COMMON_CLI_CONFIG_PATH: TARGET_COMMON_CONFIG_PATH,
+      TYPESCRIPT_CLI_CONFIG_PATH: TARGET_TYPESCRIPT_CONFIG_PATH,
       PUG_RULES: getPugLoaderRules()
     });
 
@@ -149,4 +163,4 @@ function getPugLoaderRules(): string {
       test: ${partialRegex},
       loader: "pug-loader"
     },`.replace(/\s+/gm, ' ');
-}
+}

src/schematics/ng-add/index_spec.ts

@@ -2,19 +2,22 @@ import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/te
 import { getFileContent } from '@schematics/angular/utility/test';
 import * as path from 'path';
 
-import { createTestApp, createCommonWebpackConfig } from '../../utils/testing';
+import { createTestApp, createCommonWebpackConfigForAngular6, createCommonWebpackConfigForAngular7orGreater } from '../../utils/testing';
 import { NgAddOptions } from '.';
 
-describe('ng-add', () => {
-  const TARGET_CONFIG_PATH = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js';
+const TARGET_COMMON_CONFIG_PATH = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js';
+const TARGET_TYPESCRIPT_CONFIG_PATH = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js';
+
+describe('ng-add-angular-6', () => {
+
   let runner: SchematicTestRunner;
   let appTree: UnitTestTree;
 
   const defaultOptions: NgAddOptions = {};
 
   beforeEach(() => {
     appTree = createTestApp();
-    createCommonWebpackConfig(appTree);
+    createCommonWebpackConfigForAngular6(appTree);
     runner = new SchematicTestRunner('schematics', path.join(__dirname, '../collection.json'));
   });
 
@@ -29,16 +32,16 @@ describe('ng-add', () => {
   });
 
   it('should add 2 new pug rules', () => {
-    const oldConfig = eval(getFileContent(appTree, TARGET_CONFIG_PATH));
+    const oldConfig = eval(getFileContent(appTree, TARGET_COMMON_CONFIG_PATH));
     const tree = runner.runSchematic('ng-add', defaultOptions, appTree);
-    const config = eval(getFileContent(tree, TARGET_CONFIG_PATH));
+    const config = eval(getFileContent(tree, TARGET_COMMON_CONFIG_PATH));
 
     expect(config.rules.length - oldConfig.rules.length).toBe(2);
   });
 
   it('should add the apply and pug loaders in webpack config', () => {
     const tree = runner.runSchematic('ng-add', defaultOptions, appTree);
-    const config = eval(getFileContent(tree, TARGET_CONFIG_PATH));
+    const config = eval(getFileContent(tree, TARGET_COMMON_CONFIG_PATH));
     const pugRule = config.rules[0];
 
     expect(pugRule.test.toString()).toBe(/\.(pug|jade)$/.toString());
@@ -51,13 +54,20 @@ describe('ng-add', () => {
 
   it('should add the pug loader only for include/partial files in webpack config', () => {
     const tree = runner.runSchematic('ng-add', defaultOptions, appTree);
-    const config = eval(getFileContent(tree, TARGET_CONFIG_PATH));
+    const config = eval(getFileContent(tree, TARGET_COMMON_CONFIG_PATH));
     const partialPugRule = config.rules[1];
 
     expect(partialPugRule.test.toString()).toBe(/\.(include|partial)\.(pug|jade)$/.toString());
     expect(partialPugRule.loader).toBe('pug-loader');
   });
 
+  it('should not modify the typescript.js file in webpack config', () => {
+    const tree = runner.runSchematic('ng-add', defaultOptions, appTree);
+    const newTypescriptConfig = getFileContent(tree, TARGET_TYPESCRIPT_CONFIG_PATH);
+
+    expect(newTypescriptConfig).not.toContain('directTemplateLoading');
+  });
+
   it('should add script file to root', () => {
     const tree = runner.runSchematic('ng-add', defaultOptions, appTree);
     expect(tree.read('/ng-add-pug-loader.js')).toBeDefined();
@@ -73,3 +83,23 @@ describe('ng-add', () => {
     expect((npmInstallTask.options as any).command).toBe('install');
   });
 });
+
+
+describe('ng-add-angular-7-or-greater-specific', () => {
+  let runner: SchematicTestRunner;
+  let appTree: UnitTestTree;
+
+  const defaultOptions: NgAddOptions = {};
+
+  beforeEach(() => {
+    appTree = createTestApp();
+    createCommonWebpackConfigForAngular7orGreater(appTree);
+    runner = new SchematicTestRunner('schematics', path.join(__dirname, '../collection.json'));
+  });
+
+  it('the typescript.js file in webpack config should have directTemplateLoading: false', () => {
+    const tree = runner.runSchematic('ng-add', defaultOptions, appTree);
+    const newTypescriptConfig = getFileContent(tree, TARGET_TYPESCRIPT_CONFIG_PATH);
+    expect(newTypescriptConfig).toContain('directTemplateLoading: false');
+  });
+});

src/utils/testing.ts

@@ -3,6 +3,48 @@ import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/te
 import { Tree } from '@angular-devkit/schematics';
 
 const collectionPath = join('./node_modules/@schematics/angular/collection.json');
+const commonJsFile = 
+`({
+    rules: [
+        { test: /.anything$/, loader: 'any-loader' }
+    ]
+})`
+
+const angular6TypescriptJsFile =
+`const pluginOptions: AngularCompilerPluginOptions = {
+    mainPath: useMain ? path.join(root, buildOptions.main) : undefined,
+    ...i18nFileAndFormat,
+    locale: buildOptions.i18nLocale,
+    platform: buildOptions.platform === 'server' ? PLATFORM.Server : PLATFORM.Browser,
+    missingTranslation: buildOptions.i18nMissingTranslation,
+    sourceMap: buildOptions.sourceMap.scripts,
+    additionalLazyModules,
+    hostReplacementPaths,
+    nameLazyFiles: buildOptions.namedChunks,
+    forkTypeChecker: buildOptions.forkTypeChecker,
+    contextElementDependencyConstructor: require('webpack/lib/dependencies/ContextElementDependency'),
+    logger: wco.logger,
+    ...options,
+  };`
+
+const angular7orGreaterTypescriptJsFile =
+`const pluginOptions: AngularCompilerPluginOptions = {
+    mainPath: useMain ? path.join(root, buildOptions.main) : undefined,
+    ...i18nFileAndFormat,
+    locale: buildOptions.i18nLocale,
+    platform: buildOptions.platform === 'server' ? PLATFORM.Server : PLATFORM.Browser,
+    missingTranslation: buildOptions.i18nMissingTranslation,
+    sourceMap: buildOptions.sourceMap.scripts,
+    additionalLazyModules,
+    hostReplacementPaths,
+    nameLazyFiles: buildOptions.namedChunks,
+    forkTypeChecker: buildOptions.forkTypeChecker,
+    contextElementDependencyConstructor: require('webpack/lib/dependencies/ContextElementDependency'),
+    logger: wco.logger,
+    directTemplateLoading: true,
+    ...options,
+  };`
+
 
 /**
  * Create a base app used for testing.
@@ -30,13 +72,12 @@ export function createTestApp(): UnitTestTree {
   }, tree);
 }
 
-export function createCommonWebpackConfig(host: Tree) {
-  host.create(
-    'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js',
-    `
-({
-  rules: [
-    { test: /.anything$/, loader: 'any-loader' }
-  ]
-})`);
+export function createCommonWebpackConfigForAngular6(host: Tree) {
+    host.create("node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js", commonJsFile);
+    host.create("node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js", angular6TypescriptJsFile);
+}
+
+export function createCommonWebpackConfigForAngular7orGreater(host: Tree) {
+    host.create("node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js", commonJsFile);
+    host.create("node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js", angular7orGreaterTypescriptJsFile);
 }