Angular2中的生产模式和开发模式有啥区别？

Posted 2023-02-22

【中文标题】Angular2中的生产模式和开发模式有啥区别？

【英文标题】：What is the difference between production and development mode in Angular2?Angular2中的生产模式和开发模式有什么区别？

【发布时间】：2016-04-24 10:55:39

【问题描述】：

出于某种原因，我必须在生产模式下运行我的应用程序。这些模式有什么区别？

【参考方案1】：

在开发模式下，更改检测会在第一次运行后立即进行第二次运行，如果在第一次和第二次运行之间有任何绑定值发生变化，则会产生错误。这有助于定位检查值具有副作用或字段或函数在后续调用中不返回相同值的错误，这会破坏 Angular 的更改检测。

在开发模式下，在第二次更改检测运行期间，Angular 还会进行一些在生产中不会进行的深度对象比较，以检测不允许的模型更改。

更新：

在开发模式下，当 html sanitizer 服务从绑定 [innerHTML]="..." 或 [ngStyle]="..." 中剥离值时，还会向控制台打印提示。 另见：In RC.1 some styles can't be added using binding syntax

【讨论】：

如何检测我是在生产模式还是开发模式下运行？

我已经看到有人问过这个问题，但我还没有看到答案。您需要显式启用生产模式，并且在启用 prodMode 时还可以设置一些全局变量，可以在代码中检查以了解哪种模式处于活动状态。

另外，如果您在开发模式下运行并在浏览器中打开控制台，它将打印一条消息，显示“Angular 2 正在开发模式下运行。调用 enableProdeMode() 以启用生产模式。”如果您已经处于生产模式，则此处将看不到任何内容。

【参考方案2】：

ApplicationRef.tick() 状态的文档：

在开发模式下，tick() 还会执行第二个更改检测周期 (TTL=2)，以确保不会检测到进一步的更改。如果在第二个周期中发现了其他更改，则应用程序中的绑定会产生无法在单个更改检测过程中解决的副作用。在这种情况下，Angular 会抛出错误，因为 Angular 应用程序只能进行一次更改检测，在此期间所有更改检测都必须完成。

我们不能进行额外更改的原因是因为在生产模式下，更改检测只运行一次，这意味着组件树中的每个组件都被检查一次（TTL=1）...从顶部开始，在深度优先顺序。 因此，例如，如果对子组件的输入属性的更改导致对父组件在视图/模板中绑定的其他属性的更改，父组件的视图将不会更新（因为更改检测不会在生产模式下重新访问父组件......因为“一次通过”树遍历）。它只会在下次发生某些事件并再次运行更改检测时更新 - 但为时已晚！

这是一个违反规则的Plunker - 子组件在修改另一个输入属性的输入属性上具有set 方法。是的，这是一个人为的例子，但比下一个更容易理解：

您可能会遇到此问题的另一种情况是有状态管道。如果这是您的问题，请查看 this answer。

您应该描述您的问题（在另一个 SO 问题中）。应该有办法解决。