Angular-cli: Property is private and only accessible within class

[aslan92]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.0
node: 6.9.5
os: linux 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/material: 2.0.0-beta.2
@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 -prod

The log given by the failure.

ERROR in /home/u/maps-msda-ng2/src/$$_gendir/app/app.component.ngfactory.ts (4028,18): Property '_sidenav' is private and only accessible within class 'AppComponent'.
/home/u/maps-msda-ng2/src/$$_gendir/app/app.component.ngfactory.ts (4030,18): Property '_infoSidenav' is private and only accessible within class 'AppComponent'.
/home/u/maps-msda-ng2/src/$$_gendir/app/app.component.ngfactory.ts (4032,18): Property '_owlCarousel' is private and only accessible within class 'AppComponent'.
/home/u/maps-msda-ng2/src/$$_gendir/app/app.component.ngfactory.ts (4034,18): Property '_tree' is private and only accessible within class 'AppComponent'.
/home/u/maps-msda-ng2/src/$$_gendir/app/app.component.ngfactory.ts (4036,18): Property '_ol3Map' is private and only accessible within class 'AppComponent'.
/home/u/maps-msda-ng2/src/$$_gendir/app/app.component.ngfactory.ts (4524,22): Property '_extendedSearchAccordion' is private and only accessible within class 'AppComponent'.

Mention any other details that might be useful.

ng serve works
link to the code of the component: http://pastebin.com/p8EFtbFB

[elvisbegovic]

dupe of https://github.com/angular/angular-cli/issues/5620
please close

[aslan92]

no errors with angular v4.0.0

[stavn1]

Is there a way to solve this error with angular 2.4?

[teodoradima]

rolling back to rc.4 fixed this for me

[alshdavid]

The red text is via ng build --prod, however ng serve works just fine.
This is a project I upgraded from ng2.4

[itsnotvalid]

Same here. Apparently 1.0.0 only works with angular 4?

[danzrou]

Same here with cli 1.0.0 and angular 4

[grassiricardo]

Same here with cli 1.0.0 and angular 4

[hccampos]

Duplicate, as said before.The Angular team will move to full AoT eventually and considers templates as separate entities from the component which means no private variables can be accessed from them. Basically, either convert your code or stay on Angular 2.4 or JIT.

[pcgeng]

I have resolved it with Angular 2.4.10, Angular-CLI 1.0.0-rc.2, and TypeScript 2.1.6

[da45]

I use cli 1.0.0 & angular 4 but still have this issue? any news please ?

[Blackbaud-SteveBrush]

FYI, If you're only using @ngtools/webpack in your own custom webpack setup, these versions worked for me:

"@ngtools/webpack": "1.2.14",
"webpack": "2.3.3",
"webpack-dev-server": "2.4.5",
"webpack-merge": "4.1.0"

[bertolo1988]

+1 Reopen please.

[aniruddhadas9]

same problem. unable to make prod build

[Kyosuk3]

same problem. any news?

[alshdavid]

Set properties that will be accessed from the template to public and you're good to go

[j-nord]

We have also the same issue! "public" is not a solution.

[tsandtm]

i have also the same issue.
i use ver 4.0.1 with cli 1.0.
how fix?

[toniopelo]

@j-nord @tsandtm
Guys, this is not a bug from angular CLI. It's the way angular implements it.
Actually the only bug there was here is that angular CLI didn't show the errors / warning of the compiler before the release. Now this bug is fixed and you can see the errors.

@j-nord Unfortunatelly, yes you will have to change all the components variable from private to public if they are used into your template. It's not a angular CLI issue, it's an angular requirements that was not well reported by the CLI until now.

The other option for you if you want to keep your variable private is to downgrade to @angular/cli-rc.4 and maybe stay on angular 2.x.x (not sure about that).
Another option I heard of (check by yourself, I didn't try) is that you only use JiT instead of AOT.

For more info you can check the comments of this issue #5623
Hope it helps.

[iamonuwa]

Guys, its a tslint.json issue. Ensure your configuration meets with what you set up on tslint.json

Hope it helps.

[deeptiProjects]

@iamonuwa Could you please elaborate on how to do that?

[deeptiProjects]

running this command to deploy the app will fix it.. ng build --env=prod

found the solution in github

[arun31786]

ng build --env=prod worked.
Seems ng build --env=prod and ng build --prod are not same.

@deeptiProjects can you describe the difference

[tytskyi]

@deeptiProjects @arun31786 with ng build --env=prod you do not achieve AOT compilation, for more details see docs: https://github.com/angular/angular-cli/wiki/build#build-targets-and-environment-files

Original "error" reported is not an error, but normal restriction of AOT at least for versions 2, 4, 5. The variable used in the template needs to be declared as "public". Template is treated as a separate Typescript class.

[johnypremanantham]

ng build -prod --aot=false

[Karasuni]

@arun31786 Documentation claims those commands are the same:

# these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

[Hulva]

传送门

[iamonuwa]

Try ng build --prod aot false

[LeonMtd]

I have also the same issue!

[nielszandsteeg]

Same issue here after angular 5 update. I don't want to make all properties en methods public.

[samuelkavin]

These links might helpful:
https://angular-2-training-book.rangle.io/handout/aot/aot_limitations.html
https://github.com/rangle/angular-2-aot-sandbox

[MstfTkrsln]

I used angular 2.4.10 , angular-cli 1.0.6 ,typescript 2.2.1
I got this error when i upgrade angular to 2.4.10 from 2.3.1 and cli to 1.0.6 from 1.0.0-rc.4
it serves but cant build for prod with aot
i have solved to build without aot -> "ng build --prod --aot=false"

[MrHOY]

I used angular 5.0.5 and cli 1.5.5 have same problem too.
Many error:

• Property ... does not exist on type
• Property ... is private and only accessible within class

So, we can't use "ng build --prod" ?

[woteska]

+1

Property 'nav' (nav is a private instance of a component in constructor) is private and only accessible within class.

Angular 5.1+
CLI: 1.6.3

This errormsg appears when ng build --prod

[tinyweasel]

I have several instances of the same injected variable and it's private in some places and public in others, and it's used in some templates as a private variable, yet one module is complaining that it's private, and the rest aren't.

[nskshared]

+1
it happens with protected as well. I'm not able to make right sense from those keywords then!

[rshah9]

I am using Angular 5 and having the same issue when deploying Jenkins build. The annoying part is it works locally but not when I make a build

[tinyweasel]

Changing to public when used in templates worked for me. Not sure why only one module complained though.

[P4Thi0ut]

Same, cannot make a build for production, this is quite annoying.
Angular 6.0.7
Angular CLI : 6.0.8
Everything is working fine in development and for a regular build.
POO but forced to make everything public ?

[marcus13371337]

I had the same issue. What I understood, the most correct way is to define your variables as public when planning on using them in a template.

With that said I ended up having to change 1000+ properties in my components. In order to do that efficiently I created this python-script:
https://github.com/marcus13371337/angular-aot-fixer

Hope that can help some others to speed up the migration from private properties to public properties in your projects!

[angular-automatic-lock-bot[bot]]

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