Angular-cli: Prod build fails with "Can't resolve '@angular/material/material'

[SteveHWork]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.2.1
node: 7.1.0
os: win32 x64
@angular/animations: 4.3.1
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/upgrade: 4.3.1
@angular/cli: 1.2.1
@angular/compiler-cli: 4.3.1

Repro steps.

Attached a cut down project that shows the issue:
TestApp.zip
npm install
ng build --prod

The log given by the failure.

ERROR in ./app/$$_gendir/app.module.ngfactory.ts
Module not found: Error: Can't resolve '@angular/material/material'
in 'C:Codeapp$$_gendir'
@ ./app/$$_gendir/app.module.ngfactory.ts 30:0-50
@ ./app/main.ts
@ multi ./app/main.ts

Desired functionality.

Prod build completes without error.

Mention any other details that might be useful.

This works with angular v4.2.6 but fails with v4.3.0/v4.3.1

A non-prod build works fine.

[BobBDE]

Hi,

I'm not sure of what i'll say but you can give it a try.
I think this is due to the new version of Typescript used by angular 4.3. In this version of typescript there is an error if an import has an unresolved path.
So double check you app and see if you can see an import (or link) to '@angular/material/material' even if this import is not used.
Try to change it (maybe remove one "/material") or remove it.

[SteveHWork]

Thanks for your response, BobBDE. The Typescript change is interesting and sounds relevant.

I couldn't find any references to "@angular/material/material" in the app. Maybe this path referenced by one of the dependencies, or the theming support.

I'll try stripping down my sample app further to see what I can get working. But I'm confused because I've already removed all the components, services etc.

[alex321]

Same issue here. It didn't seem to be caused by the latest angular though. It might be something to do with node/npm versions.

[SteveHWork]

alex321: what versions of node/npm do you have? I'm using node 7.1.0, npm 3.10.9.

[bmazaheri]

Same here with:
win32 x64, node: 8.1.3
@angular/cli: 1.2.3
@angular: 4.3.1
typescript: 2.4.2

[criticalbh]

Same here:

@angular/cli: 1.2.1 
node: 7.5.0
os: darwin x64
@angular/animations: 4.3.0
@angular/common: 4.3.0
@angular/compiler: 4.3.0
@angular/core: 4.3.0
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.3.0
@angular/http: 4.3.0
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.0
@angular/platform-browser-dynamic: 4.3.0
@angular/router: 4.3.0
@angular/cdk: 2.0.0-beta.8
@angular/cli: 1.2.1
@angular/compiler-cli: 4.3.0
@angular/language-service: 4.3.0

[BobBDE]

@SteveHWork
If this error is happening for everyone with an angular version > 4.3, I think the error is not because of angular-cli but angular/material. It should not be compatible with this angular version ( maybe because of typescript 2.4.2).
So I think you should reopen this bug in the @angular/material repository.

[criticalbh]

I have investigated it further and on https://github.com/angular/angular-cli/issues/5802 mcosta74 mentioned those parameters: -prod -aot false.

I have tried it out, and indeed the error was not there anymore, and dist of 15MB became 3MB.

[BobBDE]

@criticalbh yeah this should work with those parameters because you disabled the aot compilation. You can do it until the problem is fix but you should not keep this solution because thanks to the AOT compilation the performances are really improved (mostly in launch time).
The AOT compilation try to compile everyfile and at a point there is a reference to @angular/material/material which the compilator can't find.

[criticalbh]

@BobBDE Thanks for pointing it out.
grep -rnw './' -e '@angular/material/material' returns 0 results in complete project structure (including node_modules). It looks like the problem is deeper in the system 😄

[csvn]

@criticalbh with ng build --aot, project files are compiled with Angular compiler, and generates .ngfactory.ts files. This happens in memory with Webpack, and isn't output to disk. It's not possible to search workspace for any mention of it (i.e., ./app/$$_gendir/app.module.ngfactory.ts does not exist)

[filipesilva]

Heya, I don't really know what the problem is but there's an issue to track it in the Angular Material2 repo: https://github.com/angular/material2/issues/6046

I'll reopen here if needed.

[filipesilva]

Heya, the Material team has identified the issue in angular/material2#6046, and are looking to fix it.

[brahimkraiem]

I have this error when i'm using angular/material and can't solve it :
ERROR in /home/brahim/WebstormProjects/firebase-authentification/node_modules/@angular/material/list/typings/list.d.ts (61,22): Class 'MatListItem' incorrectly implements interface 'CanDisableRipple'.
Property 'disableRipple' is missing in type 'MatListItem'.
ERROR in /home/brahim/WebstormProjects/firebase-authentification/node_modules/@angular/material/core/typings/common-behaviors/common-module.d.ts (8,10): Module '"/home/brahim/WebstormProjects/firebase-authentification/node_modules/@angular/core/index"' has no exported member 'InjectionToken'.
ERROR in /home/brahim/WebstormProjects/firebase-authentification/node_modules/@angular/material/core/typings/compatibility/compatibility.d.ts (8,10): Module '"/home/brahim/WebstormProjects/firebase-authentification/node_modules/@angular/core/index"' has no exported member 'InjectionToken'.
ERROR in /home/brahim/WebstormProjects/firebase-authentification/node_modules/@angular/material/core/typings/datetime/date-adapter.d.ts (8,10): Module '"/home/brahim/WebstormProjects/firebase-authentification/node_modules/@angular/core/index"' has no exported member 'InjectionToken'.
ERROR in /home/brahim/WebstormProjects/firebase-authentification/node_modules/@angular/material/core/typings/datetime/date-formats.d.ts (8,10): Module '"/home/brahim/WebstormProjects/firebase-authentification/node_modules/@angular/core/index"' has no exported member 'InjectionToken'.
ERROR in /home/brahim/WebstormProjects/firebase-authentification/node_modules/@angular/material/core/typings/line/line.d.ts (8,10): Module '"/home/brahim/WebstormProjects/firebase-authentification/node_modules/@angular/core/index"' has no exported member 'Renderer2'.
ERROR in /home/brahim/WebstormProjects/firebase-authentification/node_modules/@angular/material/core/typings/option/optgroup.d.ts (9,22): Class 'MatOptgroup' incorrectly implements interface 'CanDisable'.
Property 'disabled' is missing in type 'MatOptgroup'.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}