In Angular2, Angular/Material Fehler erhalten MdCoreModule nicht exportiert

Question

Ich habe vor kurzem eine Node.js mit Angular 2-Projekt geerbt und versuche, auf dem neuesten Stand zu sein. Es gibt offensichtlich zahlreiche Probleme, mit denen ich konfrontiert bin. Ich bin also nicht sicher, ob es hier ein Problem mit der direkten Version gibt oder ob ich etwas falsch mache.

Ich habe die folgende Import in einem Modul aus einem Beispiel hier: http://candordeveloper.com/2017/04/25/how-to-create-dynamic-menu-and-page-title-with-angular-material-and-cli/

import { //only import the portions you will use to optimize build (MaterialModule to include all is deprecated) 
     MdCoreModule, 
     MdButtonModule, 
     MdCardModule, 
     MdIconModule, 
     MdMenuModule, 
     MdRippleModule, 
     MdSidenavModule, 
     MdToolbarModule, 
     //... add others you need 
} from '@angular/material'; 

benutzte ich

npm install --save @angular/material @angular/cdk 

die erforderlichen Pakete zu installieren, aber bin immer „ 'MdCoreModule' nicht exportiert Fehler

In package.json habe ich:

{ 
    "name": "Test_Project", 
    "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.2.4", 
    "@angular/cdk": "^2.0.0-beta.11", 
    "@angular/common": "^4.2.4", 
    "@angular/compiler": "^4.2.4", 
    "@angular/core": "^4.2.4", 
    "@angular/forms": "^4.2.4", 
    "@angular/http": "^4.2.4", 
    "@angular/material": "^2.0.0-beta.11", 
    "@angular/platform-browser": "^4.2.4", 
    "@angular/platform-browser-dynamic": "^4.2.4", 
    "@angular/router": "^4.2.4", 
    "core-js": "^2.4.1", 
    "rxjs": "^5.4.2", 
    "zone.js": "^0.8.14" 
    }, 
    "devDependencies": { 
    "@angular/cli": "1.4.3", 
    "@angular/compiler-cli": "^4.2.4", 
    "@angular/language-service": "^4.2.4", 
    "@types/jasmine": "~2.5.53", 
    "@types/jasminewd2": "~2.0.2", 
    "@types/node": "~6.0.60", 
    "codelyzer": "~3.1.1", 
    "jasmine-core": "~2.6.2", 
    "jasmine-spec-reporter": "~4.1.0", 
    "karma": "~1.7.0", 
    "karma-chrome-launcher": "~2.1.1", 
    "karma-cli": "~1.0.1", 
    "karma-coverage-istanbul-reporter": "^1.2.1", 
    "karma-jasmine": "~1.1.0", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "protractor": "~5.1.2", 
    "ts-node": "~3.2.0", 
    "tslint": "~5.3.2", 
    "typescript": "~2.3.3" 
    } 
} 

Ich denke, es könnte sich um ein Versions-Problem handeln, aber ich kann nirgendwo ähnliche Probleme finden.

Answer 1

Dies ist eine Kopie des (jetzt veralteten) Materialmoduls, das Angular aus dem offiziellen Projekt gelöscht hat. See Here.

import { NgModule } from '@angular/core'; 

import { OverlayModule } from '@angular/cdk/overlay'; 
import { A11yModule } from '@angular/cdk/a11y'; 
import { BidiModule } from '@angular/cdk/bidi'; 
import { ObserversModule } from '@angular/cdk/observers'; 
import { PortalModule } from '@angular/cdk/portal'; 
import { PlatformModule } from '@angular/cdk/platform'; 

import { 
    MdAutocompleteModule, 
    MdButtonModule, 
    MdButtonToggleModule, 
    MdCardModule, 
    MdChipsModule, 
    MdCheckboxModule, 
    MdDatepickerModule, 
    MdTableModule, 
    MdDialogModule, 
    MdExpansionModule, 
    MdFormFieldModule, 
    MdGridListModule, 
    MdIconModule, 
    MdInputModule, 
    MdListModule, 
    MdMenuModule, 
    MdPaginatorModule, 
    MdProgressBarModule, 
    MdProgressSpinnerModule, 
    MdRadioModule, 
    MdRippleModule, 
    MdSelectModule, 
    MdSidenavModule, 
    MdSliderModule, 
    MdSlideToggleModule, 
    MdSnackBarModule, 
    MdSortModule, 
    MdStepperModule, 
    MdTabsModule, 
    MdToolbarModule, 
    MdTooltipModule, 
    StyleModule, 
    MdCommonModule 
} from '@angular/material'; 

const MATERIAL_MODULES = [ 
    MdAutocompleteModule, 
    MdButtonModule, 
    MdButtonToggleModule, 
    MdCardModule, 
    MdChipsModule, 
    MdCheckboxModule, 
    MdDatepickerModule, 
    MdTableModule, 
    MdDialogModule, 
    MdExpansionModule, 
    MdFormFieldModule, 
    MdGridListModule, 
    MdIconModule, 
    MdInputModule, 
    MdListModule, 
    MdMenuModule, 
    MdPaginatorModule, 
    MdProgressBarModule, 
    MdProgressSpinnerModule, 
    MdRadioModule, 
    MdRippleModule, 
    MdSelectModule, 
    MdSidenavModule, 
    MdSliderModule, 
    MdSlideToggleModule, 
    MdSnackBarModule, 
    MdSortModule, 
    MdStepperModule, 
    MdTabsModule, 
    MdToolbarModule, 
    MdTooltipModule, 
    OverlayModule, 
    PortalModule, 
    BidiModule, 
    StyleModule, 
    A11yModule, 
    PlatformModule, 
    MdCommonModule, 
    ObserversModule, 
]; 

@NgModule({ 
    imports: MATERIAL_MODULES, 
    exports: MATERIAL_MODULES, 
}) 
export class MaterialModule {} 

MdCoreModule, während ich, wenn es nicht sicher bin verwendet, dort zu sein, für ihre aktuellen Versionen nicht da ist, auf jeden Fall so für Sie da Ihr package.json sagt man beta.11 verwenden, die ist die aktuellste Version zu dieser Zeit. Ich gehe davon aus, dass Ihre funktionieren würde, wenn Sie einfach MdCoreModule loswerden.

Ich kann nicht aus Ihrem Code ersehen, ob Sie dies getan haben oder nicht, aber ich würde auch vorschlagen, Ihre Importe für die Material Module in eine eigene Datei wie oben zu erstellen und das separate Modul zu importieren/exportieren Ihre app.module.ts. Um "nur die Teile zu importieren, die Sie zum Optimieren des Builds verwenden", können Sie die Module, die Sie nicht in Ihrer App verwenden, aus den Import- und Const-Exporten löschen.