Why node_modules / @ angular / material / material "'has no member exported' MaterialModule '?

Question

Why node_modules / @ angular / material / material "'has no member exported' MaterialModule '?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm trying to start with Angular but I really have trouble launching ng serve --open but I found problems:

mike@mike-thinks:~/Documents/Coursera/Angular/conFusion3$ ng serve --open
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 10% building modules 7/12 modules 5 active .../webpack/hot nonrecursive /^\.\/log$/webpack: wait until bundle finished: /
Date: 2018-04-26T16:46:42.755Z                                                       
Hash: a56ffd9f64acb51cc7ff
Time: 6370ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.91 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 577 bytes [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 42.2 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 852 kB [initial] [rendered]

ERROR in src/app/app.module.ts(5,10): error TS2305: Module '"/home/mike/Documents/Coursera/Angular/conFusion3/node_modules/@angular/material/material"' has no exported member 'MaterialModule'.

The only answers I found were talking about the exchange of "Mat" to "Md" in the imports of stackoverflow and GitHub , but they seem to be unrelated in regards to my app.component.ts, they are:

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent {

title = 'app';

}

All my code is in BitBucket

angularjs angular

asked by ThePassenger 26.04.2018 в 19:12

source

2 answers

0

In the version of angular material that you use, the modules are imported individually.Ej: MatButtonModule, MatCheckboxModule.

To have a better idea you can see the documentation of angular material

answered by 26.04.2018 в 23:53

Checkbox validated and show popup Haskell - Binary tree - Change a variable in a tree to another tree

score 0 · Accepted Answer

I'll tell you what you have to do to use Angular Material 5.2.5 in your project.

1 . Create a module for material where we will import individually and create the file with the name angular-material.module.ts , you can save it creating the folders in the path "src/app/shared/angular-material"

import { NgModule } from '@angular/core';
import { CommonModule }   from '@angular/common';
import {DateAdapter, MatRippleModule, MAT_DATE_LOCALE} from '@angular/material';
import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatFormFieldModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatStepperModule,
  MatNativeDateModule,
  MAT_DATE_FORMATS
} from '@angular/material';
import {dateAdapterOta, MY_DATE_FORMATS } from './../adapters/dateAdapterOta';

@NgModule({
      exports: [
        MatAutocompleteModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatTableModule,
        MatDatepickerModule,
        MatDialogModule,
        MatExpansionModule,
        MatFormFieldModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSlideToggleModule,
        MatSliderModule,
        MatSnackBarModule,
        MatSortModule,
        MatStepperModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        MatNativeDateModule
      ],
      providers:[
        {provide: DateAdapter, useClass: dateAdapterOta},
        {provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS}
      ]
})
export class AngularMaterialModule {}

2 . Enter the file app.module.ts and import the material module

import { AngularMaterialModule } from './shared/angular-material/angular-material.module';

//añades el modulo de material
import: [
AngularMaterialModule,
]

That would be enough to allow you to use the material components in your project