Open josephserrano15 opened 6 years ago
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.
https://github.com/Promact/md2/blob/a3ca00d5b41f592d0d3c9eede2e403ccde21dcb6/src/lib/core/compatibility/compatibility.ts#L3
howerver, It is by design (seems to be).
For those who need help.
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.
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,
MatFormFieldModule
, MatInputModule
(both) to your module.matInput
directive, NOT mdInput
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.
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?