Компонент Custom Library не является известным элементом, но приложение компилируется и запускается - PullRequest
6 голосов
/ 06 февраля 2020

Проблема

Мои html файлы предупреждают, что мои пользовательские компоненты / каналы «не являются известным элементом». Однако сборка и запуск приложения работает как задумано , и пользовательские компоненты / каналы работают. Дихотомия компонентов, работающих, но показывающих как ошибки, раздражает и может быть трудной для работы. Я знаю, что это мелочь, но я действительно не хочу видеть ошибки в моих html файлах, когда ошибок нет.

Сводка

У меня есть два разных angular проекта; angular библиотека, которую я использую с моим angular приложением. Библиотека экспортирует несколько пользовательских компонентов, каналов и сервисов, которые использует приложение. У меня нет этой библиотеки, опубликованной через npm, вместо этого я использую npm -link, чтобы дать приложению доступ к библиотеке. Кажется, это работает, так как любой сервис / компонент, определенный в моих компонентах приложений, работает и не жалуется Хотя в тот момент, когда я помещаю что-либо в файл шаблона из моей библиотеки, этот селектор подчеркивается и появляется предупреждение.

Файлы

/*Library Module*/
@NgModule({
  declarations: [
    ThemeToggleComponent,
    // Other custom components/pipes
  ],
  exports: [
    ThemeToggleComponent,
    // Other components needed in templates files
  ]
})
export class MyCommonModule {}

/*
 * Public API Surface of my-common library
 */

export * from './lib/my-common.module';
/*
 * Many other components, services, pipes, etc etc
 */
export * from './lib/theme-toggle/theme-toggle.component';

/* Consuming Application module */
import { MyCommonModule } from 'my-common';

@NgModule({
  imports: [
    MyCommonModule,
  ],
  declarations: [
    MyComponent,
  ],
})
export class MyModule {}
/* Template of MyComponent, my.component.html */
<div>
  <my-theme-toggle (darkThemeSelected)="toggleTheme($event)"></my-theme-toggle>
</div>

Файл выше содержит все строки, которые ссылаются на мои пользовательские компоненты, подчеркнутые красным с сообщением об ошибке 'my-theme-toggle' не является известным элементом: ... if проверьте, что он находится отдельно от модуля .

Попытки исправить

Я пробовал, но безрезультатно

  • Не использую NPM ссылка и простое копирование библиотеки, созданной ng-packagr, в модули узла моего приложения
  • Пересборка и повторная перекомпоновка / перезапуск всего
  • Поиск других вопросов SO: большинство вопросов касаются сбоев сборки потому что импорт / экспорт был действительно неправильным.

Мои догадки

Я думаю, что это проблема с путями опция компилятора в tsconfig. json в потребляющем приложении. На протяжении всего моего исследования это одна вещь, которая всплывает больше всего на свете. У меня в настоящее время не установлен путь, потому что все работает. Моя общая библиотека выглядит и действует как любая другая библиотека node_module, кроме этой проблемы.

Моя другая мысль состоит в том, что, поскольку все работает и работает, проблема может быть в том, что vs-code не понимает импорт, или что-то в этом роде. такой природы. Хотя я думаю, что это маловероятно.

Фон

Оба angular проекта находятся на версии 9, rc7. Я использую ng-packagr для сборки своей библиотеки. Я использую код Visual Studio, и на момент написания я нахожусь на последней версии.

Ответы [ 2 ]

1 голос
/ 19 марта 2020

У меня никогда не было описанной ошибки до недавнего времени.

После удаления расширения языковой службы Angular (которое я недавно установил) ошибка исчезла.

0 голосов
/ 20 февраля 2020

Я переключил свои проекты с Angular 8 на 9, и у меня была такая же проблема в VS Code. Мое решение, которое работало для меня:

  • Сборка библиотеки с созданием конфигурации: ng build my-lib --prod => Это заставит компилятор использовать более старый View Engine вместо Ivy (Angular docs библиотеки )
  • Go в папку "./dist/my-lib/" и использование npm pack вместо npm link => это создаст tgz-файл, который вы можете установите в вашем потребляющем приложении.
  • Установите библиотеку в своем потребляющем приложении: npm install "D:/mypath/dist/my-lib/my-lib-2.1.0.tgz"

Это решает в моей среде проблему VS кода с Angular 9.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...