0

When I Use command npm run build -- --prod I get following error messages :

  • Property 'PropertyName1' is private and only accessible within class 'AppComponent'
  • Property 'PropertyName2' does not exist on type 'AppComponent'

ERROR in src\app\components\app\app.component.html(77,56): : Property 'validate' is private and only accessible within class 'AppComponent'. src\app\components\entitysearchlight\entitysearchlight.component.html(3,157): : Property 'loadingMessage' is private and only accessible within class 'EntitySearchLightComponent'. src\app\components\entitysearchlight\entitysearchlight.component.html(23,91): : Expected 0 arguments, but got 1. src\app\components\entitysearchlight\entitysearchlight.component.html(97,62): : Property 'e' does not exist on type 'EntitySearchLightComponent'. src\app\components\search\search.component.html(3,157): : Property 'loadingMessage' is private and only accessible within class 'SearchComponent'. src\app\components\search\search.component.html(23,91): : Expected 0 arguments, but got 1. src\app\components\search\search.component.html(57,43): : Property 'onFilterItemSelect' is private and only accessible within class 'SearchComponent'. src\app\components\search\search.component.html(90,58): : Property 'e' does not exist on type 'SearchComponent'.

Same application builds successfully when i run : npm run build --env=prod

Can you please let me know how build process or configuration changes due to these two commands ?

S2K
  • 1,185
  • 3
  • 27
  • 55
  • 1
    Possible duplicate of [Property is private and only accessible within class error in Angular Library](https://stackoverflow.com/questions/54330599/property-is-private-and-only-accessible-within-class-error-in-angular-library) – Julien Ambos Mar 04 '19 at 13:03
  • If you created models (exporting a class), and set the properties as for example: private name: string; this error could pop up, change to public – Nemanja G Mar 04 '19 at 13:07
  • @JulienAmbos Thanks for link but can you please explain the difference in terms of build process ? – S2K Mar 04 '19 at 13:17
  • @NemanjaG Thanks – S2K Mar 04 '19 at 13:21

4 Answers4

1

When you run compile with --prod switch, in Angular 6 default is AOT (compile ahead of time of template components) and change is that props from component class (ts files) that are used in template (HTML file or HTML template inside component) must be public:

remove private or protected from validate, remove private or protected from loadingMessage, ...

in components ts file. Regards!

MRsa
  • 666
  • 4
  • 8
1

When you take a look into angular.json you will see that there are some more options you can set for the npm run build --prod flag but when you run the npm run build --env=prod you have just simply changed the environment.ts file so that options won't be used here.

Environment.ts

In folder environment you can find two files (by default) one is used for production and second should be used locally. By running npm run build --env=prod you just build your app with the environment.prod.ts but with the default ng build not ng build --prod.

In code you can use environment to register some modules only with production build and not with the local config.

Example:

ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
joka00
  • 2,357
  • 1
  • 10
  • 27
1

As it was written above you need change access modificator private to public. You have a little files where is necessary. However, you need to avoid the problem in feature.

i recommended use tslint and check you code. Add in tslint.json new rule

"rules": {
...
    "member-access": true,

and everywhere add access modificator.

Create command in package.json where you can check build

 "scripts": {
    "lint": "ng lint",
     ...
    "building:prod": "npm i && ng lint && ng build --prod"
  },
  • It is not throwing error on local. any additional configuration required – S2K Mar 18 '19 at 07:10
  • `local` you mean `ng serve`? –  Mar 18 '19 at 07:55
  • no i am using Angualr 6 .net core SPA template project type – S2K Mar 18 '19 at 10:03
  • I not sure right your understood. You truing create local build run `npm run building:prod` with some lint error, and have not error, didn't it? –  Mar 18 '19 at 10:54
  • The error is fixed which was coming while deployment of the application. But same error does not appears on local even if i set member-access : true in tslint.json – S2K Mar 18 '19 at 11:49
  • you truing build from Visual Studio ? –  Mar 18 '19 at 12:12
  • yes i am building in visual studio as i am using .net core Angular SPA template project type – S2K Mar 18 '19 at 12:14
  • 1 make sure that you have [tslint plugin](https://marketplace.visualstudio.com/items?itemName=eg2.tslint) in VS. 2 tslinter have been setting on your file from tslint.json in you project (`Tools > Web Code Analysis > Edit TSLint Settings (tslint.json)`) –  Mar 18 '19 at 12:24
  • Truing open Console from VS go to you project directory and call `ng lint`. Do you have any errors? –  Mar 18 '19 at 12:35
  • i have used https://marketplace.visualstudio.com/items?itemName=RichNewman.TypeScriptAnalyzer to get the error while building on local – S2K Mar 19 '19 at 09:45
  • Can you edit tslint settings and choose tslint.json from your project? Will any error? –  Mar 19 '19 at 14:03
1

The --prod flag activate many optimization flag. One of them is --aot for Ahead Of Time compilation. Your component templates are compiled during the build, so TypeScript can detect more issue in your code. You can compile in dev mode but still activate the --aot flag if you want to see this error before building for prod.

From the official compiler documentation

Detect template errors earlier

The AOT compiler detects and reports template binding errors during the build step before users can see them.

Nasiruddin Saiyed
  • 1,438
  • 1
  • 13
  • 31