В этом руководстве я объясняю, как заставить горячую замену модуля (HMR) работать с приложением, созданным с помощью Angular CLI.

План действий

Первое, что нам нужно сделать, это убедиться, что у нас установлена ​​последняя версия Angular CLI.

Когда у нас будет установлена ​​правильная версия Angular CLI, мы создадим новое приложение и настроим наше приложение, добавив новый environment в конфигурацию Angular CLI, которая включает HMR.

Последний шаг - добавить модуль, который фактически выполняет HMR, и обновить наше приложение, чтобы использовать этот модуль, если мы находимся в среде, в которой включена HMR.

Поехали!

Установите правильную версию Angular CLI

Выполните команду ng version, чтобы определить вашу версию Angular CLI:

$ ng --version 
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.6
node: 7.10.0
os: darwin x64

Если ваша версия ниже 1.0.0 или у вас вообще не установлен Angular CLI, вы можете запустить эту команду, чтобы получить последнюю и лучшую версию:

$ npm install -g @angular/cli@latest

Строим новый проект

На этом этапе мы создадим новый проект, используя ng new и cd в новом каталоге:

$ ng new tutorial-angular-cli-hmr
$ cd tutorial-angular-cli-hmr

Команда ng new создает новый каталог, формирует наше новое приложение внутри этого каталога и устанавливает необходимые пакеты с помощью npm, что может занять некоторое время.

Добавить среду для HMR

На этом этапе мы настроим Angular CLI environments и определим, в какой среде мы включаем HMR.

Мы начнем с добавления и изменения файлов в каталоге src/environments/:

Сначала мы создаем файл с именем src/environments/environment.hmr.ts со следующим содержимым:

export const environment = {
 production: false,
 hmr: true
};

Затем мы редактируем src/environments/environment.prod.ts и меняем среду на это:

export const environment = {
 production: true,
 hmr: false
};

Наконец, мы редактируем src/environments/environment.ts и меняем среду на:

export const environment = {
 production: false,
 hmr: false
};

Чтобы включить новую среду, нам нужно обновить .angular-cli.json в корне проекта. Откройте файл и добавьте новую среду к существующему объекту environments:

...
    "environmentSource": "environments/environment.ts",
    "environments": {
      "dev": "environments/environment.ts",
      "hmr": "environments/environment.hmr.ts",
      "prod": "environments/environment.prod.ts"
    },
...

Последнее, что мы делаем на этом шаге, - обновляем наш package.json. Внутри блока scripts мы добавляем ярлык для запуска ng serve с необходимыми параметрами для загрузки HMR и новой среды:

...
  "scripts": {
    "start": "ng serve",
    "hmr": "ng serve --hmr -e=hmr",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  }
...

Добавление этой опции в сценарии позволит вам запустить среду разработки с поддержкой HMR, запустив npm run hmr.

💡 Связанная фиксация этого шага

Добавить зависимость для @ angular / hmr и настроить приложение

Теперь, когда все готово для включения HMR, последнее, что нужно сделать, - это внести несколько изменений в наше приложение, чтобы волшебство произошло.

Сначала мы устанавливаем модуль angular2-hmr как dev-зависимость:

$ npm install --save-dev @angularclass/hmr

Далее мы создаем файл с именем src/hmr.ts, в котором настраиваем модуль:

Осталось обновить src/main.ts, чтобы использовать только что созданный файл:

💡Связанная фиксация этого шага

Запуск среды разработки с включенной HMR

Теперь, когда все настроено, мы можем запустить новую конфигурацию:

$ npm run hmr

При запуске сервера Webpack сообщит вам, что он включен:

NOTICE Hot Module Replacement (HMR) is enabled for the dev server.

Теперь, если вы вносите изменения в один из своих компонентов, они должны отображаться автоматически, без полного обновления браузера.

Попробуйте, например, обновить свойство title в src/app/app.components.ts, и вы увидите, что обновленный заголовок появится в вашем браузере после того, как WebPack его перестроит.

Вы можете найти пример приложения, которое я создал в этом руководстве, здесь:
https://github.com/beeman/tutorial-angular-cli-hmr/

Если у вас есть какие-либо вопросы или проблемы с тем, чтобы заставить это работать, напишите мне в комментариях или в Twitter!

Наслаждаться!

Кредиты

  • Justin Schwartzenberger за добавление опции --hmr в angular-cli и объяснение мне, как ее использовать.
  • AngularClass для модуля angular2-hmr.
  • Все сообщество Angular за то, что они просто классные!

Обновления

  • 2017–05–25: Обновленное руководство и репозиторий примеров для последней версии Angular CLI.

Нужна помощь?

Нужна поддержка для вашего проекта Angular, Ionic, Firebase, NodeJS или TypeScript? Ищете долгосрочное наставничество? Не стесняйтесь заказывать со мной сеанс 1-на-1 на CodeMentor.