feat(@angular/cli): add environment option to global styles & scripts

closes #4288

Author: dzonatan

docs/documentation/stories/global-scripts.md

@@ -12,12 +12,17 @@ This is especially useful for legacy libraries or analytic snippets.
 ],
 ```
 
-You can also rename the output and lazy load it by using the object format:
+You can also use object format to do more advanced things:
+- `input` (required) - file path
+- `lazy` - flag to indicate if to lazy load it
+- `output` - the output bundle name
+- `env` - the environment to be included in
 
 ```json
 "scripts": [
   "global-script.js",
   { "input": "lazy-script.js", "lazy": true },
   { "input": "pre-rename-script.js", "output": "renamed-script" },
+  { "input": "production-script.js", "env": "prod" }
 ],
 ```

docs/documentation/stories/global-styles.md

@@ -16,14 +16,19 @@ These will be loaded exactly as if you had added them in a `<link>` tag inside `
 ],
 ```
 
-You can also rename the output and lazy load it by using the object format:
+You can also use object format to do more advanced things:
+- `input` (required) - file path
+- `lazy` - flag to indicate if to lazy load it
+- `output` - the output bundle name
+- `env` - the environment to be included in
 
 ```json
 "styles": [
   "styles.css",
   "more-styles.css",
   { "input": "lazy-style.scss", "lazy": true },
   { "input": "pre-rename-style.scss", "output": "renamed-style" },
+  { "input": "production-style.scss", "env": "prod" }
 ],
 ```
 

packages/@angular/cli/lib/config/schema.json

@@ -126,10 +126,26 @@
                   "type": "object",
                   "properties": {
                     "input": {
+                      "description": "The file path.",
+                      "type": "string"
+                    },
+                    "lazy": {
+                      "description": "Flag to indicate if it's lazy loaded.",
+                      "type": "boolean"
+                    },
+                    "output": {
+                      "description": "The output bundle name.",
+                      "type": "string"
+                    },
+                    "env": {
+                      "description": "The environment to be included in.",
                       "type": "string"
                     }
                   },
-                  "additionalProperties": true
+                  "additionalProperties": true,
+                  "required": [
+                    "input"
+                  ]
                 }
               ]
             },
@@ -162,6 +178,19 @@
                   "type": "object",
                   "properties": {
                     "input": {
+                      "description": "The file path.",
+                      "type": "string"
+                    },
+                    "lazy": {
+                      "description": "Flag to indicate if it's lazy loaded.",
+                      "type": "boolean"
+                    },
+                    "output": {
+                      "description": "The output bundle name.",
+                      "type": "string"
+                    },
+                    "env": {
+                      "description": "The environment to be included in.",
                       "type": "string"
                     }
                   },

packages/@angular/cli/models/webpack-configs/browser.ts

@@ -18,8 +18,8 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
 
   // figure out which are the lazy loaded entry points
   const lazyChunks = lazyChunksFilter([
-    ...extraEntryParser(appConfig.scripts, appRoot, 'scripts'),
-    ...extraEntryParser(appConfig.styles, appRoot, 'styles')
+    ...extraEntryParser(appConfig.scripts, appRoot, 'scripts', buildOptions.environment),
+    ...extraEntryParser(appConfig.styles, appRoot, 'styles', buildOptions.environment)
   ]);
 
   if (buildOptions.vendorChunk) {
@@ -35,7 +35,7 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
       new HtmlWebpackPlugin({
         template: path.resolve(appRoot, appConfig.index),
         filename: path.resolve(buildOptions.outputPath, appConfig.index),
-        chunksSortMode: packageChunkSort(appConfig),
+        chunksSortMode: packageChunkSort(appConfig, buildOptions.environment),
         excludeChunks: lazyChunks,
         xhtml: true
       }),

packages/@angular/cli/models/webpack-configs/common.ts

@@ -42,7 +42,8 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
 
   // process global scripts
   if (appConfig.scripts.length > 0) {
-    const globalScripts = extraEntryParser(appConfig.scripts, appRoot, 'scripts');
+    const globalScripts = extraEntryParser(appConfig.scripts, appRoot, 'scripts',
+      buildOptions.environment);
 
     // add entry points and lazy chunks
     globalScripts.forEach(script => {

packages/@angular/cli/models/webpack-configs/styles.ts

@@ -99,7 +99,9 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
 
   // process global styles
   if (appConfig.styles.length > 0) {
-    const globalStyles = extraEntryParser(appConfig.styles, appRoot, 'styles');
+    const globalStyles = extraEntryParser(appConfig.styles, appRoot, 'styles',
+      buildOptions.environment);
+
     // add style entry points
     globalStyles.forEach(style =>
       entryPoints[style.entry]

packages/@angular/cli/models/webpack-configs/utils.ts

@@ -38,6 +38,7 @@ export interface ExtraEntry {
   lazy?: boolean;
   path?: string;
   entry?: string;
+  env?: string;
 }
 
 // Filter extra entries out of a arran of extraEntries
@@ -51,7 +52,8 @@ export function lazyChunksFilter(extraEntries: ExtraEntry[]) {
 export function extraEntryParser(
   extraEntries: (string | ExtraEntry)[],
   appRoot: string,
-  defaultEntry: string
+  defaultEntry: string,
+  environment: string
 ): ExtraEntry[] {
   return extraEntries
     .map((extraEntry: string | ExtraEntry) =>
@@ -66,7 +68,8 @@ export function extraEntryParser(
         extraEntry.entry = defaultEntry;
       }
       return extraEntry;
-    });
+    })
+    .filter(extraEntry => !extraEntry.env || extraEntry.env === environment);
 }
 
 export interface HashFormat {

packages/@angular/cli/plugins/karma.ts

@@ -119,7 +119,8 @@ const init: any = (config: any) => {
 
   // Add global scripts. This logic mimics the one in webpack-configs/common.
   if (appConfig.scripts && appConfig.scripts.length > 0) {
-    const globalScriptPatterns = extraEntryParser(appConfig.scripts, appRoot, 'scripts')
+    const globalScriptPatterns = extraEntryParser(appConfig.scripts, appRoot, 'scripts',
+      testConfig.environment)
       // Neither renamed nor lazy scripts are currently supported
       .filter(script => !(script.output || script.lazy))
       .map(script => ({ pattern: path.resolve(appRoot, script.input) }));

packages/@angular/cli/utilities/package-chunk-sort.ts

@@ -2,7 +2,7 @@ import { ExtraEntry, extraEntryParser } from '../models/webpack-configs/utils';
 
 // Sort chunks according to a predefined order:
 // inline, polyfills, all scripts, all styles, vendor, main
-export function packageChunkSort(appConfig: any) {
+export function packageChunkSort(appConfig: any, environment: string) {
   let entryPoints = ['inline', 'polyfills', 'sw-register'];
 
   const pushExtraEntries = (extraEntry: ExtraEntry) => {
@@ -12,11 +12,11 @@ export function packageChunkSort(appConfig: any) {
   };
 
   if (appConfig.scripts) {
-    extraEntryParser(appConfig.scripts, './', 'scripts').forEach(pushExtraEntries);
+    extraEntryParser(appConfig.scripts, './', 'scripts', environment).forEach(pushExtraEntries);
   }
 
   if (appConfig.styles) {
-    extraEntryParser(appConfig.styles, './', 'styles').forEach(pushExtraEntries);
+    extraEntryParser(appConfig.styles, './', 'styles', environment).forEach(pushExtraEntries);
   }
 
   entryPoints.push(...['vendor', 'main']);

tests/e2e/tests/build/scripts-array.ts

@@ -16,6 +16,8 @@ export default function () {
     'src/pre-rename-lazy-script.js': 'console.log(\'pre-rename-lazy-script\');',
     'src/common-entry-script.js': 'console.log(\'common-entry-script\');',
     'src/common-entry-style.css': '.common-entry-style { color: red }',
+    'src/development-script.js': 'console.log(\'development-script\');',
+    'src/production-script.js': 'console.log(\'production-script\');',
   })
     .then(() => appendToFile('src/main.ts', 'import \'./string-script.js\';'))
     .then(() => updateJsonFile('.angular-cli.json', configJson => {
@@ -26,7 +28,9 @@ export default function () {
         { input: 'lazy-script.js', lazy: true },
         { input: 'pre-rename-script.js', output: 'renamed-script' },
         { input: 'pre-rename-lazy-script.js', output: 'renamed-lazy-script', lazy: true },
-        { input: 'common-entry-script.js', output: 'common-entry' }
+        { input: 'common-entry-script.js', output: 'common-entry' },
+        { input: 'development-script.js', output: 'development-script', env: 'dev' },
+        { input: 'production-script.js', output: 'production-script', env: 'prod' },
       ];
       app['styles'] = [{ input: 'common-entry-style.css', output: 'common-entry' }];
     }))
@@ -39,6 +43,7 @@ export default function () {
     .then(() => expectFileToMatch('dist/renamed-lazy-script.bundle.js', 'pre-rename-lazy-script'))
     .then(() => expectFileToMatch('dist/common-entry.bundle.js', 'common-entry-script'))
     .then(() => expectFileToMatch('dist/common-entry.bundle.css', '.common-entry-style'))
+    .then(() => expectFileToMatch('dist/development-script.bundle.js', 'development-script'))
     // index.html lists the right bundles
     .then(() => expectFileToMatch('dist/index.html', oneLineTrim`
       <link href="common-entry.bundle.css" rel="stylesheet"/>
@@ -49,6 +54,7 @@ export default function () {
       <script type="text/javascript" src="scripts.bundle.js"></script>
       <script type="text/javascript" src="renamed-script.bundle.js"></script>
       <script type="text/javascript" src="common-entry.bundle.js"></script>
+      <script type="text/javascript" src="development-script.bundle.js"></script>
       <script type="text/javascript" src="vendor.bundle.js"></script>
       <script type="text/javascript" src="main.bundle.js"></script>
     `))

tests/e2e/tests/build/styles/styles-array.ts

@@ -15,7 +15,9 @@ export default function () {
     'src/pre-rename-style.css': '.pre-rename-style { color: red }',
     'src/pre-rename-lazy-style.css': '.pre-rename-lazy-style { color: red }',
     'src/common-entry-style.css': '.common-entry-style { color: red }',
-    'src/common-entry-script.js': 'console.log(\'common-entry-script\');'
+    'src/common-entry-script.js': 'console.log(\'common-entry-script\');',
+    'src/development-style.css': '.environment-style { color: blue }',
+    'src/production-style.css': '.environment-style { color: green }',
   })
     .then(() => updateJsonFile('.angular-cli.json', configJson => {
       const app = configJson['apps'][0];
@@ -25,7 +27,9 @@ export default function () {
         { input: 'lazy-style.css', lazy: true },
         { input: 'pre-rename-style.css', output: 'renamed-style' },
         { input: 'pre-rename-lazy-style.css', output: 'renamed-lazy-style', lazy: true },
-        { input: 'common-entry-style.css', output: 'common-entry' }
+        { input: 'common-entry-style.css', output: 'common-entry' },
+        { input: 'development-style.css', output: 'development-style', env: 'dev' },
+        { input: 'production-style.css', output: 'production-style', env: 'prod' },
       ];
       app['scripts'] = [{ input: 'common-entry-script.js', output: 'common-entry' }];
     }))
@@ -38,11 +42,13 @@ export default function () {
     .then(() => expectFileToMatch('dist/renamed-lazy-style.bundle.css', '.pre-rename-lazy-style'))
     .then(() => expectFileToMatch('dist/common-entry.bundle.css', '.common-entry-style'))
     .then(() => expectFileToMatch('dist/common-entry.bundle.js', 'common-entry-script'))
+    .then(() => expectFileToMatch('dist/development-style.bundle.css', '.environment-style'))
     // index.html lists the right bundles
     .then(() => expectFileToMatch('dist/index.html', oneLineTrim`
       <link href="common-entry.bundle.css" rel="stylesheet"/>
       <link href="styles.bundle.css" rel="stylesheet"/>
       <link href="renamed-style.bundle.css" rel="stylesheet"/>
+      <link href="development-style.bundle.css" rel="stylesheet"/>
     `))
     .then(() => expectFileToMatch('dist/index.html', oneLineTrim`
       <script type="text/javascript" src="inline.bundle.js"></script>