AOT Compile Failing with Material Modules

Question

I'm getting multiple errors but they're all similar to this:

ERROR in ./node_modules/@angular/material/button/typings/index.ngfactory.js
Module build failed: Error: Invalid name: "@angular/material/button"
    at ensureValidName (C:\path\node_modules\normalize-package-data\lib\fixer.js:335:15)
    at Object.fixNameField (C:\path\node_modules\normalize-package-data\lib\fixer.js:215:5)
    at C:\path\node_modules\normalize-package-data\lib\normalize.js:32:38
    at Array.forEach (<anonymous>)
    at normalize (C:\path\node_modules\normalize-package-data\lib\normalize.js:31:15)
    at final (C:\path\node_modules\read-package-json\read-json.js:411:5)
    at then (C:\path\node_modules\read-package-json\read-json.js:160:5)
    at ReadFileContext.<anonymous> (C:\path\node_modules\read-package-json\read-json.js:332:20)
    at ReadFileContext.callback (C:\path\node_modules\graceful-fs\graceful-fs.js:78:16)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)
 @ ./src/components/shared/confirm-delete/confirm-delete.component.ngfactory.js 4:0-96
 @ ./src/components/desktop/base/base.module.ngfactory.js
 @ ./$$_lazy_route_resource lazy
 @ ./node_modules/@angular/core/esm5/core.js
 @ ./src/main.aot.ts

The errors only seem to be occurring in modules that are child modules since the material button is being used in other components without producing this error. I suspect I've done something silly with my imports but I can't figure out what it is that would cause this error in only the child modules. The angular compiler version is 5.2.10.

Imports -

import { MatInputModule } from '@angular/material/input';
import { MatCardModule} from '@angular/material';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule} from '@angular/material';
import { MatIconModule } from '@angular/material/icon';

It works fine with webpack and doing 'npm run server'. It's only when doing AOT compilation does the problem present.

can you show us your import syntax? – Tomasz Kula Apr 16 '18 at 21:45 — Tomasz Kula, Apr 16 '18 at 21:45

tic · Answer 1 · 2018-04-16T22:48:07.443

You can import angular material with:

import {
  TooltipComponent,
  MatDialogModule,
  MatTooltipModule,
  MatMenuModule
} from '@angular/material';

@NgModule({
  exports: [
    MatDialogModule,
    MatTooltipModule,
    MatMenuModule
  ]
})
export class MaterialModule { }

@NgModule({
  imports: [
    MaterialModule
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

(Encapsulating inside another ngModule makes it easier to separate it from your AppModule)

AOT Compile Failing with Material Modules

1 Answers1