chore: make compatibility mode work for apps with multiple modules

Author: jelbourn

src/lib/button-toggle/button-toggle.ts

@@ -23,7 +23,7 @@ import {Observable} from 'rxjs/Observable';
 import {
   MdUniqueSelectionDispatcher,
   coerceBooleanProperty,
-  DefaultStyleCompatibilityModeModule,
+  CompatibilityModule,
 } from '../core';
 
 
@@ -443,12 +443,12 @@ export class MdButtonToggle implements OnInit {
 
 
 @NgModule({
-  imports: [FormsModule, DefaultStyleCompatibilityModeModule],
+  imports: [FormsModule, CompatibilityModule],
   exports: [
     MdButtonToggleGroup,
     MdButtonToggleGroupMultiple,
     MdButtonToggle,
-    DefaultStyleCompatibilityModeModule,
+    CompatibilityModule,
   ],
   declarations: [MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle],
 })

src/lib/button/button.ts

@@ -10,7 +10,7 @@ import {
   ModuleWithProviders,
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {MdRippleModule, coerceBooleanProperty, DefaultStyleCompatibilityModeModule} from '../core';
+import {MdRippleModule, coerceBooleanProperty, CompatibilityModule} from '../core';
 
 
 // TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
@@ -158,8 +158,8 @@ export class MdAnchor extends MdButton {
 
 
 @NgModule({
-  imports: [CommonModule, MdRippleModule, DefaultStyleCompatibilityModeModule],
-  exports: [MdButton, MdAnchor, DefaultStyleCompatibilityModeModule],
+  imports: [CommonModule, MdRippleModule, CompatibilityModule],
+  exports: [MdButton, MdAnchor, CompatibilityModule],
   declarations: [MdButton, MdAnchor],
 })
 export class MdButtonModule {

src/lib/card/card.ts

@@ -6,7 +6,7 @@ import {
   ChangeDetectionStrategy,
   Directive
 } from '@angular/core';
-import {DefaultStyleCompatibilityModeModule} from '../core';
+import {CompatibilityModule} from '../core';
 
 
 /**
@@ -125,7 +125,7 @@ export class MdCardTitleGroup {}
 
 
 @NgModule({
-  imports: [DefaultStyleCompatibilityModeModule],
+  imports: [CompatibilityModule],
   exports: [
     MdCard,
     MdCardHeader,
@@ -135,7 +135,7 @@ export class MdCardTitleGroup {}
     MdCardSubtitle,
     MdCardActions,
     MdCardFooter,
-    DefaultStyleCompatibilityModeModule,
+    CompatibilityModule,
   ],
   declarations: [
     MdCard, MdCardHeader, MdCardTitleGroup, MdCardContent, MdCardTitle, MdCardSubtitle,

src/lib/checkbox/checkbox.ts

@@ -16,7 +16,7 @@ import {
 import {CommonModule} from '@angular/common';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 import {coerceBooleanProperty} from '../core/coersion/boolean-property';
-import {MdRippleModule, DefaultStyleCompatibilityModeModule} from '../core';
+import {MdRippleModule, CompatibilityModule} from '../core';
 
 
 /**
@@ -383,8 +383,8 @@ export class MdCheckbox implements ControlValueAccessor {
 
 
 @NgModule({
-  imports: [CommonModule, MdRippleModule, DefaultStyleCompatibilityModeModule],
-  exports: [MdCheckbox, DefaultStyleCompatibilityModeModule],
+  imports: [CommonModule, MdRippleModule, CompatibilityModule],
+  exports: [MdCheckbox, CompatibilityModule],
   declarations: [MdCheckbox],
 })
 export class MdCheckboxModule {

src/lib/core/compatibility/compatibility.spec.ts

@@ -1,7 +1,7 @@
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
 import {async, TestBed} from '@angular/core/testing';
 import {MdCheckboxModule} from '../../checkbox/checkbox';
-import {NoConflictStyleCompatibilityMode} from './no-conflict-mode';
+import {NoConflictStyleCompatibilityMode} from './compatibility';
 
 
 describe('Style compatibility', () => {
@@ -45,6 +45,26 @@ describe('Style compatibility', () => {
       }).toThrowError(/The "md-" prefix cannot be used in ng-material v1 compatibility mode/);
     });
   });
+
+  describe('with no-conflict mode at root and component module imported in app sub-module', () => {
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [TestAppSubModule, NoConflictStyleCompatibilityMode],
+      });
+
+      TestBed.compileComponents();
+    }));
+
+    it('should throw an error when using the "md-" prefix', () => {
+       expect(() => {
+        TestBed.createComponent(ComponentWithMdCheckbox);
+      }).toThrowError(/The "md-" prefix cannot be used in ng-material v1 compatibility mode/);
+    });
+
+    it('should not throw an error when using the "mat-" prefix', () => {
+      TestBed.createComponent(ComponentWithMatCheckbox);
+    });
+  });
 });
 
 
@@ -53,3 +73,11 @@ class ComponentWithMdCheckbox { }
 
 @Component({ template: `<mat-checkbox>Hungry</mat-checkbox>` })
 class ComponentWithMatCheckbox { }
+
+
+@NgModule({
+  imports: [MdCheckboxModule.forRoot()],
+  exports: [ComponentWithMdCheckbox, ComponentWithMatCheckbox],
+  declarations: [ComponentWithMdCheckbox, ComponentWithMatCheckbox],
+})
+export class TestAppSubModule {}

src/lib/core/compatibility/compatibility.ts

@@ -0,0 +1,149 @@
+import {
+  NgModule,
+  ModuleWithProviders,
+  Directive,
+  OpaqueToken,
+  Inject,
+  Optional,
+} from '@angular/core';
+
+
+export const MATERIAL_COMPATIBILITY_MODE = new OpaqueToken('md-compatibility-mode');
+
+/** Selector that matches all elements that may have style collisions with material1. */
+export const MAT_ELEMENTS_SELECTOR = `
+  mat-card,
+  mat-card-actions,
+  mat-card-content,
+  mat-card-footer,
+  mat-card-header,
+  mat-card-subtitle,
+  mat-card-title,
+  mat-card-title-group,
+  mat-checkbox,
+  mat-chip,
+  mat-dialog-container,
+  mat-divider,
+  mat-grid-list,
+  mat-grid-tile,
+  mat-grid-tile-footer,
+  mat-grid-tile-header,
+  mat-hint,
+  mat-icon,
+  mat-ink-bar,
+  mat-input,
+  mat-list,
+  mat-list-item,
+  mat-menu,
+  mat-nav-list,
+  mat-option,
+  mat-placeholder,
+  mat-progress-bar,
+  mat-progress-circle,
+  mat-radio-button,
+  mat-radio-group,
+  mat-select,
+  mat-sidenav,
+  mat-slider,
+  mat-spinner,
+  mat-tab,
+  mat-toolbar
+`;
+
+/** Selector that matches all elements that may have style collisions with material1. */
+export const MD_ELEMENTS_SELECTOR = `
+  md-card,
+  md-card-actions,
+  md-card-content,
+  md-card-footer,
+  md-card-header,
+  md-card-subtitle,
+  md-card-title,
+  md-card-title-group,
+  md-checkbox,
+  md-chip,
+  md-dialog-container,
+  md-divider,
+  md-grid-list,
+  md-grid-tile,
+  md-grid-tile-footer,
+  md-grid-tile-header,
+  md-hint,
+  md-icon,
+  md-ink-bar,
+  md-input,
+  md-list,
+  md-list-item,
+  md-menu,
+  md-nav-list,
+  md-option,
+  md-placeholder,
+  md-progress-bar,
+  md-progress-circle,
+  md-radio-button,
+  md-radio-group,
+  md-select,
+  md-sidenav,
+  md-slider,
+  md-spinner,
+  md-tab,
+  md-toolbar
+`;
+
+/** Directive that enforces that the `mat-` prefix cannot be used. */
+@Directive({selector: MAT_ELEMENTS_SELECTOR})
+export class MatPrefixEnforcer {
+  constructor(@Optional() @Inject(MATERIAL_COMPATIBILITY_MODE) isCompatibilityMode: boolean) {
+    if (!isCompatibilityMode) {
+      throw Error('The "mat-" prefix cannot be used out of ng-material v1 compatibility mode.');
+    }
+  }
+}
+
+/** Directive that enforces that the `md-` prefix cannot be used. */
+@Directive({selector: MD_ELEMENTS_SELECTOR})
+export class MdPrefixEnforcer {
+  constructor(@Optional() @Inject(MATERIAL_COMPATIBILITY_MODE) isCompatibilityMode: boolean) {
+    if (isCompatibilityMode) {
+      throw Error('The "md-" prefix cannot be used in ng-material v1 compatibility mode.');
+    }
+  }
+}
+
+
+/**
+ * Module that enforces the default compatibility mode settings. When this module is loaded
+ * without NoConflictStyleCompatibilityMode also being imported, it will throw an error if
+ * there are any uses of the `mat-` prefix.
+ */
+@NgModule({
+  declarations: [MatPrefixEnforcer, MdPrefixEnforcer],
+  exports: [MatPrefixEnforcer, MdPrefixEnforcer],
+})
+export class CompatibilityModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: CompatibilityModule,
+      providers: [],
+    };
+  }
+}
+
+
+/**
+ * Module that enforces "no-conflict" compatibility mode settings. When this module is loaded,
+ * it will throw an error if there are any uses of the `md-` prefix.
+ */
+@NgModule({
+  providers: [{
+    provide: MATERIAL_COMPATIBILITY_MODE, useValue: true,
+  }],
+})
+export class NoConflictStyleCompatibilityMode {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: NoConflictStyleCompatibilityMode,
+      providers: [],
+    };
+  }
+}