jnso commented 4 years ago

🐞 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).

jnso commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

petebacondarwin commented 4 years ago

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 commented 4 years ago

For what it is worth here is the file where the error occurs: https://github.com/angular/angular-cli/blob/d0ede149187fee45646aad5a7e55e1d268ac5bfe/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html.ts#L62

Either on line 202 or line 270.