build --localize error: Cannot read property 'startTag' of null #17019

jnso · 2020-02-13T13:10:26Z

🐞 bug report

Affected Package

The issue is probably caused by package @angular/localize/

Is this a regression?

Yes, the previous version in which this bug was not present was: 8.3.24

Description

When building with
ng build --localize
The build crashes at the end with exit code 1 and the message:
Cannot read property 'startTag' of null

If I omit the 'localize' flag, the build succeeds.
If I run 'ng serve --configuration=' It works just fine.

Console output

[...]
Localized bundle generation complete.

chunk {2} polyfills-es2015.09511dbf2d8d4095a5eb.js (polyfills) 35.7 kB [initial] [rendered]
chunk {3} polyfills-es5.daf0c38b3a8d40ca8fbc.js (polyfills-es5) 127 kB [initial] [rendered]
chunk {1} main-es2015.3d599b43b9ca01c039de.js (main) 1.21 MB [initial] [rendered]
chunk {1} main-es5.3d599b43b9ca01c039de.js (main) 1.38 MB [initial] [rendered]
chunk {0} runtime-es2015.6bd75c31c397efcb90d9.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.6bd75c31c397efcb90d9.js (runtime) 1.45 kB [entry] [rendered]
chunk {4} styles.fac3127509e320d31319.css (styles) 72.2 kB [initial] [rendered]
Date: 2020-02-13T12:42:21.857Z - Hash: 1319cd48dd54c1cf42f3 - Time: 66232ms

Cannot read property 'startTag' of null

Dist folder

index.html is missing from the dist folder

🔬 Minimal Reproduction

Sadly, I have not been able to get to the root cause and cannot provide a good minimal repo for this issue. Greatly appreciate comments on how to investigate where the error originates from.

🔥 Exception or Error


Cannot read property 'startTag' of null

Exit code: 1

🌍 Your Environment

Angular Version:


Angular CLI: 9.0.2
Node: 12.10.0
OS: linux x64

Angular: 9.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.2
@angular-devkit/build-angular     0.900.2
@angular-devkit/build-optimizer   0.900.2
@angular-devkit/build-webpack     0.900.2
@angular-devkit/core              9.0.2
@angular-devkit/schematics        9.0.2
@angular/cdk                      8.2.3
@angular/cli                      9.0.2
@angular/material                 8.2.3
@ngtools/webpack                  9.0.2
@schematics/angular               9.0.2
@schematics/update                0.900.2
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant?
I did try to remove all tags in messages..xlf. Same error (with lots of warning of missing tags of course).

The text was updated successfully, but these errors were encountered:

jnso · 2020-02-13T13:15:19Z

Some further comments:
This is a project upgraded from angular 8 to angular 9 translated with i18n tags.
Tried to do a new i18n-extract but get the same result with the fresh files.

spock123 · 2020-02-13T16:26:07Z

Fwiw I have no issues on our project using 3 languages.

We also use build time translations. Our project also upgraded from ng8->ng9

What happens if you remove all code except your main module? Same error?

What happens with a minimal translation file containing 1 translation?

What does angular json look like? Have you tried configuring localization there?

AndrewKushnir · 2020-02-13T22:26:32Z

Hi @jnso, unfortunately there is not enough information to perform an investigation. Could you please try to isolate which part of the template is causing the problem? You can try removing elements from your template until the problem goes away - that way you should be able to identify minimum template that triggers the issue. Thank you.

jnso · 2020-02-14T08:10:29Z

Hi, thanks for your ideas.

So, I stripped my project down and finally got it to work.

The problem
In index.html I include some external resources via link-tags.

I had for some reason managed to put a link-tag outside of the html tag looking like this:

<!doctype html>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<html lang="en">
 ....
</html>

Once I moved the link tag to its correct position it worked fine.

I guess this is really a user handling error. However, given the weird behavior and error maybe some action is required anyway. Since this caused me to believe it was a i18n issue.

AndrewKushnir · 2020-02-14T18:51:10Z

Hi @jnso, thanks for the update. The error message is a bit unexpected for the case that you described, so if you could provide a minimum repro with i18n configuration that you used and minimum possible index.html file (with incorrect markup) that is causing the problem, we'll perform further investigation. Thank you.

jnso · 2020-02-17T06:42:55Z

@AndrewKushnir
Here is a repo which I think is as minimal I can get it and still reproduce the error.

Github Repo

Instructions how how to reproduce the error is in the README.md file.

Let me know if you need more information.

AndrewKushnir · 2020-02-19T00:45:34Z

Hi @jnso, thanks for the repro. It looks like the problem was caused by Angular CLI logic that updates index.html file. I'm transferring this ticket to Angular CLI repo for further investigation. Thank you.

sanketswani · 2020-06-22T15:10:12Z

Hello I am facing the same issue but, my index.html is all fine.
I have tried to remove all the components except app component.
I have kept only a single translation in my .xlf files.
this is angular.json
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "FMEA": { "i18n": { "locales": { "EN": { "translation": "src/translate/messages.en.xlf", "baseHref": "" }, "FR": { "translation": "src/translate/messages.fr.xlf", "baseHref": "" } } }, "projectType": "application", "schematics": {}, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/FMEA", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ ], "scripts": [ "src/assets/js/searchPhrase.js" ] }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "anyComponentStyle", "maximumWarning": "6kb" } ] }, "EN": { "aot": true, "outputPath": "dist", "i18nFile": "src/translate/messages.en.xlf", "i18nFormat": "xlf", "i18nLocale": "EN", "budgets": [ { "type": "anyComponentStyle", "maximumWarning": "6kb" } ], "i18nMissingTranslation": "error" }, "FR": { "aot": true, "outputPath": "dist/FR", "i18nFile": "src/translate/messages.fr.xlf", "i18nFormat": "xlf", "i18nLocale": "FR", "budgets": [ { "type": "anyComponentStyle", "maximumWarning": "6kb" } ], "i18nMissingTranslation": "error" } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "FMEA:build" }, "configurations": { "production": { "browserTarget": "FMEA:build:production" }, "EN": { "browserTarget": "FMEA:build:EN" }, "FR": { "browserTarget": "FMEA:build:FR" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "FMEA:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "karmaConfig": "src/karma.conf.js", "sourceMap": true, "styles": [ ], "scripts": [ "src/assets/js/searchPhrase.js" ], "assets": [ "src/favicon.ico", "src/assets" ] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "src/tsconfig.app.json", "src/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**" ] } }, "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "FMEA:serve" }, "configurations": { "production": { "devServerTarget": "FMEA:serve:production" } } } } } }, "defaultProject": "FMEA", "cli": { "analytics": "e4e2b604-565f-4d21-8627-bbd154674448" } }
Hello @AndrewKushnir , Have you got any updates regarding this.
Please someone help me in this. I have tried so many things but none is working.

AndrewKushnir · 2020-06-22T17:36:41Z

Hi @sanketswani, could you please create a minimum repro (in a form of Github repo), so that we can investigate the problem further? Thank you.

sanketswani · 2020-06-23T04:54:34Z

@AndrewKushnir Please find below repo of the same.
GitHub Repo

petebacondarwin · 2020-06-23T10:13:28Z

I have found the problem in this case (at least in the reproduction provided).
The index.html is missing an <html> opening tag. See https://github.com/sanketswani/localizeIssue/blob/master/src/index.html#L2

So in both these cases, the problem was that the index.html was not formatted correctly (or at least as expected).

I think the action from all of this is that the CLI should report a clearer error message when the index.html is not correct.

petebacondarwin · 2020-06-23T10:16:53Z

For what it is worth here is the file where the error occurs:

angular-cli/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html.ts

Line 62 in d0ede14

    
           export async function augmentIndexHtml(params: AugmentIndexHtmlOptions): Promise<string> {

Either on line 202 or line 270.

…ream instead of parse5-htmlparser2-tree-adapter Closes: #17019

angular-automatic-lock-bot · 2020-11-05T08:08:39Z

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

AndrewKushnir transferred this issue from angular/angular Feb 19, 2020

alan-agius4 added area: devkit/build-angular severity5: regression labels Feb 19, 2020

ngbot bot modified the milestone: needsTriage Feb 19, 2020

alan-agius4 added freq1: low Only reported by a handful of users who observe it rarely type: bug/fix labels Feb 19, 2020

ngbot bot modified the milestones: needsTriage, Backlog Feb 19, 2020

clydin added severity1: confusing and removed severity5: regression labels Apr 10, 2020

AndrewKushnir added the needs: repro steps We cannot reproduce the issue with the information given label Jun 22, 2020

petebacondarwin removed needs: repro steps We cannot reproduce the issue with the information given type: bug/fix labels Jun 23, 2020

ngbot bot modified the milestones: Backlog, needsTriage Jun 23, 2020

This was referenced Sep 30, 2020

fix(@angular-devkit/build-angular): improve error message when html, head, body tags are not found #18938

Closed

refactor(@angular-devkit/build-angular): use parse5-html-rewriting-stream instead of parse5-htmlparser2-tree-adapter #18955

Merged

clydin closed this as completed in #18955 Oct 5, 2020

clydin pushed a commit that referenced this issue Oct 5, 2020

refactor(@angular-devkit/build-angular): use parse5-html-rewriting-st…

409247e

…ream instead of parse5-htmlparser2-tree-adapter Closes: #17019

angular-automatic-lock-bot bot locked and limited conversation to collaborators Nov 5, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

build --localize error: Cannot read property 'startTag' of null #17019

build --localize error: Cannot read property 'startTag' of null #17019

jnso commented Feb 13, 2020

jnso commented Feb 13, 2020

spock123 commented Feb 13, 2020 •

edited

AndrewKushnir commented Feb 13, 2020

jnso commented Feb 14, 2020

AndrewKushnir commented Feb 14, 2020

jnso commented Feb 17, 2020

AndrewKushnir commented Feb 19, 2020

sanketswani commented Jun 22, 2020

AndrewKushnir commented Jun 22, 2020

sanketswani commented Jun 23, 2020

petebacondarwin commented Jun 23, 2020

petebacondarwin commented Jun 23, 2020

angular-automatic-lock-bot bot commented Nov 5, 2020

build --localize error: Cannot read property 'startTag' of null #17019

build --localize error: Cannot read property 'startTag' of null #17019

Comments

jnso commented Feb 13, 2020

🐞 bug report

Affected Package

Is this a regression?

Description

Console output

Dist folder

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

jnso commented Feb 13, 2020

spock123 commented Feb 13, 2020 • edited

AndrewKushnir commented Feb 13, 2020

jnso commented Feb 14, 2020

AndrewKushnir commented Feb 14, 2020

jnso commented Feb 17, 2020

AndrewKushnir commented Feb 19, 2020

sanketswani commented Jun 22, 2020

AndrewKushnir commented Jun 22, 2020

sanketswani commented Jun 23, 2020

petebacondarwin commented Jun 23, 2020

petebacondarwin commented Jun 23, 2020

angular-automatic-lock-bot bot commented Nov 5, 2020

spock123 commented Feb 13, 2020 •

edited