feat(@angular/cli): add circular dependency detection

Circular dependencies, like `app.module.ts` importing `app.component.ts` which in turn imports `app.module.ts`, now display a warning during builds:

```
kamik@T460p MINGW64 /d/sandbox/master-project (master)
$ ng build
Hash: 3516b252f4e32d6c5bb8
Time: 8693ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 5.95 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.88 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

WARNING in Circular dependency detected:
src\app\app.module.ts -> src\app\app.component.ts -> src\app\app.module.ts

WARNING in Circular dependency detected:
src\app\app.component.ts -> src\app\app.module.ts -> src\app\app.component.ts
```

It is important to detect and eliminate circular dependencies because leaving them in might lead to `Maximum call stack size exceeded` errors, or imports being `undefined` at runtime.

To remove these warnings from your project you can factor out the circular dependency into a separate module.

For instance, if module A imports `foo` from module B, and module B imports `bar` from module A, it is enough to extract `foo` into module C.

Fix angular#6309
Fix angular#6739

Author: filipesilva

package.json

@@ -42,6 +42,7 @@
   "dependencies": {
     "autoprefixer": "^6.5.3",
     "chalk": "^1.1.3",
+    "circular-dependency-plugin": "^3.0.0",
     "common-tags": "^1.3.1",
     "css-loader": "^0.28.1",
     "cssnano": "^3.10.0",

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

@@ -5,6 +5,7 @@ import { extraEntryParser, getOutputHashFormat } from './utils';
 import { WebpackConfigOptions } from '../webpack-config';
 
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
+const CircularDependencyPlugin = require('circular-dependency-plugin');
 
 
 /**
@@ -102,7 +103,10 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
       ].concat(extraRules)
     },
     plugins: [
-      new webpack.NoEmitOnErrorsPlugin()
+      new webpack.NoEmitOnErrorsPlugin(),
+      new CircularDependencyPlugin({
+        exclude: /(\\|\/)node_modules(\\|\/)/
+      })
     ].concat(extraPlugins),
     node: {
       fs: 'empty',

packages/@angular/cli/package.json

@@ -31,6 +31,7 @@
     "@ngtools/webpack": "1.5.0-rc.1",
     "autoprefixer": "^6.5.3",
     "chalk": "^1.1.3",
+    "circular-dependency-plugin": "^3.0.0",
     "common-tags": "^1.3.1",
     "css-loader": "^0.28.1",
     "cssnano": "^3.10.0",

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

@@ -0,0 +1,12 @@
+import { prependToFile } from '../../utils/fs';
+import { ng } from '../../utils/process';
+
+
+export default async function () {
+  await prependToFile('src/app/app.component.ts',
+    `import { AppModule } from './app.module'; console.log(AppModule);`);
+  const output = await ng('build');
+  if (!output.stdout.match(/WARNING in Circular dependency detected/)) {
+    throw new Error('Expected to have circular dependency warning in output.');
+  }
+}