angular: Error when attempting to bind to component properties initialized outside constructor with TS 2.5

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request

Current behavior

Angular 5.0.0-rc.1 throws “TypeError: e.component.newUser is undefined” when running the following component (after AoT compilation):

import {Component} from '@angular/core';

@Component({
    template: `
        <form>
            <input name="name" [(ngModel)]="newUser.fullName"/>
        </form>`,
})
export class RegisterComponent {
    public newUser = {
        fullName: ''
    };
}

Workaround

It works if I move the newUser assignment into a constructor method, but this wasn’t necessary in Angular 4.x.

Expected behavior

No error should be thrown. newUser properties should be bound to form fields as expected when the component is initialized.

What is the motivation / use case for changing the behavior?

The above component worked without errors in Angular 4.x.

Environment


Angular version: 5.0.0-rc.1

Browser:
- [x] Chrome (desktop) version 61
- [x] Firefox version 56
- [x] Edge version 15
 
For Tooling issues:
- Node version: 8.6
- Platform:  Windows

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 23 (19 by maintainers)

Most upvoted comments

@xnnkmd As @sarunint said, it is a breaking change to change the minimum version of TypeScript we support and the only one we were ready at the beginning of the RC phase was 2.4 (2.5 shipped just after we started) and we try very hard not to make breaking changes once we enter RC.

The reason we cannot arbitrarily upgrade to a new version of TypeScript when it releases is because TypeScript does not follow semver and they will make breaking changes in minor releases some of which break us. In the case of 2.4 to 2.5, they changed some of the internal APIs we used to implement Tsickle (which performs the decorator down-leveling). We now have a Tsickle that supports 2.5 but not one that supports 2.4 and 2.5, but we will shortly. When that is available we will increase the supported version of TypeScript to 2.5 (that is, supporting both 2.4 and 2.5). As 2.6 has now been released, we are evaluating when we can support that as well.

+11

chuckjaz on Nov 5, 2017

Internally at Google, we are still using TS 2.4, and therefore haven’t tested ngc with TS 2.5 extensibly. But it’s one of our next tasks and will ship probably with Angular 5.1.

For now we decided to let users know that we only work with TS 2.4, so that there are no surprises like this via the entry in package.json (see https://github.com/angular/angular/commit/b922743f6e023a4fd76bf9b8e571e727073a1793).

+10

tbosch on Oct 18, 2017

@tbosch I noticed that angular 5 does a lot of work to improve static analysis to catch errors early on where they are cheap to fix (i.e. fullTemplateTypeCheck etc.). On the other hand you use old versions of typescript that does not find all the errors staticly like the newest version does (in particular in strict mode). Would it not make sense to support newer versions of typescript more aggresively to get all static checks working and save costs ?

xnnkmd on Nov 3, 2017

I think this is a bug in ngc.

The workaround is to add "angularCompilerOptions": { "annotationsAs": "decorators" } to your tsconfig to disable tsickle.

petebacondarwin on Oct 6, 2017