无法在构建时从 shared.module.ts 导出 MaterialModule

Question

它正在 ng serve 上运行，但出现如下错误

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

重要 由模块 'SharedModule in E:/Code/employee-web/src/app/shared/shared.module.ts' 编写。请添加一个 @NgModule 注释 n. ./src/main.ts 中的错误 未找到模块：错误：无法解析“E:\Code\employee-web\src”中的“./$$_gendir/app/app.module.ngfactory” 在“E:\Code\employee-web\src”中解析“./$$_gendir/app/app.module.ngfactory” 使用描述文件：E:\Code\employee-web\package.json（相对路径：./src） 字段“浏览器”不包含有效的别名配置 使用描述文件后：E:\Code\employee-web\package.json（相对路径：./src） 使用描述文件：E:\Code\employee-web\package.json（相对路径：./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.ts 没有 存在 .js 字段“浏览器”不包含有效的别名配置 E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory.js 没有 存在 作为目录 E:\Code\employee-web\src\$$_gendir\app\app.module.ngfactory 没有 存在 [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

有人可以调查一下吗？

这里是共享模块

> @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

你可能做了以下事情：

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

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

但是，MaterialModule 已经被弃用了一段时间（我不记得确切的版本）。现在建议您单独导入组件模块：https://material.angular.io/guide/getting-started#step-3-import-the-component-modules

所以改成下面这样：

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

您可以通过导入每个可用的组件模块，然后从共享模块中导出它们来模拟 MaterialModule 功能（厨房水槽）。

Answer 2

我在使用 MaterialModule 中的 MdDialog 时遇到了同样的错误。 我刚刚修复了它，它可以工作。

我通过指定我在我的应用程序中使用的特定材料模块来修复它。

在我的 app.module.ts 中：

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

在我的组件中：

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
    }

}