Components: Schematics: ng add throws startTag error

[jerryorta-dev]

Bug:

Installing material using schematic with custom theme option throws error in Terminal.

Error:
Cannot read property 'startTag' of undefined

What is the expected behavior?

Material added with custom theme option configures app with material

What is the current behavior?

An error is thrown in Terminal.

What are the steps to reproduce?

1. Create a new app

   ng new test-app --prefix=tst --style=scss

2. Install material

   yarn add @angular/material

3. Run schematic

   ng add @angular/material --theme=custom

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

MacBook Pro, Sierra 10.13.5
Chrome Version 67.0.3396.99

"@angular/core": "^6.0.3", // all angular deps
 "@angular/cdk": "^6.3.2",
 "@angular/material": "^6.3.2",
 "@angular/cli": "~6.0.8"
"typescript": "~2.7.2",

[valterh4ck3r]

Same error

[j-robin-hunter]

Same error

[sagarrokade404]

is there solution for this error , i am having the same one

[kannanParamasivam]

Same error

[sagarrokade404]

I used ng add @angular/[email protected] it worked ,
it seems ng add @angular/[email protected] have some problem that is latest one

[jerryorta-dev]

If you don't want to downgrade material and retain @angular/[email protected], you can make the same edit in node_modules as in this PR just before you run the schematics.

[shansurat]

The fix by jerryorta-dev worked very well. You really need to modify the file html.js from the dir node_modules/@angular/cli/schematics/utils if you really need to use the latest version of Angular Material.

[StickNitro]

I don't have node_modules/@angular/cli/schematics/utils in my app what am I doing wrong, I have run ng new test-app and this folder above does not exist

[gpeel]

the correct path is : \node_modules\@angular\material\schematics\utilshtml.js

[jonbcampos]

@jerryorta-dev that fix worked! I'm including material as part of a schematic and this was needed to get it to work. hopefully, it goes in soon

[Arshad712]

same error

[richie1983825]

Same Error. Also find when generate schematics, dashboard and sidenav have wrong align

[baswanders]

The same here on Windows and cli version 6.0.8.

[valterh4ck3r]

Uninstall the @angular/material and reinstall...

[virtualkur2]

Use solution by @jerryorta-dev, works as a charm! (Mine: Angular/Cli 6.0.8, Node 10.1.0, Linux Mint 18.3 x64)

[addyfreek]

I am not able to find html.ts file. Should i create and add the file directly?

[virtualkur2]

@addyfreek, in your folder you maybe has an html.js file instead of a .ts one, that's the file you need to change, is the one i change, so try it and hope that's work for you.

[RobynLiu]

Same error

[virtualkur2]

Hi, as I commented on Github, you need to modify a file called html.js,
because there's a chance that the html.ts is not in your folder structure
or is not part of your environment. Hope that's work for you.

El sáb., 7 jul. 2018 a las 10:16, Aditya Ramanathan (<
[email protected]>) escribió:

I am not able to find html.ts file. Should i create and add the file
directly?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/material2/issues/12027#issuecomment-403198093,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AYNCh7jSGTBWwXGNBNuAY5kyUYC97eVuks5uEG5HgaJpZM4VARpg
.

[prashanthv]

Same error

[virtualkur2]

@prashanthv, @RobynLiu are you getting the same error after applying the solution proposed by @jerryorta-dev ???

[Delnar]

@jerryorta-dev fix worked for me.

[petervaldesii]

@jerryorta-dev Fix worked. Thank you!

[shalinsitwala]

@jerryorta-dev That worked! Thanks!
Whoever's not able to find the file, the path is: node_modules\@angular\material\schematics\utilsmd5-77be2dd8c32586138e647638459fa0c5

[Razenbull]

Same here, I am using @angular/[email protected] and the fix #12028 has already been merged in master branch but I still have the error Cannot read property 'startTag' of undefined
edit
fix has only been merged 18 hours ago we have to wait for the next release or make changes from pr manually

[tobbyGithub]

same here, I cant relate with the suggestions made days ago. There is no schematics folder in my @material/. "Cannot read property 'startTag' of undefined"

[shalinsitwala]

@tobbyGithub Refer to my above comment

[lliccien]

Same error

[Takerman]

npm uninstall angular-font-awesome font-awesome

[DivyaDevendran]

I am using the latest angular version : 7.3.2 and I do not find the utils or html.js file in the path node_modules\@angular\material\schematics\utilshtml.js or node_modules\@angular\cli\schematics\utils

Is there an alternate rather than changing the html.js file?
if not, how to create one in the folder?

[progmars]

Have the same issue Cannot read property 'endTag' of null on Angular CDK 7.3.7 and no node_modules@angular\material\schematics\utils folder. It has only folders and files:

ng-generate
ng-update
collection.json
migration.json

[Vangreen]

@progmars I have the same error. Did you fix it?

[kaflake]

same by me

[progmars]

@Vangreen @kaflake It seems, Angular is very sensitive to versions - some combinations just do not work together. I recreated the project from scratch, using ng cli tool and made sure to ignore Visual Studio suggestions to upgrade TypeScript compiler etc., because if you upgrade, something breaks.

Now my package.json file looks like the following:

{
  "name": "my.project",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "npm run build -- --app=ssr --output-hashing=media",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/cdk": "~7.3.7",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/http": "~7.2.0",
    "@angular/material": "~7.3.7",
    "@angular/material-moment-adapter": "~8.1.1",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/platform-server": "~7.2.0",
    "@angular/pwa": "~0.12.0",
    "@angular/router": "~7.2.0",
    "@angular/service-worker": "~7.2.0",
    "@nguniversal/module-map-ngfactory-loader": "~7.1.0",
    "@types/lodash": "~4.14.136",
    "ag-grid-angular": "~21.0.1",
    "ag-grid-community": "~21.0.1",
    "ajv": "~6.10.0",
    "aspnet-prerendering": "~3.0.0",
    "bootstrap": "~4.3.0",
    "core-js": "~2.6.0",
    "file-saver": "~2.0.2",
    "hammerjs": "~2.0.8",
    "jquery": "~3.4.0",
    "moment": "~2.24.0",
    "ngx-color-picker": "~8.1.0",
    "ngx-dropzone-wrapper": "~8.0.0",
    "ngx-spinner": "~7.1.4",
    "oidc-client": "~1.7.1",
    "popper.js": "~1.15.0",
    "rxjs": "~6.3.0",
    "sprintf-js": "~1.1.2",
    "tslib": "~1.9.0",
    "zone.js": "~0.8.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.9",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/file-saver": "^2.0.1",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "@types/sprintf-js": "~1.1.2",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "~0.2.2",
    "node-sass": "~4.12.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2",
    "webpack-cli": "~3.3.2"
  },
  "optionalDependencies": {}
}

and it seems to be working fine.

[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._}