mat- prefix error

[vicochips]

Hello, I looked everywhere for an answer but every fix didn't work. I have done the fix to convert md to mat and I added:

MATERIAL_COMPATIBILITY_MODE, useValue: true

and NoConflictStyleCompatibilityMode,

Bug, feature request, or proposal:

BUG

What is the expected behavior?

What is the current behavior?

ERROR Error: The "mat-" prefix cannot be used in ng-material v1 compatibility mode. It was used on an "mat-menu" element. at getMdCompatibilityInvalidPrefixError (compatibility.js:21) at new MatPrefixRejector (compatibility.js:32) at createClass (core.es5.js:10936) at createDirectiveInstance (core.es5.js:10764) at createViewNodes (core.es5.js:12212) at createEmbeddedView (core.es5.js:12095) at callWithDebugContext (core.es5.js:13493) at Object.debugCreateEmbeddedView [as createEmbeddedView] (core.es5.js:12839) at TemplateRef.webpackJsonp.../../../core/@angular/core.es5.js.TemplateRef.createEmbeddedView (core.es5.js:10279) at ViewContainerRef.webpackJsonp.../../../core/@angular/core.es5.js.ViewContainerRef.createEmbeddedView (core.es5.js:10056)

What are the steps to reproduce?

 <mat-menu #notificationsMenu="matMenu" [overlapTrigger]="false">

                                       <div td-menu-header class="mat-subhead">Notifications</div>
                                   <mat-nav-list dense>
                                       <ng-template let-last="last" ngFor [ngForOf]="[0]">
                                           <div  *ngFor="let i of mydemands">
                                           <a mat-list-item *ngIf="i.haylpers.length != 0">
                                               <mat-icon mat-list-avatar>today</mat-icon>
                                               <h4 matLine><span class="text-wrap" ><span class="highlight"> <a routerLink="/profile" routerLinkActive="active"><i class="mdi-action-add-shopping-cart"></i> {{i.title}}</a></span><span *ngIf="i.haylpers.length > 1" class="new badge" data-badge-caption="réponses">{{i.haylpers.length}}</span> <span *ngIf="i.haylpers.length === 1" class="new badge" data-badge-caption="réponse">{{i.haylpers.length}}</span></span></h4>
                                               <p matLine> <time class="media-meta" datetime="2015-06-12">{{i.date | date:'h:mma'}}</time></p>
                                           </a>
                                           </div>
                                           <mat-divider></mat-divider>
                                       </ng-template>
                                   </mat-nav-list>
                                       <button mat-button color="accent" td-menu-footer>
                                           See All Notifications
                                       </button>

                               </mat-menu>

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

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.4.4 Angular material 2.0.0-beta.12

Any idea?

Regards,

[jelbourn]

Sounds like you have an old version installed; those error messages were removed in beta.12

[vicochips]

I checked and I have this one installed: "@angular/material": { "version": "2.0.0-beta.12", "resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.12.tgz", "integrity": "sha1-cbbQt7AhiR5dDjaIwdS9eMdFf1g=" },

[jelbourn]

That error message does not exist in the code for beta.12.

[vicochips]

I understand, I deleted my node_modules again and npm install again:

here is my package.json:

{
  "name": "haylp",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "4.4.4",
    "@angular/cdk": "2.0.0-beta.12",
    "@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.12",
    "@angular/platform-browser": "4.4.4",
    "@angular/platform-browser-dynamic": "4.4.4",
    "@angular/platform-server": "4.4.4",
    "@angular/router": "4.4.4",
    "@covalent/core": "1.0.0-beta.8-1",
    "@covalent/dynamic-forms": "1.0.0-beta.8-1",
    "@covalent/highlight": "1.0.0-beta.8-1",
    "@covalent/http": "1.0.0-beta.8-1",
    "@covalent/markdown": "1.0.0-beta.8-1",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
    "@types/lodash": "^4.14.74",
    "@types/socket.io-client": "^1.4.30",
    "angular-in-memory-web-api": "^0.4.6",
    "angular-tree-component": "^5.0.0",
    "angular2-collapsible": "0.0.41",
    "angular2-flash-messages": "^1.0.8",
    "angular2-material-datepicker": "^0.5.0",
    "angular2-toaster": "^4.0.1",
    "async": "^2.5.0",
    "bootstrap-material-design": "^4.0.0-beta.3",
    "core-js": "^2.5.1",
    "hammerjs": "^2.0.8",
    "http-server": "^0.10.0",
    "jquery": "^3.2.1",
    "material-design-icons": "^3.0.1",
    "md2": "0.0.29",
    "ng2-dropdown-treeview": "^2.0.1",
    "ng2-imageupload": "^1.4.2",
    "ng2-material-dropdown": "^0.7.10",
    "ng2-native-accordion": "^1.0.1",
    "ng2-radio-group": "0.0.6",
    "ng2-rating": "0.0.7",
    "ng2-slim-loading-bar": "^4.0.0",
    "ng2-toasty": "^4.0.3",
    "primeng": "4.2.2",
    "rxjs": "^5.4.3",
    "socket.io": "^2.0.3",
    "socket.io-client": "^2.0.3",
    "zone.js": "^0.8.17"
  },
  "devDependencies": {
    "@angular/cli": "1.4.2",
    "@angular/compiler-cli": "4.4.4",
    "@angular/language-service": "4.4.4",
    "@types/jasmine": "~2.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.0.28",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.3.0",
    "tslint": "~5.7.0",
    "typescript": "2.4.0"
  }
}

[tapas4java]

@vicochips Still facing issue?? Try to delete package-lock.json file and do a fresh npm i

[vicochips]

Yes still the same :/

I'm wondering if maybe this is because of my md2 package? Which is deprecated and maybe there is some md- prefix on it?

Regards,

[Neo-sunny]

MaterialModule is removed as of 2.0.beta-11 as seen in the changelog MAterial2Issues

[lxibarra]

i nuked my npm folder and reinstalled again and i get the following error: ERROR in Error: MaterialModule is not an NgModule at _getNgModuleMetadata (/node_modules/@angular/compiler-cli/src/ngtools_impl.js:140:15)

"dependencies": { "@angular-redux/store": "6.5.7", "@angular/animations": "4.4.6", "@angular/cdk": "2.0.0-beta.12", "@angular/common": "4.4.6", "@angular/compiler": "4.4.6", "@angular/core": "4.4.6", "@angular/forms": "4.4.6", "@angular/http": "4.4.6", "@angular/material": "2.0.0-beta.12", "@angular/platform-browser": "4.4.6", "@angular/platform-browser-dynamic": "4.4.6", "@angular/router": "4.4.6", "@covalent/core": "1.0.0-beta.8-1", "angular-tree-component": "3.3.1", "core-js": "2.4.1", "font-awesome": "4.7.0", "hammerjs": "2.0.8", "moment-timezone": "0.5.13", "ng2-breadcrumb": "0.5.14", "ng2-ckeditor": "1.1.9", "ng2-float-btn": "0.0.3", "ngx-cookie": "1.0.0", "primeng": "4.2.1", "redux": "3.6.0", "rxjs": "5.1.0", "tassign": "1.0.0", "zone.js": "0.8.4" }, "devDependencies": { "@angular/cli": "1.4.9", "@angular/compiler-cli": "4.4.6", "@types/jasmine": "2.5.38", "@types/node": "6.0.60", "codelyzer": "2.0.0", "jasmine-core": "2.5.2", "jasmine-reporters": "2.2.1", "jasmine-spec-reporter": "3.2.0", "karma": "1.4.1", "karma-chrome-launcher": "2.0.0", "karma-cli": "1.0.1", "karma-coverage-istanbul-reporter": "0.2.0", "karma-jasmine": "1.1.0", "karma-jasmine-html-reporter": "0.2.2", "protractor": "5.1.0", "protractor-jasmine2-screenshot-reporter": "0.4.0", "selenium-server": "3.4.0", "ts-node": "2.0.0", "tslint": "4.5.0", "typescript": "2.2.0" }

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}