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

megetron · 2017-10-08T18:16:25Z

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.

jotatoledo · 2017-10-09T08:35:54Z

Please use the issue template and add your locally installed versions

megetron · 2017-10-09T09:24:17Z

@jotatoledo , done.

jotatoledo · 2017-10-09T10:02:23Z

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

megetron · 2017-10-09T23:11:37Z

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

bourse-a · 2017-10-10T17:47:42Z

I have same problem, do you find a solution ?

jatkeshave · 2017-10-10T20:18:54Z

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

lakinmohapatra · 2017-10-11T08:12:01Z

Covalent UI needs to be updated with latest material changes.

jotatoledo · 2017-10-11T09:39:55Z

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

bourse-a · 2017-10-11T11:07:50Z

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

MROALI · 2017-10-11T13:53:30Z

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

megetron · 2017-10-11T14:40:49Z

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!

jotatoledo · 2017-10-11T17:52:14Z

@megetron close

emoralesb05 · 2017-10-11T17:52:29Z

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

rijomonr · 2017-10-12T12:05:49Z

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

kyleledbetter · 2017-10-12T13:58:19Z

Read the thread rijomonr

bourse-a · 2017-10-12T14:31:12Z

Thanks for your awsers. My problem was due to Md2 package.
I link issue of this package Promact/md2#290 to help others.

MienDev · 2017-10-13T18:26:34Z

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
Promact/md2#290 (comment)

etonyali · 2017-11-15T19:56:37Z

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

emoralesb05 closed this as completed Oct 11, 2017

ghd8 mentioned this issue Oct 13, 2017

The "mat-" prefix cannot be used in ng-material v1 compatibility mode angular/components#7772

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

megetron commented Oct 8, 2017 •

edited

jotatoledo commented Oct 9, 2017

megetron commented Oct 9, 2017

jotatoledo commented Oct 9, 2017 •

edited

megetron commented Oct 9, 2017

bourse-a commented Oct 10, 2017

jatkeshave commented Oct 10, 2017 •

edited

lakinmohapatra commented Oct 11, 2017

jotatoledo commented Oct 11, 2017

bourse-a commented Oct 11, 2017

MROALI commented Oct 11, 2017

megetron commented Oct 11, 2017

jotatoledo commented Oct 11, 2017

emoralesb05 commented Oct 11, 2017

rijomonr commented Oct 12, 2017

kyleledbetter commented Oct 12, 2017

bourse-a commented Oct 12, 2017

MienDev commented Oct 13, 2017 •

edited

etonyali commented Nov 15, 2017 •

edited

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

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

Comments

megetron commented Oct 8, 2017 • edited

What is the expected behaviour?

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

jotatoledo commented Oct 9, 2017

megetron commented Oct 9, 2017

jotatoledo commented Oct 9, 2017 • edited

megetron commented Oct 9, 2017

bourse-a commented Oct 10, 2017

jatkeshave commented Oct 10, 2017 • edited

lakinmohapatra commented Oct 11, 2017

jotatoledo commented Oct 11, 2017

bourse-a commented Oct 11, 2017

MROALI commented Oct 11, 2017

megetron commented Oct 11, 2017

jotatoledo commented Oct 11, 2017

emoralesb05 commented Oct 11, 2017

rijomonr commented Oct 12, 2017

kyleledbetter commented Oct 12, 2017

bourse-a commented Oct 12, 2017

MienDev commented Oct 13, 2017 • edited

etonyali commented Nov 15, 2017 • edited

megetron commented Oct 8, 2017 •

edited

jotatoledo commented Oct 9, 2017 •

edited

jatkeshave commented Oct 10, 2017 •

edited

MienDev commented Oct 13, 2017 •

edited

etonyali commented Nov 15, 2017 •

edited