将应用程序迁移到 Angular 6：但是在运行 npm run build --prod 时出现错误。但是命令 npm run build --env=prod 运行成功答案

【问题标题】：Migrated application to Angular 6 : But getting errors while running npm run build --prod. But command npm run build --env=prod runs successfully将应用程序迁移到 Angular 6：但是在运行 npm run build --prod 时出现错误。但是命令 npm run build --env=prod 运行成功
【发布时间】：2019-07-25 19:11:55
【问题描述】：

当我使用命令 npm run build -- --prod 时，我收到以下错误消息：

属性“PropertyName1”是私有的，只能在“AppComponent”类中访问
“AppComponent”类型上不存在属性“PropertyName2”

src\app\components\app\app.component.html(77,56) 中的错误：：属性 “验证”是私有的，只能在“AppComponent”类中访问。 src\app\components\entitysearchlight\entitysearchlight.component.html(3,157)：：属性“loadingMessage”是私有的，只能在内部访问类'EntitySearchLightComponent'。 src\app\components\entitysearchlight\entitysearchlight.component.html(23,91): ：预期 0 个参数，但得到 1 个。 src\app\components\entitysearchlight\entitysearchlight.component.html(97,62): ：“EntitySearchLightComponent”类型上不存在属性“e”。 src\app\components\search\search.component.html(3,157): : 属性“loadingMessage”是私有的，只能在类中访问 “搜索组件”。 src\app\components\search\search.component.html(23,91): : 预期 0 个参数，但得到 1 个。 src\app\components\search\search.component.html(57,43): : 属性“onFilterItemSelect”是私有的，只能在类中访问 “搜索组件”。 src\app\components\search\search.component.html(90,58): : 类型 'SearchComponent' 上不存在属性 'e'。

当我运行时，相同的应用程序构建成功：npm run build --env=prod

能否请您告诉我由于这两个命令导致的构建过程或配置如何变化？

【问题讨论】：

Property is private and only accessible within class error in Angular Library的可能重复
如果您创建了模型（导出一个类），并将属性设置为例如：私有名称：字符串；可能会弹出此错误，更改为公开
@JulienAmbos 感谢您的链接，但您能解释一下构建过程的区别吗？
@NemanjaG 谢谢

标签： jquery node.js angular typescript npm

【解决方案1】：

--prod 标志激活许多优化标志。其中之一是--aot 用于提前编译。您的组件模板是在构建过程中编译的，因此 TypeScript 可以检测代码中的更多问题。您可以在开发模式下编译，但如果您想在为 prod 构建之前看到此错误，仍然激活 --aot 标志。

来自the official compiler documentation

尽早检测模板错误

AOT 编译器在构建步骤中检测并报告模板绑定错误，然后用户才能看到它们。

【讨论】：

【解决方案2】：

当您查看angular.json 时，您会发现可以为npm run build --prod 标志设置更多选项，但是当您运行npm run build --env=prod 时，您只需更改environment.ts 文件，以便此处不会使用选项。

Environment.ts

在文件夹environment 中，您可以找到两个文件（默认情况下），一个用于生产，第二个应在本地使用。通过运行npm run build --env=prod，您只需使用environment.prod.ts 构建您的应用程序，但使用默认的ng build 而不是ng build --prod。

在代码中，您可以使用 environment 仅在生产构建中注册一些模块，而不是在本地配置中。

例子：

ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),

【讨论】：

修改环境ts文件是什么意思？

【解决方案3】：

如上所述，您需要将访问修改器 private 更改为 public。你有一些必要的文件。但是，您需要避免功能上的问题。

我建议使用 tslint 并检查您的代码。添加tslint.json新规则

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

到处添加访问修饰符。

在package.json 中创建命令，您可以在其中检查构建

 "scripts": {
    "lint": "ng lint",
     ...
    "building:prod": "npm i && ng lint && ng build --prod"
  },

【讨论】：

它不会在本地抛出错误。需要任何额外的配置
local 你的意思是ng serve？
不，我正在使用 Angualr 6 .net core SPA 模板项目类型
我不确定你的理解是否正确。您正在尝试创建本地构建运行 npm run building:prod 并出现一些 lint 错误，并且没有错误，不是吗？
修复了部署应用程序时出现的错误。但是即使我在 tslint.json 中设置 member-access ，本地也不会出现相同的错误：true

【解决方案4】：

当您使用 --prod 开关运行编译时，在 Angular 6 中，默认为 AOT（提前编译模板组件），更改的是模板中使用的组件类（ts 文件）中的道具（HTML 文件或 HTML组件内的模板）必须是公共的：

从验证中删除私有或受保护，从 loadingMessage 中删除私有或受保护， ...

在组件 ts 文件中。问候！

【讨论】：