Property 'forRoot' does not exist on type 'typeof MdCoreModule'
10,969
Solution 1
With Angular 2.0.0
and Angular Material 2.0.0-alpha.8-2
, the imports now work as documented:
import { MdButtonModule } from '@angular2-material/button';
//...
MdButtonModule.forRoot(),
Note the change from button/button
to just button
.
Solution 2
Although documentation says to use forRoot()
, and it is for 2.0.0-alpha.8 ectoplasm-helicopter (2016-09-01)
I am not sure if it is to be used when you re-export them, I tried it without forRoot()
and is working fine.
See this Plunker!
Hope this helps!!
![Jan Nielsen](https://i.stack.imgur.com/bHXDR.jpg?s=256&g=1)
Comments
-
Jan Nielsen about 2 years
Upgrading my Angular 2.0.0-rc.6 application with Angular Material 2.0.0-alpha.8-1, I now get compilation errors like:
Property 'forRoot' does not exist on type 'typeof MdCoreModule'.
and here's the
AppModule
:import { MdCoreModule } from '@angular2-material/core/core'; import { MdButtonModule } from '@angular2-material/button/button'; import { MdButtonToggleModule } from '@angular2-material/button-toggle/button-toggle'; import { MdCardModule } from '@angular2-material/card/card'; import { MdCheckboxModule } from '@angular2-material/checkbox/checkbox'; // ... additional imports @NgModule({ declarations: [ AppComponent, // ... additional application-specific declarations ], imports: [ BrowserModule, CommonModule, ReactiveFormsModule, HttpModule, JsonpModule, MdCoreModule.forRoot(), MdButtonModule.forRoot(), MdButtonToggleModule.forRoot(), MdCardModule.forRoot(), MdCheckboxModule.forRoot(), // ... additional imports ], providers : [ Configuration, // ... additional application-specific providers ], entryComponents: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { }
which is as recommended in the CHANGELOG. Any ideas what I'm doing wrong?
"dependencies": { "@angular/common": "2.0.0-rc.6", "@angular/compiler": "2.0.0-rc.6", "@angular/core": "2.0.0-rc.6", "@angular/forms": "2.0.0-rc.6", "@angular/http": "2.0.0-rc.6", "@angular/platform-browser": "2.0.0-rc.6", "@angular/platform-browser-dynamic": "2.0.0-rc.6", "@angular/router": "3.0.0-rc.2", "@angular2-material/button": "2.0.0-alpha.8-1", "@angular2-material/button-toggle": "2.0.0-alpha.8-1", "@angular2-material/card": "2.0.0-alpha.8-1", "@angular2-material/checkbox": "2.0.0-alpha.8-1", "@angular2-material/core": "2.0.0-alpha.8-1", "@angular2-material/grid-list": "2.0.0-alpha.8-1", "@angular2-material/icon": "2.0.0-alpha.8-1", "@angular2-material/input": "2.0.0-alpha.8-1", "@angular2-material/list": "2.0.0-alpha.8-1", "@angular2-material/menu": "2.0.0-alpha.8-1", "@angular2-material/progress-bar": "2.0.0-alpha.8-1", "@angular2-material/progress-circle": "2.0.0-alpha.8-1", "@angular2-material/radio": "2.0.0-alpha.8-1", "@angular2-material/sidenav": "2.0.0-alpha.8-1", "@angular2-material/slide-toggle": "2.0.0-alpha.8-1", "@angular2-material/slider": "2.0.0-alpha.8-1", "@angular2-material/tabs": "2.0.0-alpha.8-1", "@angular2-material/toolbar": "2.0.0-alpha.8-1", "@angular2-material/tooltip": "2.0.0-alpha.8-1", "core-js": "^2.4.0", "reflect-metadata": "0.1.8", "rxjs": "5.0.0-beta.11", "ts-helpers": "^1.1.1", "zone.js": "0.6.17" }
and
"devDependencies": { "@types/hammerjs": "2.0.32", "@types/jasmine": "^2.2.30", "angular-cli": "1.0.0-beta.11-webpack.8", "codelyzer": "0.0.26", "hammerjs": "2.0.8", "jasmine-core": "2.4.1", "jasmine-spec-reporter": "2.5.0", "karma": "0.13.22", "karma-chrome-launcher": "0.2.3", "karma-jasmine": "0.3.8", "karma-remap-istanbul": "^0.2.1", "protractor": "4.0.3", "reflect-metadata": "0.1.8", "string-replace-loader": "1.0.3", "ts-node": "1.2.1", "tslint": "3.13.0", "typescript": "2.0.0" }
Environment:
angular-cli: 1.0.0-beta.11-webpack.8 node: 6.5.0 os: linux x64