feat(@angular/cli): followup changes to circular dependency detection

Flag is now positive instead of negative and shorter, and can now be set on commands as well (`--show-circular-dependencies`).

Dependency was also added to eject as per #6813 (comment).

Author: filipesilva

docs/documentation/angular-cli.md

@@ -23,7 +23,7 @@
   - *testTsconfig* (`string`): The name of the TypeScript configuration file for unit tests.
   - *prefix* (`string`): The prefix to apply to generated selectors.
   - *serviceWorker* (`boolean`): Experimental support for a service worker from @angular/service-worker. Default is `false`.
-  - *hideCircularDependencyWarnings* (`boolean`): Hide circular dependency warnings on builds. Default is `false`.
+  - *showCircularDependencies* (`boolean`): Show circular dependency warnings on builds. Default is `true`.
   - *styles* (`string|array`): Global styles to be included in the build.
   - *stylePreprocessorOptions* : Options to pass to style preprocessors.
     - *includePaths* (`array`): Paths to include. Paths will be resolved to project root.

docs/documentation/build.md

@@ -312,3 +312,13 @@ Note: service worker support is experimental and subject to change.
     Run build when files change.
   </p>
 </details>
+
+<details>
+  <summary>show-circular-dependencies</summary>
+  <p>
+    <code>--show-circular-dependencies</code> (aliases: <code>-scd</code>)
+  </p>
+  <p>
+    Show circular dependency warnings on builds.
+  </p>
+</details>

packages/@angular/cli/commands/build.ts

@@ -138,6 +138,12 @@ export const baseBuildCommandOptions: any = [
     type: Boolean,
     default: true,
     description: 'Extract all licenses in a separate file, in the case of production builds only.'
+  },
+  {
+    name: 'show-circular-dependencies',
+    type: Boolean,
+    aliases: ['scd'],
+    description: 'Show circular dependency warnings on builds.'
   }
 ];
 

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

@@ -118,10 +118,10 @@
             "type": "boolean",
             "default": false
           },
-          "hideCircularDependencyWarnings": {
-            "description": "Hide circular dependency warnings on builds.",
+          "showCircularDependencies": {
+            "description": "Show circular dependency warnings on builds.",
             "type": "boolean",
-            "default": false
+            "default": true
           },
           "styles": {
             "description": "Global styles to be included in the build.",

packages/@angular/cli/models/build-options.ts

@@ -20,4 +20,5 @@ export interface BuildOptions {
   deleteOutputPath?: boolean;
   preserveSymlinks?: boolean;
   extractLicenses?: boolean;
+  showCircularDependencies?: boolean;
 }

packages/@angular/cli/models/webpack-config.ts

@@ -98,7 +98,8 @@ export class NgCliWebpackConfig {
     const mergeableOptions = {
       outputPath: appConfig.outDir,
       deployUrl: appConfig.deployUrl,
-      baseHref: appConfig.baseHref
+      baseHref: appConfig.baseHref,
+      showCircularDependencies: appConfig.showCircularDependencies
     };
 
     return Object.assign({}, mergeableOptions, buildOptions);

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

@@ -73,7 +73,7 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     }));
   }
 
-  if (!appConfig.hideCircularDependencyWarnings) {
+  if (buildOptions.showCircularDependencies) {
     extraPlugins.push(new CircularDependencyPlugin({
       exclude: /(\\|\/)node_modules(\\|\/)/
     }));

packages/@angular/cli/tasks/eject.ts

@@ -513,6 +513,7 @@ export default Task.extend({
           'style-loader',
           'stylus-loader',
           'url-loader',
+          'circular-dependency-plugin',
         ].forEach((packageName: string) => {
           packageJson['devDependencies'][packageName] = ourPackageJson['dependencies'][packageName];
         });

tests/e2e/tests/misc/circular-dependency.ts

@@ -5,12 +5,12 @@ import { ng } from '../../utils/process';
 export default async function () {
   await prependToFile('src/app/app.component.ts',
     `import { AppModule } from './app.module'; console.log(AppModule);`);
-  let output = await ng('build');
+  let output = await ng('build', '--show-circular-dependencies');
   if (!output.stdout.match(/WARNING in Circular dependency detected/)) {
     throw new Error('Expected to have circular dependency warning in output.');
   }
 
-  await ng('set', 'apps.0.hideCircularDependencyWarnings=true');
+  await ng('set', 'apps.0.showCircularDependencies=false');
   output = await ng('build');
   if (output.stdout.match(/WARNING in Circular dependency detected/)) {
     throw new Error('Expected to not have circular dependency warning in output.');