Issue with latest Angular2 material

Bug, feature request, or proposal:

Md2 is not compatible with the angular material

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/rQmUz8WYRh5Vz4gwY8E4?p=info

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, MD2, OS, browsers are affected?

Is there anything else we should know?

I think that is for the "md" prefixes deprecation and the compatibility mode
https://github.com/angular/material2/blob/master/CHANGELOG.md#deprecation-of-md-prefix

After upgrading to material 2.0.0-beta.12 I'm getting the following exception originating from md2/core/compatibility/compatibility.js:

The "mat-" prefix cannot be used in ng-material v1 compatibility mode. It was used on an "mat-toolbar" element.

Seems that not all module are affected. I end-up importing the one I needed instead of Md2, and it works fine again. Not sure which features is breaking it.

I'm having a similar Issue, but with MD2 Datepicker. Even when I only import the Md2DatepickerModule it still throws an Error "MD_DATE_FORMATS". Using Material 2.0.0-beta.12 and Angular 4.4.4.

Edit, 4 days later: I found the solution to this specific problem was to import the MdNativeDateModule:

import { Md2DatepickerModule, MdNativeDateModule } from 'md2';

...

@NgModule({
    imports: [
        Md2DatepickerModule,
        MdNativeDateModule,
        ...

Same probleme here. I'm using Material beta.12 and Angular 4.4.4 and I get the error

The "mat-" prefix cannot be used in ng-material v1 compatibility mode.

I completely removed the Md2 package to solve the issue.

me too. Using Material 2.0.0-beta.12 and Angular 4.4.4.

It's seems that MATERIAL_COMPATIBILITY_MODE leads this. code as following.

md2/src/lib/core/compatibility/compatibility.ts

Line 3 in a3ca00d

    
           export const MATERIAL_COMPATIBILITY_MODE = new InjectionToken<boolean>('md-compatibility-mode');

md2/src/lib/core/compatibility/compatibility.ts

Line 147 in a3ca00d

    
           throw getMdCompatibilityInvalidPrefixError('mat', elementRef.nativeElement.nodeName);

howerver, It is by design (seems to be).

For those who need help.

After Material 2.0.0-beta.12 , md- prefix is totally replaced with mat-, you have to use all directive
with mat-prefix selector. replace all md selector to mat selector. inluding mdLine, md-rise-button and so on.

but md2 told you that The "mat-" prefix cannot be used in ng-material v1 compatibility mode.

So if you wanna to keep using md2, import NoConflictStyleCompatibilityMode

@NgModule({
  imports: [
    // ... 
    Md2Module,
    NoConflictStyleCompatibilityMode  // from 'md2'
  ]
}

or

@NgModule({
  providers: [{
    provide: MATERIAL_COMPATIBILITY_MODE, useValue: true,
  }],
})

@MienDev It work thank you

The best way would be to remove the complete compatibility part, as they have done it in material.

Is anyone having issues with the latest Angular Material with this enabled? I can't get floating placeholders to work, and I suspect it may be that compatibility mode might be the culprit

@michaelreiser I don't think MATERIAL_COMPATIBILITY_MODE could lead your problem.

You can provide more information, such as code segment including matInput, for investigation.

I can't get floating placeholders to work

As a reminder, you can check the list following,

Import MatFormFieldModule, MatInputModule (both) to your module.
Use matInput directive, NOT mdInput
Use mat-form-field as container, NOT md-input-container , NOR mat-input-container

May this help.

@MienDev
Both modules are imported. Here are two code examples:

      <mat-form-field>
        <input matInput placeholder="INC" formControlName="reference_id" />
      </mat-form-field>

And

    <mat-form-field class="full-width">
      <textarea matInput mat-autosize placeholder="Workaround (Optional)" formControlName="workaround" #workaround></textarea>
    </mat-form-field>

I tried using both the placeholder property and the <mat-placeholder> element approaches. I'll dig deeper into the code. Maybe I missed something else. I just wanted to be sure that compatibility mode wasn't the culprit, since everything else seems to be accounted for.

UPDATE - I had a custom CSS file that was causing the issue. I no longer have the problem.