ng add @angular/material fails with cannot read property startTag of undefined

[StephenFluin]

Bug Report or Feature Request (mark with an x)

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

Area

- [ ] devkit
- [X] schematics

Versions

Angular CLI: 6.0.8
Node: 9.9.0
OS: linux x64
Angular: 6.0.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/cli 6.0.8
@angular/material 6.3.3
@ngtools/webpack 6.0.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.1
typescript 2.7.2
webpack 4.8.3

Repro steps

ng new my-app
cd my-app
ng add @angular/material

The log given by the failure

Angular CLI: 6.0.8
Node: 9.9.0
OS: linux x64
Angular: 6.0.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@angular/material                 6.3.3
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

Desired functionality

ng add should successfully add and configure Material in my project.

[vilanz]

Same thing here. I tried running yarn add @angular/material @angular/cdk (tested both at 6.3.3 and 6.3.2) before doing ng add @angular/material, but that gave the same error.

[matippetts]

See angular/material/#12027 and angular/material/#12028.
This is a problem in angular/material2, not angular-cli. The issue is already fixed in the master branch there.

If you don't want to wait for the next release, you can do what I did and just edit node_modules/@angular/material/schematics/utils/html.js in accordance with the diff of the source (html.ts) in the PR fixing this issue. It's a matter of making very minor edits to two lines.

[JoshWilliams92]

Have changed the html.ts file as suggested in the PR repo but still not working.

[StephenFluin]

Closing as duplicate.

[matippetts]

@JoshWilliams92: Just to be clear: html.ts is the typescript file in the source tree; you want to change the transpiled javascript file in the distribution tree: html.js.

I assume you're using a command like, npm install --save @angular/material. In that case, you need to change the distribution file at the location mentioned above: node_modules/@angular/material/schematics/utils/html.js

[angular-automatic-lock-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.}