Класс не является модулем Angular для внешней библиотеки

Nov 20 2020

Я создал простое Angularприложение и добавил настраиваемую библиотеку (тот же проект):

ng new my-library ng generate library my-library-lib

Затем, чтобы протестировать эту простую библиотеку в другом проекте, я построил библиотеку :ng build my-library-lib

Я связал библиотеку в папке dist, связал ее с другим проектом и импортировал MyLibraryLibModuleв свойSharedModule

{ MyLibraryLibModule } from 'my-library-lib

imports: [..., MyLibraryLibModule] -> выдает ошибку: class is not an Angular Module

Это простой проект, который я сделал, чтобы все переделать с нуля, ничего не менял в tsconfigфайлах и т. Д. Посмотрел в Интернете, но не нашел никакого решения.

Чтобы проверить это: Репозиторий библиотеки: https://github.com/GCour/ui-library

Простое репо проекта: https://github.com/GCour/ui-test

tsconfig.lib.json:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "declaration": true,
    "declarationMap": true,
    "inlineSources": true,
    "types": [],
    "lib": [
      "dom",
      "es2018"
    ]
  },
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

tsconfing.lib.prod.json

{
  "extends": "./tsconfig.lib.json",
  "compilerOptions": {
    "declarationMap": false
  },
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "my-library-lib": [
        "dist/my-library-lib/my-library-lib",
        "dist/my-library-lib"
      ]
    }
  }
}

Ответы

2 Eliseo Nov 23 2020 at 12:06

Если вы спрашиваете об использовании в разработчике локальной библиотеки, вам следует создать свою библиотеку в производстве.

ng build my-lib --prod

затем используйте npm linkдля локального создания вашей библиотеки

cd dist
cd my-lib
npm link

Если все в порядке, вы можете импортировать в другой проект вашего компьютера, вы можете проверить, добавлена ли библиотека в ваш локальный npm в

C:\Users\[your-user]\AppData\Roaming\npm\node_modules\my-lib

Теперь единственное, что вам нужно использовать в другом проекте вашего компьютера, используя npm link my-library

cd c:\my-another-app\src
npm link my-library

И используйте, как обычно, в своем app.module

   import {myLibModule} from 'my-lib'
   //or import {MyLibService} from 'my-lib/public-api' 

   ...
   imports: [myLibModule}

Ronnie Nov 22 2020 at 19:15

Вы можете использовать этот репозиторий GitHub для справки, который демонстрирует настройку и интеграцию пользовательских библиотек с использованием npm link.

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

Angular CLI имеет другой механизм для создания библиотек, в ng-packagrотличие от создания приложений, который использует @angular-devkit/build-angularи основан на webpack.
Система сборки для библиотек добавляется к вашим зависимостям только тогда, когда вы добавляете библиотеку с использованием ng generate library my-lib. Если вы настраивали инфраструктуру вручную, вы можете убедиться в этом, проверив свои файлы конфигурации.

Будьте осторожны с сопоставлением путей TypeScript.

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

Как указано в официальных документах -

.. Когда вы создаете свою собственную библиотеку, она должна найти отображение в ваших путях tsconfig.

ПРИМЕЧАНИЕ. При создании библиотеки с помощью Angular CLI путь к tsconfigфайлу автоматически добавляется . Angular CLI использует tsconfigпути, чтобы сообщить системе сборки, где найти библиотеку.

Ваше приложение использует код из старой сборки библиотеки!

Каждый раз, когда файл в исходном коде изменяется, выполняется частичная сборка, которая генерирует новые изменения из исходного кода.
Если вы считаете, что изменения в коде библиотеки не отражаются в вашем приложении, вероятно, ваше приложение использует старую сборку библиотеки.
Вы можете перестраивать свою библиотеку всякий раз, когда вносите в нее изменения, но этот дополнительный шаг требует времени. Мы можем использовать встроенную в Angular функцию инкрементальной сборки. Добавочные сборки можно запускать в качестве фонового процесса в среде разработки.
Добавьте --watchфлаг в команду сборки:$ ng build my-lib --watch

Вам нужно поделиться кодом вашей библиотеки за пределами приложения?

Опубликуйте свою библиотеку на npm для пользователей со всего мира.
Создайте локальную ссылку для обмена в частной сети.

так как операция была отредактирована и пытается создать локальную ссылку, ниже объясняется только второй бит. Чтобы опубликовать свою библиотеку npm-registry, вы можете обратиться к официальной документации angular по публикации библиотек в реестре npm . Если вы новичок в реестре npm и публикуете библиотеку впервые, возможно, вы захотите проверить различные основания, которые следует учитывать при публикации ваших библиотек в реестре npm.