Angular Material Project fails to compile in Angular 4

Question

I'm trying to compile my Angular 4 project. I've followed the installation of Angular Material from "https://material.angular.io/guide/getting-started" and included the dependencies in the app.module.ts. When I tried to compile the project, am getting the warnings and errors which are mentioned below:

ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/rxjs/Subject.d.ts (16,22): Class 'Subject<T>' incorrectly e
xtends base class 'Observable<T>'.
  Types of property 'lift' are incompatible.
    Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<
R>'.
      Type 'Observable<T>' is not assignable to type 'Observable<R>'.
        Type 'T' is not assignable to type 'R'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,10): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Directionality'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,26): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'DIRECTIONALITY_PROVI
DER'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,51): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'DIR_DOCUMENT'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,65): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Direction'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,76): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Dir'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/bidi/index.d.ts (8,81): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'BidiModule'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal.d.ts (8,10): M
odule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Portal'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal.d.ts (8,18): M
odule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'PortalHost'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal.d.ts (8,30): M
odule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'BasePortalHost'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal.d.ts (8,46): M
odule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ComponentPortal'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal.d.ts (8,63): M
odule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'TemplatePortal'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal-directives.d.t
s (8,10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Templa
tePortalDirective'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal-directives.d.t
s (8,35): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Portal
HostDirective'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/portal-directives.d.t
s (8,56): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Portal
Module'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/portal/dom-portal-host.d.ts
(8,10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'DomPorta
lHost'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/platform/platform.d.ts (8,10
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Platform'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/platform/features.d.ts (8,10
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'getSupportedI
nputTypes'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/platform/index.d.ts (8,10):
Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'PlatformModule'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/live-announcer.d.ts (8,
10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'AriaLivePol
iteness'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/live-announcer.d.ts (8,
30): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'LIVE_ANNOUN
CER_ELEMENT_TOKEN'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/live-announcer.d.ts (8,
60): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'LiveAnnounc
er'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/live-announcer.d.ts (8,
75): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'LIVE_ANNOUN
CER_PROVIDER_FACTORY'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/live-announcer.d.ts (8,
108): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'LIVE_ANNOU
NCER_PROVIDER'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/focus-trap.d.ts (8,10):
 Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'FocusTrap'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/focus-trap.d.ts (8,21):
 Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'FocusTrapFactor
y'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/focus-trap.d.ts (8,39):
 Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'FocusTrapDeprec
atedDirective'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/focus-trap.d.ts (8,69):
 Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'FocusTrapDirect
ive'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/interactivity-checker.d
.ts (8,10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'Inte
ractivityChecker'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/fake-mousedown.d.ts (8,
10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'isFakeMouse
downFromScreenReader'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/index.d.ts (8,10): Modu
le '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'A11yModule'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,10
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'UP_ARROW'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,20
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'DOWN_ARROW'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,32
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'RIGHT_ARROW'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,45
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'LEFT_ARROW'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,57
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'PAGE_UP'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,66
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'PAGE_DOWN'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,77
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'HOME'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,83
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'END'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,88
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ENTER'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,95
): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'SPACE'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,10
2): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'TAB'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,10
7): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ESCAPE'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,11
5): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'BACKSPACE'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/keyboard/keycodes.d.ts (8,12
6): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'DELETE'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/core.d.ts (1,10): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'coerceBooleanProperty'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/core.d.ts (1,33): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'coerceNumberProperty'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/core.d.ts (1,55): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ObserveContentModule'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/core.d.ts (1,77): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ObserveContent'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/list-key-manager.d.ts (
8,10): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CanDisabl
e'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/core/a11y/list-key-manager.d.ts (
8,22): Module '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'ListKeyMa
nager'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/sort/sort-header.d.ts (11,10): Mo
dule '"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkColumnDef'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/cell.d.ts (9,10): Module '"
C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkCell'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/cell.d.ts (9,19): Module '"
C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkColumnDef'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/cell.d.ts (9,33): Module '"
C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkHeaderCell'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/table.d.ts (1,10): Module '
"C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkTable'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/row.d.ts (1,10): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkHeaderRow'.
ERROR in C:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/material/typings/table/row.d.ts (1,24): Module '"C
:/Users/narayanans/Desktop/MEAN-project/client/node_modules/@angular/cdk/cdk"' has no exported member 'CdkRow'.
ERROR in BidiModule is not an NgModule

My Package.JSON is like the one below:

{
  "name": "client",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.3.6",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/cli": "^1.3.2",
    "@angular/common": "^4.3.6",
    "@angular/compiler": "^4.3.6",
    "@angular/compiler-cli": "^4.3.6",
    "@angular/core": "^4.3.6",
    "@angular/forms": "^4.3.6",
    "@angular/http": "^4.3.6",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.3.6",
    "@angular/platform-browser-dynamic": "^4.3.6",
    "@angular/platform-server": "^4.3.6",
    "@angular/router": "^4.3.6",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "latest-version": "^3.1.0",
    "ng2-materialize": "^1.3.2",
    "popper.js": "^1.12.3",
    "rxjs": "^6.0.0-alpha.0",
    "ts-helpers": "^1.1.1",
    "typescript": "^2.4.2",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0"
  }
}

This is how the app.module.ts looks like:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RouterModule } from "@angular/router";
import { NavbarComponent } from './components/navbar/navbar.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// import { MaterialModule } from '@angular/material';
import { MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule } from '@angular/material';
import 'hammerjs';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    HomeComponent,
    DashboardComponent,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    ReactiveFormsModule,
    FormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,MdButtonModule,
    MdMenuModule,
    MdCardModule,
    MdToolbarModule,
    MdIconModule


    // MdInputModule, 
    // MdButtonModule,

    // RouterModule.forRoot([
    //   {path:'home', component:HomeComponent},
    //   {path:'dashboard', component:DashboardComponent}

    // ])
  ],

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

I think you should use @angular/material2, right? I thought @angular/material was for AngularJS. — sandrooco
– sandrooco, Commented Aug 29, 2017 at 6:42
It is showing me the error as "[ts] Cannot find module '@angular/material2'", when I tried add 2 at the end. Moreover, in the documentation of API reference for Angular Material menu, we have it as material "import {MdMenuModule} from '@angular/material" — n9exorcist
– n9exorcist, Commented Aug 29, 2017 at 6:49
Yes, this worked for me "npm install @angular/[email protected] --save" — n9exorcist
– n9exorcist, Commented Aug 29, 2017 at 7:26

snowlark · Accepted Answer · 2017-09-26 17:28:10Z

1

I have encountered this problem - I'm still looking for an answer.

Additionally, the latest comment above (Aug 29th) states to not mix cdk-builds with the latest material - that statement is in direct conflict with the Material site itself. The install instructions state to include both:

https://material.angular.io/guide/getting-started

npm install --save angular/material2-builds angular/cdk-builds

Please provide a reason why we should be deviating from the instructions clearly stated by the Material team.

Thanks

answered Sep 26, 2017 at 17:28

snowlark

213 bronze badges

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

Comments

santhosh-natarajan · Accepted Answer · 2017-10-31 07:41:54Z

1

I was facing this problem, I was tried install @angular/cdk and @angular/material as the same version. The problem has fixed.

answered Oct 31, 2017 at 7:41

santhosh-natarajan

4684 silver badges13 bronze badges

Comments

Ajit Kumar · Accepted Answer · 2018-03-22 05:58:15Z

Install Angular 4 in your windows

Install Node js installer download from nodejs site - run environment. and check node installed or not on your computer using this command: node -v
Install Git Bash installer download from git site.
Then install CLI using this command : npm install -g @angular/cli
Then create a folder in any drive
Open git bash command prompt and move to created folder using : cd foldername
Now create a new project within that folder using this command: ng new projectname and move to that folder using this command: cd projectname
Now check the angular version installed using this command : ng -v
Now you can see angular 2 is installed, you can rund the following command to upgdade to the angular4 for windows only : npm install @angular/common@next @angular/compiler@next @angular/compiler-cli@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next @angular/animations@next --save

or you can go to this url and find installing RC.1 and then copy the command https://github.com/angular/angular/blob/master/CHANGELOG.md

Also make sure that you have Typescript 2.1.6 or higher if not then use this command to update the typescript : npm install [email protected] --save
Then again check angular version using this cmmand : ng -v that will show you the angular version 4
Install NPM angular core using this command : npm install -g @angular/core
After than install typescript folder using this command : npm install -g typescript
Now you can chec NPM version using this command : npm -v
Now you can run the angular 4 project using the following command : ng serve

Bashir M. Saad · Accepted Answer · 2017-10-13 17:32:25Z

0

Change the prefix of all your import(s) from MdButtonModule to MatButtonModule. the remaining should be like this:

import { MatCheckboxModule, MatAutocompleteModule, MatSlideToggleModule, MatButtonModule, MatFormFieldControl, MatIconModule, MatInputModule, MatSelectModule, MatSortModule, MatDatepickerModule, DateAdapter, MatChipsModule} from '@angular/material';

answered Oct 13, 2017 at 17:32

Bashir M. Saad

463 bronze badges

Collectives™ on Stack Overflow

Angular Material Project fails to compile in Angular 4

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related