La classe n'est pas un module angulaire pour une bibliothèque externe

Nov 20 2020

J'ai créé une Angularapplication 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 MyLibraryLibModuledans 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 tsconfigfichiers, 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

2 Eliseo Nov 23 2020 at 12:06

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 linkpour 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}
Ronnie Nov 22 2020 at 19:15

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-packagrdifférence pour la construction d'applications, qui utilise @angular-devkit/build-angularet est basé sur webpack.

  • 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 tsconfigfichier. La CLI angulaire utilise les tsconfigchemins 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' --watchindicateur à 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.jsonfichier. Le package.json, doit avoir un attribut main. Assurez-vous qu'il est lié avec une extension de fichier .js et non avec un .ts

  • Vous pouvez désormais l'utiliser npm linkdans 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_modulesvous 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 projets app.module.ts.. ou les charger paresseusement si vous préférez cette approche.

Également..

import { FooModule } from 'foo-library';
...