nicht in der Lage zu exportieren MaterialModule von shared.module.ts auf Bauzeit

Question

Es funktioniert auf ng serve aber Fehler geben wie folgt

ERROR in Unexpected value 'MaterialModule in E:/Code/employee-web/node_modules/@angular/material/typings/index.d.ts' 

impor ted by the module 'SharedModule in E:/Code/employee-web/src/app/shared/shared.module.ts'. Please add a @NgModule annotatio n. ERROR in ./src/main.ts Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'E:\Code\employee-web\src' resolve './$$_gendir/app/app.module.ngfactory' in 'E:\Code\employee-web\src' using description file: E:\Code\employee-web\package.json (relative path: ./src) Field 'browser' doesn't contain a valid alias configuration after using description file: E:\Code\employee-web\package.json (relative path: ./src) using description file: E:\Code\employee-web\package.json (relative path: ./src/$$_gendir/app/app.module.ngfactory) no extension Field 'browser' doesn't contain a valid alias configuration E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory.js doesn't exist as directory E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory doesn't exist [E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory] [E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory.ts] [E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory.js] [E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory] @ ./src/main.ts 3:0-74 @ multi ./src/main.ts

jemand in diese aussehen kann?

hier ist sharedModule

> @NgModule({ 
> 
> declarations: [], providers: [ 
>  ], imports: [ 
>  HttpModule, 
>  MaterialModule, 
>  ], exports: [ 
>  CommonModule, 
>   //matrial MOdule 
>  // MdTooltipModule, 
>  // MdTabsModule, 
>  // MdSlideToggleModule, 
>  // MdIconModule, 
>  // MdDialogModule, 
>  // MdButtonModule, 
>  // MdListModule, 
>  // MdCardModule, 
>  // MdToolbarModule, 
>  // MdProgressSpinnerModule, 
>  // MdProgressBarModule, 
>  MaterialModule, 
> 
> 
>  ] }) export class SharedModule { } 

Answer 1

Sie haben die folgende wahrscheinlich getan:

import {MaterialModule} from "@angular/material"; 

@NgModule({ 
    declarations: [], 
    providers: [], 
    imports: [ 
    HttpModule, 
    MaterialModule, 
    ], 
    exports: [ 
    CommonModule, 
    MaterialModule, 
    ] 
}) 
export class SharedModule {} 

Allerdings hat die MaterialModule für eine Weile als veraltet jetzt (ich erinnere mich nicht, welche Version genau) . Es wird nun empfohlen, dass Sie die Komponenten-Module einzeln zu importieren: https://material.angular.io/guide/getting-started#step-3-import-the-component-modules

So etwas ändern wie folgt aus:

// Import whatever components you intend to use in this shared module here 
import {MdButtonModule, MdCheckboxModule} from '@angular/material'; 

@NgModule({ 
    ... 
    imports: [MdButtonModule, MdCheckboxModule], 
    exports: [MdButtonModule, MdCheckboxModule], 
    ... 
}) 
export class SharedModule {} 

Sie können die MaterialModule Funktionalität emulieren (der Küchenspüle) von jeder einzelnen Komponente Modul zur Verfügung zu importieren, und dann exportieren sie von Ihrem geteilten Modul.

Answer 2

Ich hatte den gleichen Fehler mit MdDialog von MaterialModule. Ich habe es gerade repariert und es funktioniert.

Ich reparierte es, indem ich das bestimmte materielle Modul spezifizierte, das ich in meiner APP verwende.

in meinem app.module.ts:

import { MdDialogModule } from '@angular/material'; 
imports: [ 
    MdDialogModule 
] 

in meiner Komponente:

import { MdDialog } from '@angular/material' 
import { AuthorizationComponent } from '../authorization/authorization.component' 

export class HomeComponent implements OnInit { 
    constructor(private dialog: MdDialog){} 

    ngOnInit() { 
    this.dialog.afterAllClosed 
    .subscribe(() => { 
      //make changes 
     }) 
    } 

    sign_up() { 
     this.dialog.open(AuthorizationComponent) //open component 
    } 

}