Klasa nie jest modułem kątowym dla biblioteki zewnętrznej

Nov 20 2020

Stworzyłem prostą Angularaplikację i dodałem bibliotekę niestandardową (ten sam projekt):

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

Następnie, aby przetestować tę prostą bibliotekę w innym projekcie, zbudowałem bibliotekę:ng build my-library-lib

Połączyłem bibliotekę w folderze dist i połączyłem ją z innym projektem i zaimportowałem plik MyLibraryLibModulew moimSharedModule

{ MyLibraryLibModule } from 'my-library-lib

imports: [..., MyLibraryLibModule] -> zgłasza błąd: class is not an Angular Module

To prosty projekt, który zrobiłem, aby przerobić wszystko od zera, niczego nie zmieniłem w tsconfigplikach itp. Przeglądałem online, ale nie mogłem znaleźć żadnego rozwiązania.

Aby to przetestować: Repozytorium biblioteki: https://github.com/GCour/ui-library

Proste repozytorium projektu: 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"
      ]
    }
  }
}

Odpowiedzi

2 Eliseo Nov 23 2020 at 12:06

Jeśli pytasz o użycie w programistach lokalnej biblioteki , powinieneś utworzyć swoją bibliotekę w środowisku produkcyjnym

ng build my-lib --prod

następnie użyj, npm linkaby utworzyć lokalnie swoją bibliotekę

cd dist
cd my-lib
npm link

Jeśli wszystko jest w porządku, możesz zaimportować do innego projektu swojego komputera, możesz sprawdzić, czy biblioteka została dodana do lokalnego npm w

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

Teraz jedyną rzeczą, której potrzebujesz w innym projekcie swojego komputera za pomocą npm link my-library

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

I używaj jak zwykle w swoim module app.module

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

   ...
   imports: [myLibModule}

Ronnie Nov 22 2020 at 19:15

Możesz użyć tego repozytorium GitHub w celach informacyjnych, które demonstruje konfigurację i integrację bibliotek niestandardowych przy użyciu npm link.

Komenda kompilacji interfejsu wiersza poleceń Angular używa innego konstruktora i wywołuje inne narzędzie kompilacji dla bibliotek niż dla aplikacji.

Angular CLI ma inny mechanizm budowania bibliotek, oparty na ng-packagrprzeciwieństwie do budowania aplikacji, który używa @angular-devkit/build-angulari jest oparty na webpack.
System kompilacji bibliotek jest dodawany do zależności tylko wtedy, gdy dodajesz bibliotekę za pomocą ng generate library my-lib. Jeśli ręcznie konfigurowałeś infrastrukturę, możesz się tego upewnić, weryfikując pliki konfiguracyjne.

Uważaj na mapowania ścieżek TypeScript.

Ponieważ istnieje różnica w mechanizmie kompilacji, źródło TypeScript jest konwertowane na zupełnie inny kod JavaScript w wbudowanej bibliotece niż w skompilowanej aplikacji.
Z tego powodu aplikacja, która zależy od biblioteki, powinna używać tylko mapowań ścieżki TypeScript, które wskazują na wbudowaną bibliotekę. Odwzorowania ścieżek TypeScript nie powinny wskazywać na pliki .ts źródła biblioteki.

Jak stwierdzono w oficjalnych dokumentach -

.. Kiedy tworzysz własną bibliotekę, musi ona znaleźć mapowanie w ścieżkach tsconfig.

UWAGA: Generowanie biblioteki za pomocą Angular CLI automatycznie dodaje jej ścieżkę do tsconfigpliku. Interfejs wiersza polecenia Angular używa tsconfigścieżek, aby poinformować system kompilacji, gdzie znaleźć bibliotekę.

Czy Twoja aplikacja używa kodu ze starej kompilacji biblioteki!

Za każdym razem, gdy plik w kodzie źródłowym jest zmieniany, wykonywana jest częściowa kompilacja, która emituje nowe zmiany z kodu źródłowego.
Jeśli uważasz, że zmiany w kodzie biblioteki nie są odzwierciedlone w aplikacji, prawdopodobnie używa ona starej wersji biblioteki.
Możesz odbudować swoją bibliotekę za każdym razem, gdy wprowadzasz w niej zmiany, ale ten dodatkowy krok wymaga czasu. Możemy skorzystać z wbudowanej funkcji Angular do budowania przyrostowego. Kompilacje przyrostowe można uruchamiać jako proces w tle w środowisku deweloperskim.
Dodaj --watchflagę do polecenia kompilacji:$ ng build my-lib --watch

Chcesz udostępnić kod biblioteki poza zakresem aplikacji?

Opublikuj swoją bibliotekę na npm dla użytkowników globalnych.
Utwórz łącze lokalne do udostępniania w sieci prywatnej.

ponieważ operacja została zmieniona i szuka możliwości utworzenia łącza lokalnego, poniżej wyjaśniono tylko drugi bit. Aby opublikować swoją bibliotekę npm-registry, możesz zapoznać się z oficjalną dokumentacją dotyczącą kątów na temat publikowania bibliotek w rejestrze npm . Jeśli dopiero zaczynasz korzystać z rejestru npm i po raz pierwszy publikujesz bibliotekę, możesz zapoznać się z różnymi podstawami do uwzględnienia podczas publikowania bibliotek w rejestrze npm