Angular-cli: Error with build --prod & templates since angular/cli 1.0

[alapasset]

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [ ] feature request

Versions.

$ ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ ? \ | '_ \ / _| | | | |/ _ | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ __| |_|__, |__,_|_|__,_|_| ____|_____|___|
|___/
@angular/cli: 1.0.0
node: 6.9.2
os: win32 x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0
@angular/compiler-cli: 2.4.10

Repro steps.

ng build all is OK
ng build --prod is KO since morning after update to angular/cli 1.0

I have one class Field with attributes :

export class Field {
    key: string;
    type: string;
    label: string;
    order: number;
    fields: Array<Field>;
    validators: FormValidators;
    attributes: Attributes;
}

And this :

export class Attributes {
    canBeCreated: boolean;      // Apparait dans le formulaire de création
    canBeEdited: boolean;       // Apparait dans le formulaire de modification
    canBeFiltered: boolean;     // Apparait dans les filtres
    canBeSorted: boolean;       // Permet le tri sur la colonne
    isInList: boolean;          // Apparait dans la liste
    isInDetail: boolean;        // Apparait dans le détail
    placeholder: string;        // Texte qui apparait quand le champ est vide lors de la création ou modification

    constructor (attr: Attributes) {
        this.canBeCreated = attr && attr.canBeCreated ? attr.canBeCreated : true;
        this.canBeEdited = attr && attr.canBeEdited ? attr.canBeEdited : true;
        this.canBeFiltered = attr && attr.canBeFiltered ? attr.canBeFiltered : true;
        this.canBeSorted = attr && attr.canBeSorted ? attr.canBeSorted : true;
        this.isInList = attr && attr.isInList ? attr.isInList : true;
        this.isInDetail = attr && attr.isInDetail ? attr.isInDetail : true;
        this.placeholder = attr && attr.placeholder ? attr.placeholder : '';
    }
}

export class CheckboxAttributes extends Attributes {
    options: Array<{label: string, value: string}>;  // Liste des valeurs possibles de les checkbox
    isBinary: boolean;                               // Choix true/false ou multiple

    constructor(attr: CheckboxAttributes) {
        super(attr);
        this.options = attr && attr.options ? attr.options : null;
        this.isBinary = attr && attr.isBinary ? attr.isBinary : false;
    }
}

In my component checkbox.component.html :

    <div *ngIf="!field.attributes.isBinary">
         .....
    </div>

The log given by the failure.

ERROR in C:/Users/LAPASSAL/Projects/marty/src/$$_gendir/app/generic/components/checkbox-input/checkbox-input.component.ngfactory.ts (377,66): Property 'isBinary' does not exist on type 'Attributes'.
C:/Users/LAPASSAL/Projects/marty/src/$$_gendir/app/generic/components/checkbox-input/checkbox-input.component.ngfactory.ts (380,61): Property 'isBinary' does not exist on type 'Attributes'.

In typescript can I cast the object type to CheckboxAttributes with (this.field.attributes as CheckboxAttributes).isBinary ? false : [] but how can I do this in template? Any idea ?

Thx

[aveferrum]

Hi, there's literally no isBinary property for the Attributes class. So it's normal that this fails because your are checking boolean value of something undefined.

[alapasset]

but my field.attributes can a Attributes or a CheckboxAttributes
it is dynamic

[hccampos]

We are getting hundreds of errors in our AoT build too after the upgrade. Even lots of errors in external libraries that worked just fine in all the RCs (both of Angular and the CLI):

ERROR in /home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/button/mdl-button.component.ngfactory.ts (1,1): 'l' is declared but never used.
ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/button/mdl-button.component.d.ts.MdlButtonComponent_Host.html (2,1): '$event' is declared but never used.

ERROR in /home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/card/mdl-card.component.ngfactory.ts (1,1): 'l' is declared but never used.
/home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/card/mdl-card.component.ngfactory.ts (1,1): 'l' is declared but never used.
/home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/card/mdl-card.component.ngfactory.ts (1,1): 'l' is declared but never used.
/home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/card/mdl-card.component.ngfactory.ts (1,1): 'l' is declared but never used.
/home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/card/mdl-card.component.ngfactory.ts (1,1): 'l' is declared but never used.
/home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/card/mdl-card.component.ngfactory.ts (1,1): 'l' is declared but never used.

ERROR in ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/checkbox/mdl-checkbox.component.d.ts.MdlCheckboxComponent_Host.html (2,1): '$event' is declared but never used.

ERROR in ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/chips/mdl-chip.component.d.ts.MdlChipComponent.html (5,5): '$event' is declared but never used.

ERROR in /home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/dialog-outlet/mdl-dialog-outlet.component.ngfactory.ts (1,1): 'l' is declared but never used.
/home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/dialog-outlet/mdl-dialog-outlet.component.ngfactory.ts (1,1): 'l' is declared but never used.

ERROR in /home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/icon/mdl-icon.component.ngfactory.ts (1,1): 'l' is declared but never used.

ERROR in /home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/list/mdl-list.component.ngfactory.ts (1,1): 'l' is declared but never used.
/home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/list/mdl-list.component.ngfactory.ts (1,1): 'l' is declared but never used.
/home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/list/mdl-list.component.ngfactory.ts (1,1): 'l' is declared but never used.
/home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/list/mdl-list.component.ngfactory.ts (1,1): 'l' is declared but never used.
/home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/list/mdl-list.component.ngfactory.ts (1,1): 'l' is declared but never used.
/home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/list/mdl-list.component.ngfactory.ts (1,1): 'l' is declared but never used.
/home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/list/mdl-list.component.ngfactory.ts (1,1): 'l' is declared but never used.
/home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/list/mdl-list.component.ngfactory.ts (1,1): 'l' is declared but never used.

ERROR in ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/icon-toggle/mdl-icon-toggle.component.d.ts.MdlIconToggleComponent_Host.html (2,1): '$event' is declared but never used.

ERROR in ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/radio/mdl-radio.component.d.ts.MdlRadioComponent_Host.html (2,1): '$event' is declared but never used.

ERROR in ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/snackbar/mdl-snackbar.service.d.ts.MdlSnackbarComponent.html (5,7): '$event' is declared but never used.

ERROR in ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/switch/mdl-switch.component.d.ts.MdlSwitchComponent_Host.html (2,1): '$event' is declared but never used.

ERROR in ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/table/mdl-table.component.d.ts.MdlTableComponent.html (7,18): '$event' is declared but never used.
ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/table/mdl-table.component.d.ts.MdlSelectableTableComponent.html (7,18): '$event' is declared but never used.

ERROR in /home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/menu/mdl-menu-item.component.ngfactory.ts (1,1): 'l' is declared but never used.

ERROR in ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/layout/mdl-layout.component.d.ts.MdlLayoutComponent.html (13,9): '$event' is declared but never used.

ERROR in ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/layout/mdl-layout-header.component.d.ts.MdlLayoutHeaderComponent.html (11,15): '$event' is declared but never used.
ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/layout/mdl-layout-header.component.d.ts.MdlLayoutHeaderComponent.html (16,15): '$event' is declared but never used.
ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/layout/mdl-layout-header.component.d.ts.MdlLayoutHeaderComponent.html (6,12): '$event' is declared but never used.
ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/layout/mdl-layout-header.component.d.ts.MdlLayoutHeaderComponent_Host.html (2,1): '$event' is declared but never used.

ERROR in /home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/layout/mdl-layout-drawer.component.ngfactory.ts (1,1): 'l' is declared but never used.

ERROR in /home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/layout/mdl-layout-content.component.ngfactory.ts (1,1): 'l' is declared but never used.

ERROR in /home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/layout/mdl-layout-header-row.component.ngfactory.ts (1,1): 'l' is declared but never used.

ERROR in /home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/layout/mdl-layout-title.component.ngfactory.ts (1,1): 'l' is declared but never used.

ERROR in /home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/layout/mdl-layout-spacer.component.ngfactory.ts (1,1): 'l' is declared but never used.

ERROR in /home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/tabs/mdl-tab-panel.component.ngfactory.ts (1,1): 'l' is declared but never used.

ERROR in ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/tabs/mdl-tabs.component.d.ts.MdlTabsComponent.html (5,9): '$event' is declared but never used.
ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/tabs/mdl-tabs.component.d.ts.MdlTabsComponent.html (12,9): '$event' is declared but never used.

ERROR in ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/textfield/mdl-textfield.component.d.ts.MdlTextFieldComponent.html (51,7): '$event' is declared but never used.

ERROR in /home/hugo/pix4d/spa/src/$$_gendir/node_modules/@angular-mdl/core/components/dialog-outlet/mdl-backdrop-overlay.component.ngfactory.ts (1,1): 'l' is declared but never used.

ERROR in ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/dialog/mdl-simple-dialog.component.d.ts.MdlSimpleDialogComponent.html (8,9): '$event' is declared but never used.
ng:///home/hugo/pix4d/spa/node_modules/@angular-mdl/core/components/dialog/mdl-simple-dialog.component.d.ts.MdlSimpleDialogComponent_Host.html (2,1): '$event' is declared but never used.

[rainstormza]

ERROR in /Users/ARM/Desktop/kibito_web/src/$$_gendir/app/admin/member/member-add/member-add.component.ngfactory.ts (1627,45): Property 'member_name' is private and only accessible within class 'MemberAddComponent'.

hundreds of errors in our AoT happen after upgrade cli 1.0.0 (from beta 32)
using
ng build is ok
but ng build -prod not ok

[clydin]

AOT (which is enabled via --prod) requires that any property/field/function accessed from within a template be public. This is an Angular restriction. Previously this would only be represented as either a runtime error or unexpected behavior (depending on the usage).

[rainstormza]

ng build -prod (work fine)

export class AppComponent {
  title = 'app works!';
}

but if I use private variable

export class AppComponent {
  private title = 'app works!';
}

error happens
ERROR in /Users/ARM/Desktop/kibito-ang4/src/$$_gendir/app/app.component.ngfactory.ts (1,1): Property 'title' is private and only accessible within class 'AppComponent'.

Does that mean we have to change all private variable to public variable ?

@clydin

[aveferrum]

@rainstormza unfortunately yes. You need to update all variables used in the template as public.

[alapasset]

@clydin all variables used in template :)

[clydin]

Yes. I know this is unfortunate for those with large applications and it seems counter-intuitive from an encapsulation perspective, but Angular's AOT mode requires it and these errors were actually always present just not reported.

[aveferrum]

@clydin not to complain, but could have informed the developer such as "Using private template variables is deprecated and will be removed in final release. Please use public"

[cexbrayat]

@demirk4n It has been the case for a long time, it's just that the CLI was not showing the errors reported by the Angular compiler when building with AoT (that was a bug). It has been fixed just before the 1.0 release.

[e-oz]

@clydin no, it's not Angular restriction. rc5 was compiled successfully with same code (and without errors in runtime) and 1.0 can't be compiled.

[filipesilva]

I think this has been there for a while with the AOT compiler itself but as @clydin said we were not reporting it in the CLI, and that changed in https://github.com/angular/angular-cli/pull/5601.

This can be reproduced in a brand new project by doing the following change (different from original issue but same root cause):

export class AppComponent {
  private title = 'app works!';
}

ERROR in D:/sandbox/experimental-proj/src/$$_gendir/app/app.component.ngfactory.ts (1,1): Property 'title' is private and only accessible within class 'AppComponent'.



md5-0545a0b3209b648c212526115793ff31



npm install --save-dev @ngtools/[email protected]
rm -rf node_modules/\@angular/cli/node_modules/\@ngtools/webpack/

This is not optimal and does not carry over on reinstalls.

EDIT: a better workaround is to use @angular/[email protected] instead, as it carries over reinstalls and there isn't a big difference between the two versions.

[e-oz]

I just compiled ng build --prod --aot successfully with Angular 1.0 (release) and AngularCLI 1.0.0-rc.2. Works just fine. But AngularCLI 1.0 (release) can't compile same code. So it's not the Angular issue.

[filipesilva]

By "AOT compiler" I meant the ngc binary. If you try using it directly on your project you will get the same error (warning: this will generate .ngfactory.ts files and others):

$ $(npm bin)/ngc src/tsconfig.app.json
Error at D:/sandbox/experimental-proj/src/app/app.component.ngfactory.ts:31:30: Property 'title' is private and only accessible within class 'AppComponent'.

What was happening was that the CLI on older versions was always swallowing these errors.

[e-oz]

Could you please just display them but don't break compilation?
On Fri, 24 Mar 2017 at 17:39, Filipe Silva [e-mail] wrote:

By "AOT compiler" I meant the ngc binary. If you try using it directly on
your project you will get the same error (warning: this will generate
.ngfactory.ts files and others):

$ $(npm bin)/ngc src/tsconfig.app.json
Error at D:/sandbox/experimental-proj/src/app/app.component.ngfactory.ts:31:30: Property 'title' is private and only accessible within class 'AppComponent'.

What was happening was the the CLI on older versions was always swallowing
these errors.

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

[clydin]

They are actual errors. Angular's AOT mode requires public access; it is not a CLI limitation.

[e-oz]

looks like you are ignoring what I write. Ok.
On Fri, 24 Mar 2017 at 17:48, clydin [e-mail] wrote:

They are actual errors. Angular's AOT mode requires public access; it is
not a CLI limitation.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/5623#issuecomment-289077974,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAgIELq93bUnEhzDjLXXCUsBH5GcMv-Dks5ro_PqgaJpZM4MoHrW
.

[billdwhite]

@clydin I'm not sure I understand. You say they are "actual errors", but I'm confused as to why they were not "actual errors" yesterday with rc.4? I got several warnings but the app ran fine. Today it won't even compile. Was my app missing functionality yesterday that I'm not aware of? And will that be restored once I sift through my code and switch every template-accessed variable to public?

[filipesilva]

@billdwhite see my comment above: https://github.com/angular/angular-cli/issues/5623#issuecomment-289075279

What was happening was that the CLI on older versions was always swallowing these errors.

[billdwhite]

Thanks @filipesilva. I now understand what caused it, but why the requirement? Seems like template variables being private (or at least protected) makes more sense than exposing everything the template is using within it's own component to the outside world......just my view on it.

[e-oz]

Issue is not only with private/public variables, please don't convert it to simple private to public replacement. There are also errors like "value ISomeType can't be assigned to boolean" (just compiler's fault) or when variable is declared in template (#var) and compiler complains that there is no such field in component.

[filipesilva]

@billdwhite I am not the right person to ask about the requirement. It is an AOT Compiler requirement, and the CLI just uses an implementation of it via @ngtools/webpack.

Issues with the AOT compiler per se are better suited for https://github.com/angular/angular as that's the right repository.

It was a CLI bug that we were ignoring that whole class of errors though. And the result is that until now CLI users had AOT errors in their projects that we weren't showing, and so they never had a chance to fix them.

Like @e-oz said, it's not just private/public properties, it's other AOT errors as well.

Now all these errors appear all at once which is hard to deal with.

EDIT: this is the original issue that needed fixing: https://github.com/angular/angular-cli/issues/4538

[hansl]

We always swallowed TS errors on templates, and now we report them as errors. I'm looking into reporting warnings as warnings instead, which seems to be the case here.

[e-oz]

@filipesilva I can compile project with Angular 1.0 (release) and CLI 1.0.0-rc.2, but not with CLI 1.0 (also with Angular 1.0). Isn't it obvious that it's not angular/angular error?

[ctrl-brk]

That's why it's good to use WebStorm with Typescript window open :)
I've caught all these errors long time ago.

[hccampos]

There seem to be two things here. There is the private variables problem and there is the noUnusedLocals problem. In our case, we have no private variable errors, but we have a million unused locals errors, even in components that don't declare any of those locals (they are added by ngc).

[filipesilva]

@e-oz see https://github.com/angular/angular-cli/issues/5623#issuecomment-289075279 for a repro that shows the AOT compiler (ngc) has always shown those errors. You can use this with 1.0.0-rc.2 as well, and see that the CLI wouldn't show you those errors but ngc would.

And that was a bug (#4538) that we fixed.

[elvisbegovic]

What is about this? Does cli will change our private/protected variable during compiling or does cli will ad some command to rename type to public only if they are used in template !!! Or what will be done here? Thanks

[e-oz]

@istiti CLI will demand to fix all errors and warnings. Even if they are not important.
ONLY PERFECT CODE, YOU, WEAK HUMANS!!!

[e-oz]

Also it means any false positive in compiler will kill your build.

[hccampos]

@e-oz I understand the pain. Our build also broke due to this (and our templates are good). But we just reverted to the previous CLI and that's ok. The tone you are using is not very helpful, imho.

[e-oz]

@hccampos I just reverted to rc2 and it's ok (although I see they don't want to change anything so we will stick to rc2 forever). What tone are you talking about? Caps was just to show the joking tone.

[elvisbegovic]

Cli clam to simplify lige i think this needed to be in readme or find any fix please !!!! My project is big!!!

[hansl]

@hccampos I'm trying to reproduce the unused local variables problem and even with mdl I still cannot. This seems to be a bug in the compiler and we're working on fixing it.

We will NOT fix the error related to using private variables (or actual user errors).

Could you give me a small repro repository that I can send to the compiler team? I'm available on gitter.

[alastair-todd]

" AOT mode requires public access"

No. My internal class members are private. AOT is broken.

This is the same smell as making members public so that test frameworks can access them.

[alastair-todd]

The promise of a release candidate has also been broken - no breaking changes.

[rainstormza]

constructor(private memberService:MemberService) { }

What about service ?

I have to change private to public too ?

[e-oz]

@alastair-todd

No. My internal class members are private. AOT is broken.

No, you have to make fields of your class public if you want to access them outside. Template is outside. It's not something new, it's an old thing in AOT.

@rainstormza

What about service ? I have to change private to public too ?

No. If your template isn't trying to use fields of service class, but I have never seen such cases.

[rainstormza]

@e-oz thanks

anyway, I have a big project and it has a lot of private variable (might be thousand).
I can't imagine if I have to change all of those private variable. :(

[ctrl-brk]

@rainstormza looks like the only alternative is not to use AOT. At least until everything is fixed.

[elvisbegovic]

I know I don't make me friends by saying that but : If angular tell they won't make breakin change like angular 1 and 2 the cli will do it from rc4 to 1.0.0 !!

I sell idea to my boss to use angular (6months ago) now my app is big and I get thiusands errors on --prod and will tell him sorry Chief just need some hours to change types members used in template to public ! WHAT A MESS

Need be productive, no time check all blogs post and read 500issue to know why cli disable this withiuts any warnig.

N.B. Yes i know it's my fault I bet on beta.

[hccampos]

@istiti you know you can just lock your version to rc.4, right? It will all still work. Or even better, you can fork the CLI, do some fixes and submit a PR. It is OpenSource and nobody is under any obligation to concede to your demands.

[aveferrum]

@istiti if you are doing long term jobs you need to keep your libraries stable enough and plan migrations accordingly.I know a lot of shops using AngularJS - not even 2.x just for the sake of stability. You can't expect any software to be %100 bug free on day one. Furthermore you can upgrade your global @angular/cli to 1.0 and use rc.4 locally.

[elvisbegovic]

@demirk4n u r totally right, i just expect from cli to write in even ONE LINE in console that im using private in template even if it compile aot (i assum its beta but not serious at all)

Cheers

[ojourmel]

@e-oz

What about service ? I have to change private to public too ?

No. If your template isn't trying to use fields of service class, but I have never seen such cases.

I understand the restrictions AOT places on the angular team, but this use case happens often when managing authenticated state:

In this case, some nav template is referencing the AuthService, which has been injected into the component as private authService, to check user login state

````

Get More Deals By Logging In

View Private Deals

Private Deals

````
Reference: https://auth0.com/blog/angular-2-authentication/

The angular docs them self reference the use of an AuthService.isLoggedIn property [1]

Directly using service methods or properties in templates, especially when combined with the async pipe, it not completely out of the question.

[e-oz]

@ojourmel in your example you are using publicly accessed method, not private field :) I mean, in case of services it's easy to predict what property will be used outside to make this field public. But yes, maybe my initial statement was too broad :)

[harilal]

@filipesilva @hansl it's good to show the errors. But we need to address it in changelog as breaking change. Developers like myself were developing production apps find this very disturbing. Since we need to change almost all the source files. It would be better to address it in breaking change, so that we won't get panicked.

[ojourmel]

@e-oz
Unless I am mistaken, this is still an issue. Even though I am accessing a public method or property, I am doing it via the private authSerivce instance, that was injected into the component.

In this way, AOT will fail to allow me to use the authService object in the template, since it is private. Thus, the only way to use services in templates directly, would be to make them public. This is problematic, as services are essentially singletons, managed by the dependency injection framework, and can have far reaching impacts on your application.

I have done up a very small project to demo this issue: https://github.com/ojourmel/demoAOTPrivateIssues

[webcat12345]

Thanks guys for all comments above.

I am Angular2 crazy follower and recommended ng2 to client. :) also upgrading ng versions immediately when new version is released.

But Today I got a lots of errors while building product and it make all of us frightened. :(

I will try to migrate all private properties to public but I hopes this issue would be solved soon from respected angular team :)

[elvisbegovic]

thanks to team for this breakin change

[emreavsar]

so, everybody is complaining about these problems, but nobody provides a solution?

what's the best practice here?

• not declaring private or public
• declaring public
• getter around it?

thanks

[elvisbegovic]

it's simple, aot require all members you use outisde your class be public. But this cli console, doesn't tell us before relase! Team forget people using cli since a while with big project, response: we have to KNOW that for aot all members are public !

I can say too:

we have to know that when using var a:number = "bonjour" will throw error why show it in console ? LOL

maybe now cli is good, but before release cli was 💩

[xiluo58]

Is there a tool to check this kind of error? I remember ng lint reports these errors before, but doesn't do it now.
I am using @angular/cli 1.0, default dependencies versions and default settings.

[basst314]

I'm also looking for a best practice here.
In addition to @emreavsar 's suggestions it would also be reasonable to

• leave your field private, but add a public getter(/setter) if you need access.

This aligns pretty well with common encapsulation conventions with the only downside to write a little more code.

[webcat12345]

Thanks for your comment @basst314. But Too many codes should be modified. That is not good option.
Anybody please let me know the version of dependencies I can use without any modification.

{
  "name": "ng-reason",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "^1.0.0-rc.4",
    "@angular/common": "~2.4.4",
    "@angular/compiler": "~2.4.4",
    "@angular/core": "~2.4.4",
    "@angular/forms": "~2.4.4",
    "@angular/http": "~2.4.4",
    "@angular/platform-browser": "~2.4.4",
    "@angular/platform-browser-dynamic": "~2.4.4",
    "@angular/router": "~3.4.4",
    "@types/google-maps": "^3.2.0",
    "angular2-tag-input": "^1.2.1",
    "core-js": "^2.4.1",
    "ng2-bootstrap": "^1.2.6",
    "ng2-bs3-modal": "^0.10.4",
    "ng2-map": "^0.16.3",
    "ng2-table": "^1.3.2",
    "rxjs": "5.2.0",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "@types/node": "^7.0.0",
    "@angular/cli": "^1.0.0-rc.4",
    "codelyzer": "~3.0.0-beta.4",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.5.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "5.1.1",
    "ts-node": "2.1.0",
    "tslint": "4.5.1",
    "typescript": "2.2.1"
  }
}

Here is my package.json. Thanks.

[aveferrum]

@basst314 getters/setters are fine if there's a business requirement to modify underlying private property. Apart from that, just for template binding - get/set creation is somewhat overkill.

  private _authenticatedUser$: BehaviorSubject<IAuthenticatedUser> = new BehaviorSubject<IAuthenticatedUser>(null);

  public get user(): Observable<IAuthenticatedUser> {
    return this._authenticatedUser$ as Observable<IAuthenticatedUser>;
  }

[basst314]

What would you suggest @demirk4n ?
Somewhat the decision has been made that the template is not part of the component (somehow weird for me), so private variables are not accessible.
Making everything public doesn't feel right to me (coming from Java world).

[elvisbegovic]

You seems don't know how template and class are connected. For me there is sens to have it punlic only reclamation goes to cli that doesn't inform us with error in console !

@basst314

[aveferrum]

@basst314 I'd just use public properties for basic template stuff and getter/setters to wrap around a more complex business logic for a private property.

One can hope, maybe in the next iteration of ES Microsoft may surprise us with a C# get/set functionality :)

public string Name { get; set; }

which will be equal to

private string name;
public string Name
{
    get
    {
        return this.name;
    }
    set
    {
        this.name = value;
    }
}

[thaihacong]

It seems that Angular 4.0 is not able to recognize the local variable inside ngFor loop.

<div class="row" *ngFor="let employee of employees; let i = index; trackBy: employee?.uuid">
  <employee-details [id]="generateId(employee.date)" [(employee)]="employees[i]">
  </employee-details>
</div>

ng build --prod returns

ERROR in ng://../src/app/employees.component.html (175,32): Property 'employee' does not exist on type 'EmployeesComponent'.

In EmployeesComponent, I declared employees: Employee[];, but not employee: Employee.
This worked well before without such warning messages.

UPDATE:
If I remove trackBy: employee?.uuid, ng build --prod is OK.

So, the problem could be related to trackBy in this case.

[harilal]

@thaihacong
https://toddmotto.com/angular-ngfor-template-element

i think these needs to be as directives.

[thaihacong]

@harilal
I updated my comment. The problem could be related to trackBy.

[elvisbegovic]

trackBy is now function! how you use trackBy is bad. please check docs it's function that retunr id
Cheers

@thaihacong

[hansl]

I'm locking this discussion down. The original issue is being worked on and the discussion is getting a bit out of hand here.

[hansl]

@alapasset Regarding your original issue:

The following code in Typescript will not compile:

interface A {
  aValue: number;
}
interface B {
 aValue: number;
 bValue: string;
}

function a(aOrB: A | B): string {
  const x = aOrB.aValue;  // Valid. aValue is part of both interfaces.
  const y = aOrB.bValue;  // ERROR. bValue is not part of A.
}

a({ aValue: 1 });

I think this comes from a misunderstanding of what the A | B typing does. It's not valid to use either types as if the value passed in is either. You can only use properties that are part of both typings, since you don't know which one is passed.

You need to change your typings to reflect the code, or typecast it if possible.

I'm going to close this issue. I have a PR to move warnings in templates as warnings, but it's not a fix for this issue.

[hansl]

https://github.com/angular/angular-cli/pull/5698 fixed typescript messages and warnings to not be considered errors. Please note this will not remove errors from your templates from being reported.