feat(common): Add dev-mode sanity check for mismatched versions of cdk and material (#15395)

Author: macjohnny

src/cdk/tsconfig-tests.json

@@ -15,6 +15,7 @@
   },
   "files": [
     "./testing/index.ts",
+    "./index.ts",
     "typings.d.ts"
   ],
   "angularCompilerOptions": {

src/material/core/BUILD.bazel

@@ -25,6 +25,7 @@ ng_module(
     ] + glob(["**/*.html"]),
     module_name = "@angular/material/core",
     deps = [
+        "//src/cdk",
         "//src/cdk/a11y",
         "//src/cdk/bidi",
         "//src/cdk/coercion",

src/material/core/common-behaviors/common-module.ts

@@ -6,9 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {NgModule, InjectionToken, Optional, Inject, isDevMode} from '@angular/core';
+import {NgModule, InjectionToken, Optional, Inject, isDevMode, Version} from '@angular/core';
 import {HammerLoader, HAMMER_LOADER} from '@angular/platform-browser';
 import {BidiModule} from '@angular/cdk/bidi';
+import {VERSION as CDK_VERSION} from '@angular/cdk';
+
+// Private version constant to circumvent test/build issues,
+// i.e. avoid core to depend on the @angular/material primary entry-point
+// Can be removed once the Material primary entry-point no longer
+// re-exports all secondary entry-points
+const VERSION = new Version('0.0.0-PLACEHOLDER');
 
 
 /** Injection token that configures whether the Material sanity checks are enabled. */
@@ -52,6 +59,7 @@ export class MatCommonModule {
     if (this._areChecksEnabled() && !this._hasDoneGlobalChecks) {
       this._checkDoctypeIsDefined();
       this._checkThemeIsPresent();
+      this._checkCdkVersionMatch();
       this._hasDoneGlobalChecks = true;
     }
   }
@@ -104,6 +112,17 @@ export class MatCommonModule {
     this._document.body.removeChild(testElement);
   }
 
+  /** Checks whether the material version matches the cdk version */
+  private _checkCdkVersionMatch(): void {
+    if (VERSION.full !== CDK_VERSION.full) {
+      console.warn(
+          'The Angular Material version (' + VERSION.full + ') does not match ' +
+          'the Angular CDK version (' + CDK_VERSION.full + ').\n' +
+          'Please ensure the versions of these two packages exactly match.'
+      );
+    }
+  }
+
   /** Checks whether HammerJS is available. */
   _checkHammerIsAvailable(): void {
     if (this._hasCheckedHammer || !this._window) {

src/material/tsconfig-build.json

@@ -13,6 +13,7 @@
       "../../dist/packages/material"
     ],
     "paths": {
+      "@angular/cdk": ["../../dist/packages/cdk"],
       "@angular/cdk/*": ["../../dist/packages/cdk/*"],
       "@angular/material/*": ["../../dist/packages/material/*"]
     }

src/material/tsconfig-tests.json

@@ -10,6 +10,7 @@
     "types": ["jasmine"],
     "paths": {
       "@angular/material/*": ["./*"],
+      "@angular/cdk": ["../../dist/packages/cdk"],
       "@angular/cdk/*": ["../../dist/packages/cdk/*"]
     }
   },

src/material/tsconfig.json

@@ -5,6 +5,7 @@
     "rootDir": "..",
     "baseUrl": ".",
     "paths": {
+      "@angular/cdk": ["../cdk"],
       "@angular/cdk/*": ["../cdk/*"],
       "@angular/material/*": ["./*"]
     }

src/universal-app/tsconfig-prerender.json

@@ -22,6 +22,7 @@
     "baseUrl": ".",
     "paths": {
       "@angular/material": ["./material"],
+      "@angular/cdk": ["./cdk"],
       "@angular/cdk/*": ["./cdk/*"],
       "@angular/material/*": ["./material/*"],
       "@angular/cdk-experimental": ["./cdk-experimental"],