La classe n'est pas un module angulaire pour une bibliothèque externe
J'ai créé une Angular
application simple et ajouté une bibliothèque personnalisée (même projet):
ng new my-library
ng generate library my-library-lib
Ensuite, pour tester cette bibliothèque simple dans un projet différent , j'ai construit la lib:ng build my-library-lib
J'ai lié la bibliothèque dans le dossier dist et l'ai liée à un autre projet et importé le MyLibraryLibModule
dans monSharedModule
{ MyLibraryLibModule } from 'my-library-lib
imports: [..., MyLibraryLibModule]
-> jette une erreur: class is not an Angular Module
C'est un projet simple que j'ai fait pour tout refaire à partir de zéro, je n'ai rien changé dans les tsconfig
fichiers, etc. J'ai regardé en ligne mais je n'ai trouvé aucune solution.
Pour le tester: Library repo: https://github.com/GCour/ui-library
Repo de projet simple: 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"
]
}
}
}
Réponses
Si vous demandez comment utiliser dans le développeur une bibliothèque locale, vous devez créer votre bibliothèque en production
ng build my-lib --prod
puis utilisez npm link
pour créer localement votre bibliothèque
cd dist
cd my-lib
npm link
Si tout va bien, vous pouvez importer dans un autre projet de votre ordinateur, vous pouvez vérifier si la lib est ajoutée à votre npm local dans
C:\Users\[your-user]\AppData\Roaming\npm\node_modules\my-lib
Maintenant, la seule chose que vous devez utiliser dans un autre projet de votre ordinateur en utilisant npm link my-library
cd c:\my-another-app\src
npm link my-library
Et utilisez comme d'habitude, dans votre app.module
import {myLibModule} from 'my-lib'
//or import {MyLibService} from 'my-lib/public-api'
...
imports: [myLibModule}
Vous pouvez utiliser ce référentiel GitHub pour référence qui illustre la configuration et l'intégration des bibliothèques personnalisées à l'aide de npm link
.
La commande de construction Angular CLI utilise un générateur différent et appelle un outil de construction différent pour les bibliothèques et pour les applications.
Angular CLI a un mécanisme différent pour la création de bibliothèques, basé sur la
ng-packagr
différence pour la construction d'applications, qui utilise@angular-devkit/build-angular
et est basé surwebpack
.Le système de construction pour les bibliothèques n'est ajouté à vos dépendances que lorsque vous ajoutez une bibliothèque à l'aide de
ng generate library my-lib
. Si vous avez configuré manuellement l'infrastructure, vous voudrez peut-être vous en assurer en vérifiant vos fichiers de configuration.
Soyez prudent avec les mappages de chemins TypeScript.
Puisqu'il y a une différence dans le mécanisme de construction, la source TypeScript est convertie en un code JavaScript totalement différent dans la bibliothèque construite que dans une application construite.
Pour cette raison, une application qui dépend d'une bibliothèque ne doit utiliser que les mappages de chemins TypeScript qui pointent vers la bibliothèque générée. Les mappages de chemins TypeScript ne doivent pas pointer vers les fichiers .ts source de la bibliothèque.
Comme indiqué dans les documents officiels -
.. Lorsque vous créez votre propre bibliothèque, elle doit trouver le mappage dans vos chemins tsconfig.
REMARQUE: la génération d'une bibliothèque avec la CLI angulaire ajoute automatiquement son chemin d'accès au tsconfig
fichier. La CLI angulaire utilise les tsconfig
chemins pour indiquer au système de construction où trouver la bibliothèque.
Votre application utilise-t-elle le code d'une ancienne version de bibliothèque!
Chaque fois qu'un fichier dans le code source est modifié, une génération partielle est effectuée qui émet les nouvelles modifications à partir du code source.
Si vous pensez que vos modifications dans le code de la bibliothèque ne sont pas reflétées dans votre application, votre application utilise probablement une ancienne version de la bibliothèque.
Vous pouvez reconstruire votre bibliothèque chaque fois que vous y apportez des modifications, mais cette étape supplémentaire prend du temps. Nous pouvons utiliser la fonction de construction incrémentielle intégrée Angular. Les builds incrémentiels peuvent être exécutés en tant que processus d'arrière-plan dans votre environnement de développement.
Ajoutez l'
--watch
indicateur à la commande de construction:$ ng build my-lib --watch
Besoin de partager le code de votre bibliothèque en dehors de la portée de l'application?
- Publiez votre bibliothèque sur npm pour les utilisateurs du monde entier.
- Créez un lien local pour le partage au sein d'un réseau privé.
puisque l'op a été édité et cherche à créer un lien local, ce qui suit n'explique que le deuxième bit. Pour publier votre bibliothèque sur npm-registry
, vous pouvez vous référer aux documents angulaires officiels sur la publication de bibliothèques sur le registre npm . Si vous êtes nouveau dans le registre npm et que c'est la première fois que vous publiez une bibliothèque, vous voudrez peut-être consulter les différents motifs à couvrir lors de la publication de vos bibliothèques sur le registre npm
En travaillant avec npm link
...
Une fois que vous avez créé votre bibliothèque, afin de vérifier si cela est fait correctement, accédez au dossier dist / de votre espace de travail de bibliothèque et vérifiez le
package.json
fichier. Lepackage.json
, doit avoir un attributmain
. Assurez-vous qu'il est lié avec une extension de fichier .js et non avec un .tsVous pouvez désormais l'utiliser
npm link
dans l'espace de travail de votre bibliothèque. Il crée un pointeur de référence - un lien symbolique - dans l'environnement du nœud local en direction de votre bibliothèque.Une fois la référence locale créée, accédez à l'espace de travail de votre projet et utilisez
npm link <library-name>
. Assurez-vous qu'il s'agit du nom de la bibliothèque et non du nom de l'espace de travail bibliothèque .Dans l'espace de travail du projet, dans le,
node_modules
vous devriez pouvoir voir votre bibliothèque avec un « @ » ajouté. Désormais, vous pouvez facilement importer des composants et services pertinents de votre bibliothèque dans vos projetsapp.module.ts
.. ou les charger paresseusement si vous préférez cette approche.
Également..
import { FooModule } from 'foo-library';
...