fix(@angular-devkit/build-optimizer): add ngfactories to known side-effect free modules

Author: filipesilva

packages/angular_devkit/build_optimizer/src/build-optimizer/build-optimizer.ts

@@ -15,6 +15,7 @@ import { getScrubFileTransformer, testScrubFile } from '../transforms/scrub-file
 import { getWrapEnumsTransformer, testWrapEnums } from '../transforms/wrap-enums';
 
 
+// Angular packages are known to have no side effects.
 const whitelistedAngularModules = [
   /[\\/]node_modules[\\/]@angular[\\/]animations[\\/]/,
   /[\\/]node_modules[\\/]@angular[\\/]common[\\/]/,
@@ -41,6 +42,20 @@ const es5AngularModules = [
   /\.umd\.js$/,
 ];
 
+// Factories created by AOT are known to have no side effects and contain es5 code.
+// In Angular 2/4 the file path for factories can be `.ts`, but in Angular 5 it is `.js`.
+const ngFactories = [
+  /\.ngfactory\.[jt]s/,
+  /\.ngstyle\.[jt]s/,
+];
+
+function isKnownSideEffectFree(filePath: string) {
+  return ngFactories.some((re) => re.test(filePath)) || (
+    whitelistedAngularModules.some((re) => re.test(filePath))
+    && es5AngularModules.some((re) => re.test(filePath))
+  );
+}
+
 export interface BuildOptimizerOptions {
   content?: string;
   inputFilePath?: string;
@@ -77,10 +92,7 @@ export function buildOptimizer(options: BuildOptimizerOptions): TransformJavascr
     getTransforms.push(getPrefixClassesTransformer);
   }
 
-  if (inputFilePath
-    && whitelistedAngularModules.some((re) => re.test(inputFilePath))
-    && es5AngularModules.some((re) => re.test(inputFilePath))
-  ) {
+  if (inputFilePath && isKnownSideEffectFree(inputFilePath)) {
     getTransforms.push(
       // getPrefixFunctionsTransformer is rather dangerous, apply only to known pure es5 modules.
       // It will mark both `require()` calls and `console.log(stuff)` as pure.

packages/angular_devkit/build_optimizer/src/build-optimizer/build-optimizer_spec.ts

@@ -17,7 +17,7 @@ describe('build-optimizer', () => {
   const decorators = 'Clazz.decorators = [ { type: Injectable } ];';
 
   describe('basic functionality', () => {
-    it('applies class-fold, scrub-file and prefix-functions to whitelisted es5 modules', () => {
+    fit('applies class-fold, scrub-file and prefix-functions to side-effect free modules', () => {
       const input = tags.stripIndent`
         ${imports}
         var __extends = (this && this.__extends) || function (d, b) {
@@ -51,6 +51,7 @@ describe('build-optimizer', () => {
           ], ComponentClazz);
           return ComponentClazz;
         }());
+        var RenderType_MdOption = ɵcrt({ encapsulation: 2, styles: styles_MdOption});
       `;
       // tslint:disable:max-line-length
       const output = tags.oneLine`
@@ -68,6 +69,7 @@ describe('build-optimizer', () => {
           function ComponentClazz() { }
           return ComponentClazz;
         }());
+        var RenderType_MdOption = /*@__PURE__*/ ɵcrt({ encapsulation: 2, styles: styles_MdOption });
       `;
 
       // Check Angular 4/5 and unix/windows paths.
@@ -76,6 +78,8 @@ describe('build-optimizer', () => {
         '/node_modules/@angular/core/esm5/core.js',
         '\\node_modules\\@angular\\core\\@angular\\core.es5.js',
         '\\node_modules\\@angular\\core\\esm5\\core.js',
+        '/project/file.ngfactory.js',
+        '/project/file.ngstyle.js',
       ];
 
       inputPaths.forEach((inputFilePath) => {

packages/angular_devkit/build_optimizer/src/purify/purify.ts

@@ -53,28 +53,6 @@ export function purifyReplacements(content: string) {
     },
   );
 
-  /* Prefix CCF and CMF statements */
-  content.replace(
-    /\w*__WEBPACK_IMPORTED_MODULE_\d+__angular_core__\["\w+" \/\* (ɵccf|ɵcmf|ɵcrt) \*\/\]\(/mg,
-    (match, _p1, offset) => {
-      const newContent = `/*@__PURE__*/${match}`;
-      addReplacement(offset, match.length, newContent);
-
-      return newContent;
-    },
-  );
-
-  /* Prefix module statements */
-  content.replace(
-    /new \w*__WEBPACK_IMPORTED_MODULE_\d+__angular_core__\["\w+" \/\* NgModuleFactory \*\/\]/mg,
-    (match, offset) => {
-      const newContent = `/*@__PURE__*/${match}`;
-      addReplacement(offset, match.length, newContent);
-
-      return newContent;
-    },
-  );
-
   return replacements;
 }
 

packages/angular_devkit/build_optimizer/src/purify/purify_spec.ts

@@ -41,41 +41,4 @@ describe('purify', () => {
 
     expect(tags.oneLine`${purify(input)}`).toEqual(tags.oneLine`${output}`);
   });
-
-  it('prefix createComponentFactory and createNgModuleFactory function calls', () => {
-    const input = tags.stripIndent`
-      var AppComponentNgFactory = __WEBPACK_IMPORTED_MODULE_1__angular_core__["I" /* ɵccf */]('app-root');
-      var AppModuleNgFactory = __WEBPACK_IMPORTED_MODULE_1__angular_core__["I" /* ɵcmf */]('app-root');
-      var SelectComponentNgFactory = select_component_ngfactory___WEBPACK_IMPORTED_MODULE_0__angular_core__["U" /* ɵccf */]('aio-select');
-    `;
-    const output = tags.stripIndent`
-      var AppComponentNgFactory = /*@__PURE__*/__WEBPACK_IMPORTED_MODULE_1__angular_core__["I" /* ɵccf */]('app-root');
-      var AppModuleNgFactory = /*@__PURE__*/__WEBPACK_IMPORTED_MODULE_1__angular_core__["I" /* ɵcmf */]('app-root');
-      var SelectComponentNgFactory = /*@__PURE__*/select_component_ngfactory___WEBPACK_IMPORTED_MODULE_0__angular_core__["U" /* ɵccf */]('aio-select');
-    `;
-
-    expect(tags.oneLine`${purify(input)}`).toEqual(tags.oneLine`${output}`);
-  });
-
-  it('should prefix createRendererType2 function calls', () => {
-    const input = tags.stripIndent`
-      var RenderType_MdOption = index_ngfactory___WEBPACK_IMPORTED_MODULE_0__angular_core__["W" /* ɵcrt */]({ encapsulation: 2, styles: styles_MdOption});
-    `;
-    const output = tags.stripIndent`
-      var RenderType_MdOption = /*@__PURE__*/index_ngfactory___WEBPACK_IMPORTED_MODULE_0__angular_core__["W" /* ɵcrt */]({ encapsulation: 2, styles: styles_MdOption});
-    `;
-
-    expect(tags.oneLine`${purify(input)}`).toEqual(tags.oneLine`${output}`);
-  });
-
-  it('prefix module statements', () => {
-    const input = tags.stripIndent`
-      var AppModuleNgFactory = new __WEBPACK_IMPORTED_MODULE_1__angular_core__["I" /* NgModuleFactory */];
-    `;
-    const output = tags.stripIndent`
-      var AppModuleNgFactory = /*@__PURE__*/new __WEBPACK_IMPORTED_MODULE_1__angular_core__["I" /* NgModuleFactory */];
-    `;
-
-    expect(tags.oneLine`${purify(input)}`).toEqual(tags.oneLine`${output}`);
-  });
 });