В этом руководстве я объясняю, как заставить горячую замену модуля (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.