导入 Material 模块时 Webpack 中的 Angular2 Material 错误

Question

我正在按照入门页面中的步骤操作 https://github.com/angular/material2/blob/master/GETTING_STARTED.md

到目前为止，我已经安装了 material 以下

npm install --save @angular/material

现在我正在尝试将 MaterialModule 导入到我的应用程序组件中

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

这会导致 webpack 抛出大量错误，例如

ERROR in [default] C:/mypathSource/Repos/dir/Web.Angular/node_modules/@angular/material/menu/menu-item.d.ts:14:27 
';' expected.
ERROR in [default] C:/mypathSource/Repos/dir/Web.Angular/node_modules/@angular/material/menu/menu-item.d.ts:14:29 
Duplicate identifier 'string'.
ERROR in [default] C:/mypathSource/Repos/dir/Web.Angular/node_modules/@angular/material/menu/menu-item.d.ts:15:4 
Duplicate identifier 'readonly'.
ERROR in [default] C:/mypathSource/Repos/dir/Web.Angular/node_modules/@angular/material/menu/menu-item.d.ts:15:13 
'=' expected.
ERROR in [default] C:/mypathSource/Repos/dir/Web.Angular/node_modules/@angular/material/menu/menu-item.d.ts:15:13 
Cannot find name '_tabindex'.
ERROR in [default] C:/mypathSource/Repos/dir/Web.Angular/node_modules/@angular/material/menu/menu-item.d.ts:15:22 
';' expected.
ERROR in [default] C:/mypathSource/Repos/dir/Web.Angular/node_modules/@angular/material/menu/menu-item.d.ts:15:24 
Duplicate identifier 'string'.
ERROR in [default] C:/mypathSource/Repos/dir/Web.Angular/node_modules/@angular/material/menu/menu-trigger.d.ts:26:4 
Duplicate identifier 'readonly'.
ERROR in [default] C:/mypathSource/Repos/dir/Web.Angular/node_modules/@angular/material/menu/menu-trigger.d.ts:26:13 
'=' expected.
ERROR in [default] C:/mypathSource/Repos/dir/Web.Angular/node_modules/@angular/material/menu/menu-trigger.d.ts:26:13 
Cannot find name 'menuOpen'.
ERROR in [default] C:/mypathSource/Repos/dir/Web.Angular/node_modules/@angular/material/menu/menu-trigger.d.ts:26:21 
';' expected.

我做错了什么？

Answer 1

从 angular/material 库导入 MaterialModule 后，您需要将该导入添加到 NgModule，如下所示：

（在同一个 ts 文件中导入了 MaterialModule）：

@NgModule({
  imports: [
    ...
    MaterialModule.forRoot(),
    ...
  ]
  ...
})

这将添加该模块，以便您可以在您的应用程序中使用它。

Answer 2

我最终通过应对 angular/webpack 初学者工具包中的 package.json 更新了我的节点模块的所有版本，并且错误消失了。

导入 Material 模块时 Webpack 中的 Angular2 Material 错误

Angular2 Material errors in webpack when importing MaterialModule

webpack

angular2-material

angular