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

Created on 8 Oct 2017 · 18Comments · Source: Teradata/covalent

What is the expected behaviour?

Trying to integrate covalent's aitocomplete into a project using SystemJS and getting this:

ERROR Error: Uncaught (in promise): Error: The "mat-" prefix cannot be used in ng-material v1 compatibility mode. It was used on an "mat-form-field" element.
Error: The "mat-" prefix cannot be used in ng-material v1 compatibility mode. It was used on an "mat-form-field" element.

I did not Include the core and theme styles in my scss file yet (would like to see a default behaviour on app).

Which version of Angular and Material, and which browser and OS does this issue affect?

angular 4.1.0 material 2.0.0-beta.11

Did this work in previous versions of Angular / Material?
I am just a beginner with covalent so not sure about previous versions.

Source

megetron

👍2 👎1

Most helpful comment

For those who are using both md2 and material2 2.0.0 beta.12

Ensure that all md selector is replaced for material2, such as mdLine, md-rise-button and so on.
Import NoConflictStyleCompatibilityMode (from md2) as flowing.

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

For more infomation, refer to
https://github.com/Promact/md2/issues/290#issuecomment-336530401

MienDev on 13 Oct 2017

👍11 🎉3 ❤1

All 18 comments

Please use the issue template and add your locally installed versions

jotatoledo on 9 Oct 2017

@jotatoledo , done.

megetron on 9 Oct 2017

With material beta.11 you can use covalent beta.7, and beware that with those versions you cannot use mat-* anywhere in your templates. Apparently you did that somewhere and the error was triggered

jotatoledo on 9 Oct 2017

After update to a lower version "beta.7" searched all my project files for a "mat" keyword but found none..I get hard times to start using covalent components. just sending logs, do you have another guess what can go wrong here?

ERROR Error: Uncaught (in promise): Error: The "mat-" prefix cannot be used in ng-material v1 compatibility mode. It was used on an "mat-form-field" element.
Error: The "mat-" prefix cannot be used in ng-material v1 compatibility mode. It was used on an "mat-form-field" element.
    at getMdCompatibilityInvalidPrefixError (compatibility.ts:11)
    at new MatPrefixRejector (compatibility.ts:28)
    at createClass (provider.ts:365)
    at createDirectiveInstance (provider.ts:182)
    at createViewNodes (view.ts:354)
    at callViewAction (view.ts:797)
    at execComponentViewsAction (view.ts:715)
    at createViewNodes (view.ts:382)
    at callViewAction (view.ts:797)
    at execComponentViewsAction (view.ts:715)
    at getMdCompatibilityInvalidPrefixError (compatibility.ts:11)
    at new MatPrefixRejector (compatibility.ts:28)
    at createClass (provider.ts:365)
    at createDirectiveInstance (provider.ts:182)
    at createViewNodes (view.ts:354)
    at callViewAction (view.ts:797)
    at execComponentViewsAction (view.ts:715)
    at createViewNodes (view.ts:382)
    at callViewAction (view.ts:797)
    at execComponentViewsAction (view.ts:715)
    at resolvePromise (zone.js?1507590660744:824)
    at resolvePromise (zone.js?1507590660744:795)
    at zone.js?1507590660744:873
    at ZoneDelegate.invokeTask (zone.js?1507590660744:425)
    at Object.onInvokeTask (ng_zone.ts:288)
    at ZoneDelegate.invokeTask (zone.js?1507590660744:424)
    at Zone.runTask (zone.js?1507590660744:192)
    at drainMicroTaskQueue (zone.js?1507590660744:602)
    at ZoneTask.invokeTask [as invoke] (zone.js?1507590660744:503)
    at invokeTask (zone.js?1507590660744:1540)
    at ____________________Elapsed_28_ms__At__Tue_Oct_10_2017_02_11_05_GMT_0300__IDT_ ()
    at Object.onScheduleTask (long-stack-trace-zone.js?1507590660745:109)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Object.onScheduleTask (zone.js?1507590660744:301)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Zone.scheduleTask (zone.js?1507590660744:236)
    at Zone.scheduleMicroTask (zone.js?1507590660744:256)
    at scheduleResolveOrReject (zone.js?1507590660744:871)
    at resolvePromise (zone.js?1507590660744:819)
    at ____________________Elapsed_0_ms__At__Tue_Oct_10_2017_02_11_05_GMT_0300__IDT_ ()
    at Object.onScheduleTask (long-stack-trace-zone.js?1507590660745:109)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Object.onScheduleTask (zone.js?1507590660744:301)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Zone.scheduleTask (zone.js?1507590660744:236)
    at Zone.scheduleMicroTask (zone.js?1507590660744:256)
    at scheduleResolveOrReject (zone.js?1507590660744:871)
    at resolvePromise (zone.js?1507590660744:819)
    at ____________________Elapsed_2_ms__At__Tue_Oct_10_2017_02_11_05_GMT_0300__IDT_ ()
    at Object.onScheduleTask (long-stack-trace-zone.js?1507590660745:109)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Object.onScheduleTask (zone.js?1507590660744:301)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Zone.scheduleTask (zone.js?1507590660744:236)
    at Zone.scheduleMicroTask (zone.js?1507590660744:256)
    at scheduleResolveOrReject (zone.js?1507590660744:871)
    at resolvePromise (zone.js?1507590660744:819)
    at ____________________Elapsed_1_ms__At__Tue_Oct_10_2017_02_11_05_GMT_0300__IDT_ ()
    at Object.onScheduleTask (long-stack-trace-zone.js?1507590660745:109)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Object.onScheduleTask (zone.js?1507590660744:301)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Zone.scheduleTask (zone.js?1507590660744:236)
    at Zone.scheduleMicroTask (zone.js?1507590660744:256)
    at scheduleResolveOrReject (zone.js?1507590660744:871)
    at ZoneAwarePromise.then (zone.js?1507590660744:981)
    at ____________________Elapsed_70_ms__At__Tue_Oct_10_2017_02_11_04_GMT_0300__IDT_ ()
    at Object.onScheduleTask (long-stack-trace-zone.js?1507590660745:109)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Object.onScheduleTask (zone.js?1507590660744:301)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Zone.scheduleTask (zone.js?1507590660744:236)
    at Zone.scheduleMicroTask (zone.js?1507590660744:256)
    at scheduleResolveOrReject (zone.js?1507590660744:871)
    at ZoneAwarePromise.then (zone.js?1507590660744:981)
    at ____________________Elapsed_30_ms__At__Tue_Oct_10_2017_02_11_04_GMT_0300__IDT_ ()
    at Object.onScheduleTask (long-stack-trace-zone.js?1507590660745:109)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Object.onScheduleTask (zone.js?1507590660744:301)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Zone.scheduleTask (zone.js?1507590660744:236)
    at Zone.scheduleMicroTask (zone.js?1507590660744:256)
    at scheduleResolveOrReject (zone.js?1507590660744:871)
    at resolvePromise (zone.js?1507590660744:819)
    at ____________________Elapsed_0_ms__At__Tue_Oct_10_2017_02_11_04_GMT_0300__IDT_ ()
    at Object.onScheduleTask (long-stack-trace-zone.js?1507590660745:109)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Object.onScheduleTask (zone.js?1507590660744:301)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Zone.scheduleTask (zone.js?1507590660744:236)
    at Zone.scheduleMicroTask (zone.js?1507590660744:256)
    at scheduleResolveOrReject (zone.js?1507590660744:871)
    at resolvePromise (zone.js?1507590660744:819)
    at ____________________Elapsed_0_ms__At__Tue_Oct_10_2017_02_11_04_GMT_0300__IDT_ ()
    at Object.onScheduleTask (long-stack-trace-zone.js?1507590660745:109)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Object.onScheduleTask (zone.js?1507590660744:301)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Zone.scheduleTask (zone.js?1507590660744:236)
    at Zone.scheduleMicroTask (zone.js?1507590660744:256)
    at scheduleResolveOrReject (zone.js?1507590660744:871)
    at resolvePromise (zone.js?1507590660744:819)
    at ____________________Elapsed_1_ms__At__Tue_Oct_10_2017_02_11_04_GMT_0300__IDT_ ()
    at Object.onScheduleTask (long-stack-trace-zone.js?1507590660745:109)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Object.onScheduleTask (zone.js?1507590660744:301)
    at ZoneDelegate.scheduleTask (zone.js?1507590660744:405)
    at Zone.scheduleTask (zone.js?1507590660744:236)
    at Zone.scheduleMicroTask (zone.js?1507590660744:256)
    at scheduleResolveOrReject (zone.js?1507590660744:871)
    at ZoneAwarePromise.then (zone.js?1507590660744:981)
defaultErrorLogger @ errors.ts:42

megetron on 10 Oct 2017

I have same problem, do you find a solution ?

bourse-a on 10 Oct 2017

use compatibility module if you still want to use md- prefix like this
import { CompatibilityModule } from '@angular/material';
and import it in app module

if you want to use new mat- prefix which is good you can use NoConflictStyleCompatibilityMode like this
import {NoConflictStyleCompatibilityMode} from '@angular/material';

found this when i was check for changes in source, they should mention this somewhere

jatkeshave on 10 Oct 2017

👍7 ❤1 🎉1 😄1

Covalent UI needs to be updated with latest material changes.

lakinmohapatra on 11 Oct 2017

👎1

It was already updated, read the changelogs from both material and covalent

jotatoledo on 11 Oct 2017

I only use mat- prefix and i still have this error, even with NoConflictStyleCompatibilityMode.
I have used angular-material-prefix-updater

bourse-a on 11 Oct 2017

search your code for md- and replace it with mat- . I think there still in your code some component referenced by md-

MROALI on 11 Oct 2017

Thanks @jatkeshave, the NoConflictStyleCompatibilityMode thing solved the issue for me.
FYI, In my application I did a search for both "md-" and "mat-" but couldn't find any matches.

so as @MROALI suggested probably some of other external components the app imported had these prefixes.

Thanks again for you quick response! very helpful!

megetron on 11 Oct 2017

@megetron close

jotatoledo on 11 Oct 2017

Closing this since now everything is using mat with material beta.12 and covalent beta.8-1.. so there shouldnt be any issues going forward.

NOTE: searching for md- will not find anything since there are md camel case inputs

emoralesb05 on 11 Oct 2017

I/m facing the same issue @angular/cli: 1.4.4 node: 6.11.2 os: win32 ia32 @angular/animations: 4.4.4 @angular/cdk: 2.0.0-beta.11 @angular/common: 4.4.4 @angular/compiler: 4.4.4 @angular/core: 4.4.4 @angular/forms: 4.4.4 @angular/http: 4.4.4 @angular/material: 2.0.0-beta.11 @angular/platform-browser: 4.4.4 @angular/platform-browser-dynamic: 4.4.4 @angular/router: 4.4.4 @angular/cli: 1.4.4 @angular/compiler-cli: 4.4.4 @angular/language-service: 4.4.4 typescript: 2.3.4

rijomonr on 12 Oct 2017

Read the thread rijomonr

kyleledbetter on 12 Oct 2017

Thanks for your awsers. My problem was due to Md2 package.
I link issue of this package https://github.com/Promact/md2/issues/290 to help others.

bourse-a on 12 Oct 2017

For those who are using both md2 and material2 2.0.0 beta.12

Ensure that all md selector is replaced for material2, such as mdLine, md-rise-button and so on.
Import NoConflictStyleCompatibilityMode (from md2) as flowing.

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

For more infomation, refer to
https://github.com/Promact/md2/issues/290#issuecomment-336530401

MienDev on 13 Oct 2017

👍11 🎉3 ❤1

Adding
import {NoConflictStyleCompatibilityMode} from '@angular/material';
into app.module.ts
and NoConflictStyleCompatibilityMode to imports fix the issue. Thanks!