Class ist kein Angular-Modul für externe Bibliotheken

Nov 20 2020

Ich habe eine einfache AngularApp erstellt und eine benutzerdefinierte Bibliothek hinzugefügt (dasselbe Projekt):

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

Um diese einfache Bibliothek in einem anderen Projekt zu testen , habe ich die Bibliothek erstellt :ng build my-library-lib

Ich habe die lib im dist-Ordner verlinkt und mit einem anderen Projekt verknüpft und die MyLibraryLibModulein my importiertSharedModule

{ MyLibraryLibModule } from 'my-library-lib

imports: [..., MyLibraryLibModule] -> wirft Fehler: class is not an Angular Module

Dies ist ein einfaches Projekt, das ich durchgeführt habe, um alles von Grund auf neu zu tsconfigerstellen , nichts an Dateien usw. geändert zu haben. Ich habe online gesucht, aber keine Lösung gefunden.

So testen Sie es: Library Repo: https://github.com/GCour/ui-library

Einfaches Projekt-Repo: 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"
      ]
    }
  }
}

Antworten

2 Eliseo Nov 23 2020 at 12:06

Wenn Sie nach der Verwendung einer lokalen Bibliothek durch Entwickler fragen , sollten Sie Ihre Bibliothek in der Produktion erstellen

ng build my-lib --prod

Verwenden Sie dann npm link, um Ihre Bibliothek lokal zu erstellen

cd dist
cd my-lib
npm link

Wenn alles in Ordnung ist, können Sie in ein anderes Projekt Ihres Computers importieren und überprüfen, ob die Bibliothek zu Ihrem lokalen npm in hinzugefügt wurde

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

Jetzt ist das einzige, was Sie in einem anderen Projekt Ihres Computers verwenden müssen npm link my-library

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

Und verwenden Sie es wie gewohnt in Ihrem app.module

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

   ...
   imports: [myLibModule}

Ronnie Nov 22 2020 at 19:15

Sie können dieses GitHub-Repository als Referenz verwenden, das die Einrichtung und Integration der benutzerdefinierten Bibliotheken mithilfe von demonstriert npm link.

Der Befehl Angular CLI build verwendet einen anderen Builder und ruft für Bibliotheken ein anderes Build-Tool auf als für Anwendungen.

Angular CLI verfügt über einen anderen Mechanismus zum Erstellen von Bibliotheken, der im ng-packagrGegensatz zum Erstellen von Anwendungen verwendet wird @angular-devkit/build-angularund auf dem basiert webpack.
Das Build-System für Bibliotheken wird nur dann zu Ihren Abhängigkeiten hinzugefügt, wenn Sie eine Bibliothek mit hinzufügen ng generate library my-lib. Wenn Sie die Infrastruktur manuell eingerichtet haben, können Sie dies sicherstellen, indem Sie Ihre Konfigurationsdateien überprüfen.

Seien Sie vorsichtig mit TypeScript-Pfadzuordnungen.

Da es einen Unterschied im Erstellungsmechanismus gibt, wird die TypeScript-Quelle in der erstellten Bibliothek in einen völlig anderen JavaScript-Code konvertiert als in einer erstellten Anwendung.
Aus diesem Grund sollte eine App, die von einer Bibliothek abhängt, nur TypeScript-Pfadzuordnungen verwenden, die auf die erstellte Bibliothek verweisen. TypeScript-Pfadzuordnungen sollten nicht auf die .ts-Dateien der Bibliotheksquelle verweisen.

Wie in den offiziellen Dokumenten angegeben -

.. Wenn Sie eine eigene Bibliothek erstellen, muss diese die Zuordnung in Ihren tsconfig-Pfaden finden.

HINWEIS: Beim Generieren einer Bibliothek mit der Angular CLI wird der Pfad automatisch zur tsconfigDatei hinzugefügt. Die Angular-CLI verwendet die tsconfigPfade, um dem Build-System mitzuteilen, wo sich die Bibliothek befindet.

Verwendet Ihre Anwendung Code aus einer alten Bibliothek?

Jedes Mal, wenn eine Datei im Quellcode geändert wird, wird eine Teilerstellung durchgeführt, die die neuen Änderungen aus dem Quellcode ausgibt.
Wenn Sie der Meinung sind, dass Ihre Änderungen im Bibliothekscode nicht in Ihrer App berücksichtigt werden, verwendet Ihre App wahrscheinlich einen alten Build der Bibliothek.
Sie können Ihre Bibliothek jederzeit neu erstellen, wenn Sie Änderungen daran vornehmen. Dieser zusätzliche Schritt benötigt jedoch Zeit. Wir können die integrierte inkrementelle Angular-Build-Funktion verwenden. Inkrementelle Builds können als Hintergrundprozess in Ihrer Entwicklungsumgebung ausgeführt werden.
Fügen Sie --watchdem Build-Befehl das Flag hinzu:$ ng build my-lib --watch

Müssen Sie Ihren Bibliothekscode außerhalb des Anwendungsbereichs freigeben?

Veröffentlichen Sie Ihre Bibliothek auf npm für globale Benutzer.
Erstellen Sie einen lokalen Link für die Freigabe in einem privaten Netzwerk.

Da die Operation bearbeitet wurde und nach einem lokalen Link gesucht wird, wird im Folgenden nur das zweite Bit erläutert. Informationen zum Veröffentlichen Ihrer Bibliothek npm-registryfinden Sie in den offiziellen eckigen Dokumenten zum Veröffentlichen von Bibliotheken in der npm-Registrierung . Wenn Sie neu in der npm-Registrierung sind und zum ersten Mal eine Bibliothek veröffentlichen, sollten Sie sich die verschiedenen Gründe ansehen, die beim Veröffentlichen Ihrer Bibliotheken in der npm-Registrierung zu berücksichtigen sind