Изменения html-шаблона библиотеки Angular 7 не затрагиваются приложением при одновременном запуске ng build --watch и ng serve - PullRequest
Новая
       34

Изменения html-шаблона библиотеки Angular 7 не затрагиваются приложением при одновременном запуске ng build --watch и ng serve

0 голосов
/ 21 февраля 2019

Изменения html-шаблона библиотеки Angular 7 не влияют на приложение Angular, если они одновременно запускаются в другом cmd с использованием «ng build library --watch» и «ng serve application».

Итак, я сначала запускаюбиблиотека с флагом наблюдения, затем я запускаю приложение с помощью ng serve.Изменения в библиотеке в файлы ts запустят HMR в приложении, и изменения будут затронуты правильно.Но когда я изменяю некоторые компоненты html или css файлов, HMR обнаружит изменение и начнет обновлять приложение, но изменения не видны в пользовательском интерфейсе.Если я остановлю ng serve и начну его снова, то эти изменения html и css будут затронуты в пользовательском интерфейсе.

Я проверил, что изменения затрагиваются в каталоге dist, где сборка библиотеки будет производиться, но будут выводиться файлы.Так что каким-то образом ng serve не примет их, даже если заметит.

Я ссылаюсь на библиотеку, используя пути tsconfig.json.Поскольку baseUrl для моего приложения - src, мне нужно использовать ../ в конфигурации, подобной этой 

"@lw/common": [
    "../dist/@lw/common"
  ]

Я использую @ в пути развертывания, потому что мне нужно импортировать файлы scss из библиотеки.Таким образом, путь импорта такой же, если я устанавливаю этот пакет из npm.Поэтому конфигурация, которую я ищу, заключается в том, чтобы упростить разработку библиотеки с помощью режима --watch. 

dist
    @lw
        common
projects
    lw
        common
src
    app
    index.html

Версии пакета 

Angular CLI: 7.3.1
Node: 10.15.0
OS: win32 x64
Angular: 7.2.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.13.1
@angular-devkit/build-angular      0.13.1
@angular-devkit/build-ng-packagr   0.13.1
@angular-devkit/build-optimizer    0.13.1
@angular-devkit/build-webpack      0.13.1
@angular-devkit/core               7.3.1
@angular-devkit/schematics         7.3.1
@angular/cdk                       7.3.2
@angular/cli                       7.3.1
@angular/flex-layout               7.0.0-beta.19
@angular/material                  7.3.2
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.3.1
@schematics/angular                7.3.1
@schematics/update                 0.13.1
ng-packagr                         4.7.0
rxjs                               6.3.3
typescript                         3.1.3
webpack                            4.29.0

РЕДАКТИРОВАТЬ: об этой проблеме уже сообщалось в Angular Cliit GitHub.репо https://github.com/angular/angular-cli/issues/13588 Так что это ошибка в кли.

1 Ответ

0 голосов
/ 07 мая 2019

Я встретил эту проблему сегодня.После нескольких часов попыток я нашел решение по-другому.Он импортирует код библиотеки прямо в режиме разработки и использует встроенную библиотеку при сборке приложения.Вот шаги:

  • Добавьте index.ts в папку public-api в проекте библиотеки, содержимое: 

    export * from './public-api';

  • Добавьте псевдоним путей в корневой каталог tsconfig.json 

    "paths": {
  "lib-name": ["projects/lib-name/src"],
  "lib-name/*": ["projects/lib-name/src/*"]
}

  • Добавьте псевдоним путей в src \ tsconfig.app.json, этот конфиг будет использоваться для ng build. 

    "paths": {
  "lib-name": ["../dist/lib-name"],
  "lib-name/*": ["../dist/lib-name/*"]
}

  • Добавить новый tsconfig.dev.json в папку tsconifg.app.json 

    {
    "extends": "./tsconfig.app.json",
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "lib-name": ["../projects/lib-name/src"],
            "lib-name/*": ["../projects/lib-name/src/*"]
        }
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ],
}

  • Обновление angular.json

    • Добавьте новую конфигурацию "dev" в раздел сборки -> конфигурации 
    "dev": {
    "tsConfig": "src/tsconfig.dev.json"
    }
    • Добавьте новую конфигурацию "dev" в раздел обслуживания -> конфигурации, пожалуйста, переименуйте AppName в свойимя проекта 
    "dev": {
    "browserTarget": "AppName:build:dev"
}

  • Запустите режим разработки с ng serve -c=dev Теперь мне не нужно запускать процесс 2 ng, чтобы просматривать библиотеку и приложение отдельно, а также избегать проблемы Запуск ng build --watch Не всегда обнаруживаются некоторые изменения кода # 9572

...