fix(@angular-devkit/build-angular): validate fileReplacements, allow string styles/scripts

Fix #5053
Fix #10267

Author: filipesilva

packages/angular_devkit/build_angular/src/angular-cli-files/models/build-options.ts

@@ -10,7 +10,7 @@
 
 // tslint:disable-next-line:no-implicit-dependencies
 import * as ts from 'typescript';
-import { Budget } from '../utilities/bundle-calculator';
+import { AssetPattern, Budget, ExtraEntryPoint } from '../../browser/schema';
 
 export interface BuildOptions {
   optimization: boolean;
@@ -27,8 +27,6 @@ export interface BuildOptions {
   progress?: boolean;
   i18nFile?: string;
   i18nFormat?: string;
-  i18nOutFile?: string;
-  i18nOutFormat?: string;
   i18nLocale?: string;
   i18nMissingTranslation?: string;
   extractCss?: boolean;
@@ -56,34 +54,21 @@ export interface BuildOptions {
   assets: AssetPattern[];
   scripts: ExtraEntryPoint[];
   styles: ExtraEntryPoint[];
-  stylePreprocessorOptions: { includePaths: string[] };
+  stylePreprocessorOptions?: { includePaths: string[] };
   lazyModules: string[];
   platform?: 'browser' | 'server';
 }
 
-export interface AssetPattern {
-  glob: string;
-  input: string;
-  output: string;
-  allowOutsideOutDir?: boolean;
-}
-
-export interface ExtraEntryPoint {
-  input: string;
-  output?: string;
-  lazy: boolean;
+export interface WebpackTestOptions extends BuildOptions {
+  codeCoverage?: boolean;
+  codeCoverageExclude?: string[];
 }
 
-export interface WebpackConfigOptions<T extends BuildOptions = BuildOptions> {
+export interface WebpackConfigOptions<T = BuildOptions> {
   root: string;
   projectRoot: string;
   buildOptions: T;
   tsConfig: ts.ParsedCommandLine;
   tsConfigPath: string;
   supportES2015: boolean;
 }
-
-export interface WebpackTestOptions extends BuildOptions {
-  codeCoverage?: boolean;
-  codeCoverageExclude?: string[];
-}

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/browser.ts

@@ -8,9 +8,10 @@ import { LicenseWebpackPlugin } from 'license-webpack-plugin';
 import { generateEntryPoints, packageChunkSort } from '../../utilities/package-chunk-sort';
 import { BaseHrefWebpackPlugin } from '../../lib/base-href-webpack';
 import { IndexHtmlWebpackPlugin } from '../../plugins/index-html-webpack-plugin';
-import { ExtraEntryPoint } from '../../../browser';
+import { ExtraEntryPoint } from '../../../browser/schema';
+import { BrowserBuilderSchema } from '../../../browser/schema';
 import { WebpackConfigOptions } from '../build-options';
-import { computeBundleName } from './utils';
+import { normalizeExtraEntryPoints } from './utils';
 
 /**
 + * license-webpack-plugin has a peer dependency on webpack-sources, list it in a comment to
@@ -26,10 +27,11 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
   let extraPlugins: any[] = [];
 
   // Figure out which are the lazy loaded bundle names.
-  const lazyChunkBundleNames = ([...buildOptions.styles, ...buildOptions.scripts] as ExtraEntryPoint[])
-    .filter(entry => entry.lazy)
+  const lazyChunkBundleNames = normalizeExtraEntryPoints(
     // We don't really need a default name because we pre-filtered by lazy only entries.
-    .map(style => computeBundleName(style, 'not-lazy'));
+    [...buildOptions.styles, ...buildOptions.scripts], 'not-lazy')
+    .filter(entry => entry.lazy)
+    .map(entry => entry.bundleName)
 
   const generateIndexHtml = false;
   if (generateIndexHtml) {
@@ -77,8 +79,8 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
     }));
   }
 
-  const globalStylesBundleNames = (buildOptions.styles as ExtraEntryPoint[])
-    .map(style => computeBundleName(style, 'styles'));
+  const globalStylesBundleNames = normalizeExtraEntryPoints(buildOptions.styles, 'styles')
+    .map(style => style.bundleName);
 
   return {
     devtool: sourcemaps,

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

@@ -12,8 +12,8 @@ import { BundleBudgetPlugin } from '../../plugins/bundle-budget';
 import { CleanCssWebpackPlugin } from '../../plugins/cleancss-webpack-plugin';
 import { ScriptsWebpackPlugin } from '../../plugins/scripts-webpack-plugin';
 import { findUp } from '../../utilities/find-up';
-import { AssetPattern, ExtraEntryPoint } from '../../../browser';
-import { computeBundleName } from './utils';
+import { AssetPattern, ExtraEntryPoint } from '../../../browser/schema';
+import { normalizeExtraEntryPoints } from './utils';
 
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
@@ -63,9 +63,9 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
 
   // process global scripts
   if (buildOptions.scripts.length > 0) {
-    const globalScriptsByBundleName = (buildOptions.scripts as ExtraEntryPoint[])
+    const globalScriptsByBundleName = normalizeExtraEntryPoints(buildOptions.scripts, 'scripts')
       .reduce((prev: { bundleName: string, paths: string[], lazy: boolean }[], curr) => {
-        const bundleName = computeBundleName(curr, 'scripts');
+        const bundleName = curr.bundleName;
         const resolvedPath = path.resolve(root, curr.input);
         let existingEntry = prev.find((el) => el.bundleName === bundleName);
         if (existingEntry) {

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts

@@ -8,8 +8,8 @@ import { getOutputHashFormat } from './utils';
 import { WebpackConfigOptions } from '../build-options';
 import { findUp } from '../../utilities/find-up';
 import { RawCssLoader } from '../../plugins/webpack';
-import { ExtraEntryPoint } from '../../../browser';
-import { computeBundleName } from './utils';
+import { ExtraEntryPoint } from '../../../browser/schema';
+import { normalizeExtraEntryPoints } from './utils';
 
 const postcssUrl = require('postcss-url');
 const autoprefixer = require('autoprefixer');
@@ -166,15 +166,14 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
 
   // Process global styles.
   if (buildOptions.styles.length > 0) {
-    (buildOptions.styles as ExtraEntryPoint[]).forEach(style => {
-      const bundleName = computeBundleName(style, 'styles');;
+    normalizeExtraEntryPoints(buildOptions.styles, 'styles').forEach(style => {
       const resolvedPath = path.resolve(root, style.input);
 
       // Add style entry points.
-      if (entryPoints[bundleName]) {
-        entryPoints[bundleName].push(resolvedPath)
+      if (entryPoints[style.bundleName]) {
+        entryPoints[style.bundleName].push(resolvedPath)
       } else {
-        entryPoints[bundleName] = [resolvedPath]
+        entryPoints[style.bundleName] = [resolvedPath]
       }
 
       // Add global css paths.

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/typescript.ts

@@ -25,6 +25,7 @@ function _createAotPlugin(
   options: any,
   host: virtualFs.Host<Stats>,
   useMain = true,
+  extract = false
 ) {
   const { root, buildOptions } = wco;
   options.compilerOptions = options.compilerOptions || {};
@@ -37,6 +38,15 @@ function _createAotPlugin(
     ? path.resolve(root, buildOptions.i18nFile)
     : undefined;
 
+  const i18nFileAndFormat = extract
+    ? {
+      i18nOutFile: buildOptions.i18nFile,
+      i18nOutFormat: buildOptions.i18nFormat,
+    } : {
+      i18nInFile: i18nInFile,
+      i18nInFormat: buildOptions.i18nFormat,
+    };
+
   const additionalLazyModules: { [module: string]: string } = {};
   if (buildOptions.lazyModules) {
     for (const lazyModule of buildOptions.lazyModules) {
@@ -49,10 +59,7 @@ function _createAotPlugin(
 
   const pluginOptions: AngularCompilerPluginOptions = {
     mainPath: useMain ? path.join(root, buildOptions.main) : undefined,
-    i18nInFile: i18nInFile,
-    i18nInFormat: buildOptions.i18nFormat,
-    i18nOutFile: buildOptions.i18nOutFile,
-    i18nOutFormat: buildOptions.i18nOutFormat,
+    ...i18nFileAndFormat,
     locale: buildOptions.i18nLocale,
     platform: buildOptions.platform === 'server' ? PLATFORM.Server : PLATFORM.Browser,
     missingTranslation: buildOptions.i18nMissingTranslation,
@@ -75,7 +82,11 @@ export function getNonAotConfig(wco: WebpackConfigOptions, host: virtualFs.Host<
   };
 }
 
-export function getAotConfig(wco: WebpackConfigOptions, host: virtualFs.Host<Stats>) {
+export function getAotConfig(
+  wco: WebpackConfigOptions,
+  host: virtualFs.Host<Stats>,
+  extract = false
+) {
   const { tsConfigPath, buildOptions } = wco;
 
   const loaders: any[] = [webpackLoader];
@@ -90,7 +101,7 @@ export function getAotConfig(wco: WebpackConfigOptions, host: virtualFs.Host<Sta
 
   return {
     module: { rules: [{ test, use: loaders }] },
-    plugins: [_createAotPlugin(wco, { tsConfigPath }, host)]
+    plugins: [_createAotPlugin(wco, { tsConfigPath }, host, true, extract)]
   };
 }
 

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/utils.ts

@@ -3,7 +3,7 @@
 
 import * as path from 'path';
 import { basename, normalize } from '@angular-devkit/core';
-import { ExtraEntryPoint } from '../../../browser';
+import { ExtraEntryPoint, ExtraEntryPointObject } from '../../../browser/schema';
 
 export const ngAppResolve = (resolvePath: string): string => {
   return path.resolve(process.cwd(), resolvePath);
@@ -61,14 +61,34 @@ export function getOutputHashFormat(option: string, length = 20): HashFormat {
   return hashFormats[option] || hashFormats['none'];
 }
 
-export function computeBundleName(entry: ExtraEntryPoint, defaultName: string){
-  if (entry.bundleName) {
-    return entry.bundleName;
-  } else if (entry.lazy) {
-      return basename(
-        normalize(entry.input.replace(/\.(js|css|scss|sass|less|styl)$/i, '')),
-        );
+export type NormalizedEntryPoint = ExtraEntryPointObject & { bundleName: string };
+
+export function normalizeExtraEntryPoints(
+  extraEntryPoints: ExtraEntryPoint[],
+  defaultBundleName: string
+): NormalizedEntryPoint[] {
+  return extraEntryPoints.map(entry => {
+    let normalizedEntry;
+
+    if (typeof entry === 'string') {
+      normalizedEntry = { input: entry, lazy: false, bundleName: defaultBundleName };
     } else {
-    return defaultName;
-  }
+      let bundleName;
+
+      if (entry.bundleName) {
+        bundleName = entry.bundleName;
+      } else if (entry.lazy) {
+        // Lazy entry points use the file name as bundle name.
+        bundleName = basename(
+          normalize(entry.input.replace(/\.(js|css|scss|sass|less|styl)$/i, '')),
+        );
+      } else {
+        bundleName = defaultBundleName;
+      }
+
+      normalizedEntry = {...entry, bundleName};
+    }
+
+    return normalizedEntry;
+  })
 }

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/bundle-budget.ts

@@ -9,7 +9,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { Budget, Size, calculateBytes, calculateSizes } from '../utilities/bundle-calculator';
+import { Size, calculateBytes, calculateSizes } from '../utilities/bundle-calculator';
+import { Budget } from '../../browser/schema';
 import { formatSize } from '../utilities/stats';
 
 interface Thresholds {

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma.ts

@@ -7,7 +7,7 @@ import * as glob from 'glob';
 import * as webpack from 'webpack';
 const webpackDevMiddleware = require('webpack-dev-middleware');
 
-import { AssetPattern } from '../../browser';
+import { AssetPattern } from '../../browser/schema';
 import { KarmaWebpackFailureCb } from './karma-webpack-failure-cb';
 
 /**

packages/angular_devkit/build_angular/src/angular-cli-files/utilities/bundle-calculator.ts

@@ -8,46 +8,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-export type BudgetType = 'all' | 'allScript' | 'any' | 'anyScript' | 'bundle' | 'initial';
-
-export interface Budget {
-  /**
-   * The type of budget
-   */
-  type: BudgetType;
-  /**
-   * The name of the bundle
-   */
-  name?: string;
-  /**
-   * The baseline size for comparison.
-   */
-  baseline?: string;
-  /**
-   * The maximum threshold for warning relative to the baseline.
-   */
-  maximumWarning?: string;
-  /**
-   * The maximum threshold for error relative to the baseline.
-   */
-  maximumError?: string;
-  /**
-   * The minimum threshold for warning relative to the baseline.
-   */
-  minimumWarning?: string;
-  /**
-   * The minimum threshold for error relative to the baseline.
-   */
-  minimumError?: string;
-  /**
-   * The threshold for warning relative to the baseline (min & max).
-   */
-  warning?: string;
-  /**
-   * The threshold for error relative to the baseline (min & max).
-   */
-  error?: string;
-}
+import { Budget } from '../../browser/schema';
 
 export interface Compilation {
   assets: any;

packages/angular_devkit/build_angular/src/angular-cli-files/utilities/package-chunk-sort.ts

@@ -1,20 +1,20 @@
 // tslint:disable
 // TODO: cleanup this file, it's copied as is from Angular CLI.
 
-import { ExtraEntryPoint } from '../../browser';
-import { computeBundleName } from '../models/webpack-configs/utils';
+import { ExtraEntryPoint } from '../../browser/schema';
+import { normalizeExtraEntryPoints } from '../models/webpack-configs/utils';
 
 export function generateEntryPoints(appConfig: any) {
   let entryPoints = ['polyfills', 'sw-register'];
 
   // Add all styles/scripts, except lazy-loaded ones.
   [
-    ...(appConfig.styles as ExtraEntryPoint[])
+    ...normalizeExtraEntryPoints(appConfig.styles as ExtraEntryPoint[], 'styles')
       .filter(entry => !entry.lazy)
-      .map(entry => computeBundleName(entry, 'styles')),
-    ...(appConfig.scripts as ExtraEntryPoint[])
+      .map(entry => entry.bundleName),
+    ...normalizeExtraEntryPoints(appConfig.scripts as ExtraEntryPoint[], 'scripts')
       .filter(entry => !entry.lazy)
-      .map(entry => computeBundleName(entry, 'scripts')),
+      .map(entry => entry.bundleName),
   ].forEach(bundleName => {
     if (entryPoints.indexOf(bundleName) === -1) {
       entryPoints.push(bundleName);