Wenn jemand von Ihnen versucht hat, Winkelbibliotheken zu erstellen, kann es zu Problemen beim verzögerten Laden des Feature-Moduls von node_modules kommen . Lass uns tiefer tauchen und durch das dunkle Wasser gehen.
Wenn Sie mit der Frage "Wie erstelle ich die Bibliothek?" Nicht vertraut sind. - Es gibt mindestens zwei Werkzeuge zum Erstellen einer Winkelbibliothek:
- Angular CLI (ng-packagr unter der Haube) ;
- Direkt das ng-packagr ;
Sie können weitere Details erhalten, indem Sie auf die obigen Links klicken. Alle anderen gehen wir weiter.
Lazy Modules (Funktionsmodule)
Wenn Sie bereits mit Angular gearbeitet haben, müssen Sie sich mit Angular-Modulen auskennen und wissen, für welche Zwecke Sie sie benötigen.
Ein Modul muss normalerweise eine Reihe von Komponenten enthalten, Dienste von Anweisungen, die eine bestimmte autarke Funktionalität darstellen. Oft erstellt der Entwickler ein separates Modul für eine Funktion, die erst in die App geladen werden muss, wenn ein Benutzer nicht zu einer bestimmten Seite wechselt.
Und jetzt die Zeit für den Feature Store (momentan nicht darüber) und das Feature-Modul.
Wenn Sie Lazy Loaded-Module in ein übergeordnetes Modul aufnehmen, sind diese nicht faul, da Sie sie in der App deklarieren und TypeScript im JavaScript-Webpack zum Zeitpunkt der Kompilierung den Code dieser Module in die Hauptgruppe einfügt und die Anwendung geladen wird Der ganze Code beim Start.
Nur ein korrekter Weg, um ein Lazy-Modul im Routing zu deklarieren.
const routes: Routes = [ { path: 'reports', loadChildren: './reports/reports.module#ReportsModule' } ];
Sie geben also die spezielle Zeichenfolge an, die tatsächlich "#" ist, und die App weiß, dass dieses Modul separat von der Haupt-App geladen werden muss.
Probleme beginnen
Alles funktioniert einwandfrei, wenn das Feature-Modul Teil des Quellcodes Ihrer App ist. Was ist jedoch, wenn es sich um eine kompilierte Bibliothek handelt, die mit npm eingerichtet wurde? - Es funktioniert nicht wie gewohnt.
Das Hauptproblem ist, dass beim Versuch, ein solches Funktionsmodul mit der üblichen Zeichenfolge zu registrieren, der Fehler auftritt.
const routes: Routes = [ { path: 'reports',
Aufgrund solcher Deklarationen sind sie für kompilierte Module nicht kompatibel.
Sie können einen Wrapper erstellen und ihn dann in Routern deklarieren.
import { ReportsModule } from "my-lib"; @NgModule({ imports: [ReportModule], exports: [ReportModule] }) export class ReportsWrapperModule { } const routes: Routes = [ { path: 'reports', loadChildren: './wrapper.module#ReportsWrapperModule' } ];
ABER, wer hat Interesse daran, 15 Wrapper für 15 Module zu erstellen? - Ich bin nicht!
Mögliche Lösungen
Ich werde mich nicht verstecken Ich habe keine Zeit damit verschwendet zu analysieren, warum dies aufgrund von Webpack oder einer Angular CLI passiert. Ich habe zwei mögliche Lösungen gefunden.
Lösung Nr. 1. Bibliothek kompiliert und Feature-Modul hat keine verschachtelten Feature-Module
Link für das Arbeitsbeispiel.
Im ersten Schritt definieren Sie, welche Art von LoadChildren- Attribut
type LoadChildren = string | LoadChildrenCallback; type LoadChildrenCallback = () => Type<any> | NgModuleFactory<any> | Promise<Type<any>> | Observable<Type<any>>;
Interessant! Theoretisch ist es also möglich, import () zu verwenden, um Versprechen mit dem erforderlichen Modul zurückzugeben.
Der nächste Code muss in Ordnung sein.
const routes: Routes = [ { path: 'reports', loadChildren: () => import('my-lib').then((res) => res.ReportsModule) } ];
Oh, was passiert? - Wir sehen Fehler in der Konsole ... Ja, ändern Sie einfach tsconfig.json
{ .. "module": "esNext", .. }
Jetzt muss es gut funktionieren.
Lösung Nr. 2. Feature-Module haben verschachtelte Feature-Module (nur für eine nicht kompilierte Bibliothek)
Link für das Arbeitsbeispiel.
Sie müssen die Bibliothek nicht kompilieren, bevor Sie sie in ein npm-Paket packen.
Da die Quelle der Bibliothek nicht kompiliert ist, müssen Sie sie in den Kompilierungsprozess Ihrer App einbeziehen. Ändern Sie einfach tsconfig.app.json .
"exclude": [ "test.ts", "**/*.spec.ts", "../node_modules/**/*.spec.ts", "../node_modules/**/test.ts" ], "include": [ "*.ts", "./environments", "./app", "../node_modules/my-lib" ]
Gute Nachrichten - kein Import () erforderlich;
const routes: Routes = [{ path: "reports", loadChildren: "my-lib#ReportsModule" }];
Tadam!
PS Diese Lösungen wurden nur mit Angular 7 getestet.
Vielen Dank für Ihre Aufmerksamkeit, viel Spaß.