Як увімкнути режим виробництва?


182

Я читав відповідні запитання, і знайшов це , але моє запитання - як я можу перейти від розробки до режиму виробництва. Існують деякі відмінності між режимами, які вказані тут .

У консолі я бачу, ....Call enableProdMode() to enable the production mode.однак, я не впевнений, який саме тип я повинен викликати.

Чи може хтось відповісти на це запитання?


Мені здається, що це конфігурація, що проходить через Webpack 2+ Angular2 та Typescript, створила просте рішення: github.com/Sweetog/yet-another-angular2-boilerplate
— Брайан Огден

Відповіді:


211

Ви вмикаєте її, імпортуючи та виконуючи функцію (перед викликом завантажувальної програми):

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

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

Але ця помилка є показником того, що з вашими прив’язками щось не так, тож ви не повинні просто відхиляти їх, а намагатися з’ясувати, чому це відбувається.


Як увімкнутиProdMode (), якщо ви не використовуєте typecript? Якщо я просто закликаю цей метод перед ng.platform.browser.bootstrap (...), я отримую цю помилку: enableProdMode не визначено
— Daniel Dudas

2
@DanielDudas Я не використовую es5, але спробуйтеng.core.enableProdMode()
— Sasxa

3
Я вважаю, що "angular2 / core" зараз "@ angular / core". Дивіться мою відповідь нижче.
— adampasz

Я використовую Ionic2. У якому файлі називається цей завантажувальний пристрій? Коли я генерую зразок програми, ionic start test sidemenu --v2 --tsя бачу, app.tsале де називається ця функція завантаження?
— Гусь

1
Я зробив те саме, але я отримую виняток на кшталт "Неможливо включити режим prod після установки платформи". Хтось може мені допомогти у вирішенні цього питання?
— Gowtham

81

Найкращий спосіб увімкнути режим виробництва для програми Angular 2 - це використовувати angular-cli та створювати додаток за допомогою ng build --prod. Це дозволить створити додаток із виробничим профілем. Використання angular-cli має перевагу в тому, що можна використовувати режим розробки, використовуючи ng serveабо ng buildпід час розробки, не змінюючи код весь час.


6
Я використовую Angular 6, і це ng build --prod для створення в режимі prod. Просто помістіть це тут для всіх новачків, які відвідують цю сторінку.
— Дослідний

Я думаю, що build --prod було реалізовано, маючи на увазі isDevMode та enableProdMode. Відповідь на це питання має бути позначений як відповідь
— Буби

58

Це працювало для мене, використовуючи останню версію Angular 2 (2.0.0-rc.1):

main.ts

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

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

Ось посилання на функцію від їхніх документів: https://angular.io/api/core/enableProdMode


1
нове посилання: angular.io/docs/ts/latest/api/core/index/…
— emp

1
@emp Я здивований, що офіційна кутова документація enableProdModeне говорить вам, куди ви її повинні зателефонувати.
— Дай

55

Коли я будував новий проект, використовуючи кутовий-кліп. Був включений файл під назвою environment.ts. Всередині цього файлу є така змінна.

export const environment = {
  production: true
};

Тоді у main.ts у вас це є.

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);

Ви можете додати це до проекту без кутового кліпу, я вважаю, тому що enableProdMode () імпортується з @ angular / core.


Як це працює для непровідної побудови? Я припускаю, що в цьому випадку environment.ts ігнорується, тож чи не виникає помилка компіляції tsc при спробі імпорту модуля?
— llasarov

@llasarov the environment.ts просто поводиться як файл конфігурації, в якому ви можете вмикати / вимикати режим виробництва. Main.ts просто викликає enableProdMode, якщо це правда, тому це можна зробити без будь-якого конкретного процесу збирання. Ви також можете вибрати тут журнал, перевіривши, чи не відлагоджено logMode, тоді ваша користувальницька служба реєстратора робить детальний StackTrace, інакше просто записує один вкладиш
— NitinSingh

13

Перейдіть src/enviroments/enviroments.tsі увімкніть режим виробництва

export const environment = {
  production: true
};

для кутових 2


10

Щоб увімкнути режим виробництва в кутовому 6.XX, просто перейдіть до файлу оточення

Як цей шлях

Ваш шлях: project>\src\environments\environment.ts

Змінити production: falseз:

export const environment = {
  production: false
};

До

export const environment = {
  production: true
};

введіть тут опис зображення


8

Більша частина режиму prod prod не потрібна протягом часу розробки. Таким чином, наше вирішення полягає в тому, щоб увімкнути його лише тоді, коли це НЕ локальний господар.

У веб-переглядачах, main.tsде ви визначаєте свій root AppModule:

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

isLocalМоже також використовуватися для інших цілей , наприклад , enableTracingдля RouterModuleдля кращої налагодження трасування стека під час фази Dev.


6

Коли використовується команда ng build, вона перезаписує файл Environment.ts

За замовчуванням, коли використовується команда ng build, вона встановлює середовище dev

Для використання виробничого середовища використовуйте наступну команду ng build --env = prod

Це дозволить створити режим виробництва та автоматично оновити файл Environment.ts


1
Це було змінено в Angular CLI 6 на ng build --configuration=production(за замовчуванням за допомогою CLI-файлу angular.json).
— хитрий

5

ви можете використовувати у своєму app.ts || файл main.ts

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

4

Для тих, хто робить шлях оновлення, не перемикаючись на використання TypeScript:

ng.core.enableProdMode()

Для мене (у JavaScript) це виглядає так:

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

4

Вам не потрібно, щоб ваш насіннєвий проект надав середовище.ts або такий файл. Просто встановіть config.ts та додайте всі такі записи, які потребують рішення часу виконання (наприклад: - конфігурація журналу та URL-адреси). Це впишеться в будь-яку структуру дизайну, а також допоможе в майбутньому

config.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();

1
як ви відрізняєте prod / dev, isInProductionModeщоб це було правдою / хибністю? в час побудови?
— LeOn - Хан Лі

Зазвичай як параметр GULP або еквівалент
— NitinSingh

JSON має запис таким чином: - "environmentSource": "Environment / Environment.ts", "Environment": {"dev": "environment / environment.ts", "prod": "environment / environment.prod.ts" }
— NitinSingh



0

У моєму проекті Angular 2 немає файлу "main.ts", в якому були вказані інші відповіді, але у нього є файл " boot.ts ", який, здається, приблизно однаковий. (Різниця, ймовірно, пов'язана з різними версіями Angular.)

Додавання цих двох рядків після останньої importдирективи в "boot.ts" працювало на мене:

import { enableProdMode } from "@angular/core";
enableProdMode();
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.