ng update @angular/core and .pug templates

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ x] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Not sure.

Description

We are using pug as a template preprocessor. We are trying to migrate from Angular 7 to Angular 8. We manage to update angular-cli. However, when we run ng update @angular/core --from 7 --to 8 --migrate-only we get template parsing Typescript errors.

🔥 Exception or Error

 The template migration strategy uses the Angular compiler internally and therefore projects that no longer build successfully after the update cannot use the template migration strategy. Please ensure there are no AOT compilation errors.
            
            Could not setup migration strategy for "src/tsconfig.app.json". The following error has been reported:

Error: error TS100: Template parse errors:
            Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("arret(*ngIf="showCaret")
            .dropdown-body(#dropdown='')
              ng-content(select="[dropdown-part=dropdown]")[ERROR ->]"): /home/ograbek/Documents/projects/fieldly-angular/src/app/shared/components/dropdown/dropdown.template.pug@8:47
            Invalid ICU message. Missing '}'. ("arret(*ngIf="showCaret")
            .dropdown-body(#dropdown='')
              ng-content(select="[dropdown-part=dropdown]")[ERROR ->]"): /home/ograbek/Documents/projects/fieldly-angular/src/app/shared/components/dropdown/dropdown.template.pug@8:47

The pug template is:

.dropdown-toggle(
  (click)='toggleDropdown($event)',
  [ngClass]="({'b-button': asButton, 'm-success': asButton})"
)
  .dropdown-toggle-content
    ng-content(select="[dropdown-part=toggle]")
  .b-carret(*ngIf="showCaret")
.dropdown-body(#dropdown='')
  ng-content(select="[dropdown-part=dropdown]")

We notice that the problem is with ngClass and ng-content.

🌍 Your Environment

Angular CLI: 8.2.1
Node: 10.15.2
OS: linux x64
Angular: 8.2.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.802.1
@angular-devkit/build-angular     0.802.1
@angular-devkit/build-optimizer   0.802.1
@angular-devkit/build-webpack     0.802.1
@angular-devkit/core              8.2.1
@angular-devkit/schematics        8.2.1
@angular/cli                      8.2.1
@ngtools/webpack                  8.2.1
@schematics/angular               8.2.1
@schematics/update                0.802.1
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.38.0

[Lhari]

I just attempted to force upgrade my Angular 7.3.x project with pug enabled to Angular 9, while I no longer got the EOF error, I now get an ICU error

Invalid ICU message. Missing '}'. 
img.preload(#preloader, [ngClass]="{'is-preload': preload, 'animation': animation}", [ERROR ->](error)="onError()", [draggable]="draggable")"): projectPath/components/image/tpl.image.pug@27:89

[Olgagr]

@perrosen No, they will probably won’t fix that for 8 migrations, only for 9 migrations. So the options are:

• migrate 7 -> 9
• migrate from HTML to pug and then migrate to 8

We choose the second option and I can only recommend it. The process is easy and painless (just use pug CLI) and after going from pug to HTML our tests are more than twice faster which is a big deal.