首页 文章

如何在Angular 2中启用 生产环境 模式

提问于
浏览 次
143

我是Angular2的新手，我正在阅读已解决的问题而且我发现了这个问题

Angular2 method binding error: "value has changed after it was checked"

这是非常有趣的，但我的问题是我如何从开发变为 生产环境 ，这是在阅读这个问题后存在差异

What is difference between production and development mode in Angular2?

我搜索但没有找到任何表明模式，以及你必须指示模式（开发）或模式（ 生产环境 ）的地方 .

在控制台中我可以看到 ....Call enableProdMode() to enable the production mode. 但在 System.config({ 或组件类中的位置 .

是否需要特定的进口？

angular

13 回答

  • 3

    您可以通过导入和执行该函数来启用它（在调用bootstrap之前）：

    import {enableProdMode} from '@angular/core';

enableProdMode();
bootstrap(....);

    但是这个错误表明你的绑定有问题，所以你不应该只是解雇它，而是试着弄清楚它为什么会发生 .

    回复于
  • 5

    这对我有用，使用最新版本的Angular 2（2.0.0-rc.1）：

    main.ts

    import {enableProdMode} from '@angular/core';

enableProdMode();
bootstrap(....);

    以下是他们的文档中的函数参考：https://angular.io/api/core/enableProdMode

    回复于
  • 41

    为Angular 2应用程序启用 生产环境 模式的最佳方法是使用angular-cli并使用 ng build --prod 构建应用程序 . 这将使用 生产环境 配置文件构建应用程序 . 使用angular-cli的好处是可以在开发时使用 ng serve 或 ng build 开发模式，而无需一直更改代码 .

    回复于
  • 174

    当我使用angular-cli构建一个新项目时 . 包含了一个名为environment.ts的文件 . 在这个文件里面是一个像这样的变量 .

    export const environment = {
  production: true
};

    Then in main.ts you have this.

    import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

    You could add this to a non angular-cli project, I would assume, because enableProdMode() is being imported from @angular/core.

    回复于
  • 53

    转到 src/enviroments/enviroments.ts 并启用 生产环境 模式

    export const environment = {
  production: true
};

    对于Angular 2

    回复于
  • 0

    大多数时候在开发期间不需要prod模式 . 因此，我们的解决方法是仅在 NOT localhost时启用它 .

    在您的浏览器' main.ts 中，您可以在其中定义根AppModule：

    const isLocal: boolean = /localhost/.test(document.location.host);
!isLocal && enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

    对于 RouterModule ， isLocal 也可以用于 enableTracing 之类的其他用途，以便在开发阶段更好地调试堆栈跟踪 .

    回复于
  • 9

    要在角度6.X.X中启用 生产环境 模式，请转到环境文件

    喜欢这条路

    你的路径： project>\src\environments\environment.ts

    从 production: false 更改：

    export const environment = {
  production: false
};

    至

    export const environment = {
  production: true
};

    enter image description here

    回复于
  • 0

    对于那些在没有切换到TypeScript的情况下进行升级路径的人：

    ng.core.enableProdMode()

    对我来说（在javascript中）这看起来像：

    var upgradeAdapter = new ng.upgrade.UpgradeAdapter();
ng.core.enableProdMode()
upgradeAdapter.bootstrap(document.body, ['fooApp']);
    回复于
  • 2

    使用ng build命令时，它会覆盖environment.ts文件

    默认情况下，使用ng build命令时，它会设置dev环境

    要使用 生产环境 环境，请使用以下命令ng build --env = prod

    这将启用 生产环境 模式并自动更新environment.ts文件

    回复于
  • 3

    您不需要任何environment.ts或您的种子项目提供的此类文件 . 只需要一个configuration.ts并添加所有需要运行时决策的条目（例如： - logging configuration和urls） . 这将适用于任何设计结构，并有助于将来

    configuration.ts

    export class Configuration {

   isInProductionMode : bool = true;

   // other configuration
   serviceUrl : string = "http://myserver/myservice.svc";
   logFileName : string = "...";
}

    //现在使用您的启动代码（main.ts或根据种子项目设计的等价物

    import { Configuration } from './configuration';
import { enableProdMode } from '@angular/core';
....
if (Configuration.isInProductionMode)
    enableProdMode();
    回复于
  • 38

    我的Angular 2项目没有"main.ts"文件提到其他答案，但它确实有一个“ boot.ts ”文件，这似乎是一回事 . （差异可能是由于不同版本的Angular . ）

    在"boot.ts"中的最后一个 import 指令之后添加这两行为我工作：

    import { enableProdMode } from "@angular/core";
enableProdMode();
    回复于
  • 5

    默认情况下，Angular应用程序在开发模式下运行，您可以在浏览器控制台上看到以下消息：
    Angular is running in the development mode. Call enableProdMode() to enable the production mode.

    切换到 生产环境 模式可以通过禁用特定于开发的检查（例如双变化检测周期）来使其运行更快 .

    构建用于 生产环境 （或附加--environment = prod标志）启用 生产环境 模式查看CLI生成的main.ts以查看其工作原理 .

    回复于
  • 0

    你可以在app.ts中使用|| main.ts文件

    import {enableProdMode} from '@angular/core';
enableProdMode();
bootstrap(....);
    回复于

相关问题