Angular2 can't enable material design

Question

As mentioned in the question's title I can't enable material design although I'be followed the official documentation.
I did the following steps:
npm install --save @angular/material
npm install --save @angular/animations
and this is my package.json file:

"dependencies": {
    "@angular/animations": "^4.2.5",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/material": "github:angular/material2-builds",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.1.0",
    "zone.js": "^0.7.6"
  },

So everything is perfectly installed but right now I'm facing two problems:
The first one is that the compiler can't find the animations module when I try to import BrowserAnimationsModule:
The second problem is that when I import material modules in NgModule like this:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MdButtonModule,
    MdMenuModule,
    MdCardModule,
    MdToolbarModule,
    MdIconModule
  ],
  providers: [

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I get this error in the console, and a bunch of warning messages:

What am I missing here ?

You're using @angular dependencies with mixed versions (4.2.5, 2.4.0), which are thus not compatible with each other. Use the latest stable version of angular, and use the same version for all the @angular dependencies. — JB Nizet
– JB Nizet, Commented Jul 1, 2017 at 8:35

Martijn Pieters · Accepted Answer · 2017-10-09 09:39:31Z

3

Angular 4 uses InjectionToken instead of OpaqueToken which is used by Angular 2 and as you are mixing your @angular dependency versions between the two you get a bunch of errors stating that the InjectionToken cannot be found.

What I suggest is if this is a new project you can update node/npm by downloading Node.js from here and then you update the Angular CLI to the latest version by following those steps:

Step 1: run this command to uninstall the old CLI

npm uninstall -g @angular/cli
npm cache clean

Step 2: install the CLI globally

npm install -g @angular/cli@latest

If this is a big Angular 2 project you can follow this guide to refactor it to an Angular 4 project.

edited Oct 9, 2017 at 9:39

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered Jul 1, 2017 at 11:00

Hamed Baatour

6,9823 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SlimenTN Over a year ago

you're right sir it was an angular CLI problem, after updating it everything works fine now :).

Hamed Baatour Over a year ago

@Slimen glad this helped you! really happy to see a tunisian joining the angular community!

candidJ Over a year ago

npm cache clean is now changed to npm cache verify as of npm 5

brijmcq · Accepted Answer · 2017-07-01 08:41:30Z

2

In your package.json, try to replace "@angular/material": "github:angular/material2-builds",

with

 "@angular/material": "^2.0.0-beta.7",

Your @angular/animations is version ^4.2.5 while the other modules @angular/core, compiler etc is version 2.4.0. Try to update those as well to 4.2.5

Also, try to delete the node_modules in your root folder and run npm install again. Everything else seems fine with the code you provided. Hope this helps

edited Jul 1, 2017 at 8:41

answered Jul 1, 2017 at 8:37

brijmcq

3,4182 gold badges19 silver badges34 bronze badges

8 Comments

brijmcq Over a year ago

@SlimenTunis I updated my answer. I didn't notice your animations version is different with your @angular/core and etc.

SlimenTN Over a year ago

but I have installed these dependencies using angular CLI so it will install the last version of each dependency right ?

brijmcq Over a year ago

If you are using ^ in your package, it will update to minor updates. Take a look at this docs.npmjs.com/getting-started/semantic-versioning. Again to be sure, delete your node_modules and run npm install again it usually solves my problem

SlimenTN Over a year ago

oh ok this make sense, I will re-install all the dependencies using the same version.

brijmcq Over a year ago

@SlimenTunis let me know if you still have problems

|

Collectives™ on Stack Overflow

Angular2 can't enable material design

2 Answers 2

3 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related