incapable d'exporter MaterialModule de shared.module.ts le temps de construction

Question

Il travaille sur ng serve mais l'erreur donnant comme suit

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

Quelqu'un peut-il examiner cette question?

ici est 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

Vous avez probablement fait ce qui suit:

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

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

Cependant, le MaterialModule est dépréciée depuis un certain temps maintenant (je ne me souviens pas exactement de quelle version) . Il est maintenant recommandé d'importer les modules composant individuellement: https://material.angular.io/guide/getting-started#step-3-import-the-component-modules

changent donc à quelque chose comme ce qui suit:

// 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 {} 

Vous pouvez émuler la fonctionnalité de MaterialModule (l'évier de cuisine) en important chaque module de composant disponible, puis en les exportant à partir de votre module partagé.

Answer 2

J'ai eu la même erreur en utilisant MdDialog de MaterialModule. Je viens de le réparer maintenant et cela fonctionne.

Je l'ai corrigé en spécifiant le module matériel particulier que j'utilise dans mon application.

dans mes app.module.ts:

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

dans mon élément:

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 
    } 

}