wake-up-neo.com

Angular 7-Bibliothek - So bündeln Sie Abhängigkeiten, ohne sie der Hauptanwendung hinzuzufügen

Ich habe eine Angular 7 -Anwendung, die ich mit dem @angular/cli erstellt habe, und dann habe ich eine Bibliothek hinzugefügt, die ng generate library verwendet. Es funktioniert gut im dev Modus und so. Es gibt keine Probleme.

Ich möchte die für die Bibliothek relevanten Abhängigkeiten beibehalten. Und den package.json der Hauptanwendung nicht verstopfen. Also habe ich natürlich npm install --save [xyx] in den Bibliotheksordner aufgenommen. Das hat gut funktioniert. Läuft immer noch gut im dev-Modus.

Aber wenn ich versuche, ng build --prod zu tun, kann er plötzlich die Abhängigkeiten der Bibliothek nicht finden. Der Grund dafür ist natürlich offensichtlich; Sie werden nicht ordnungsgemäß gebündelt. Ich habe npms bundleDependencies-Funktion erfolglos untersucht und die lib: { embedded: ... }- und whitelistedNonPeerDependencies-Option für ng-package.json geprüft, aber ich schaffe es nicht, was ich will .

Dies ist keine zwingende Bedingung. Wenn es absolut obligatorisch ist, werde ich die Abhängigkeiten in der Hauptanwendung installieren. Aber ich möchte das gerne vermeiden. Vielleicht ist es ein unvernünftiges Ziel, ich bin mir nicht sicher.

Jede Hilfe wäre sehr dankbar.

14
Ciel

Ich habe versucht, das zu tun, was Sie vor Ort beschrieben haben, und hatte kein Problem. Hier waren die Schritte, die ich unternommen habe.

  1. npm install @angular/cli
  2. node_modules/.bin/ng new installtest
  3. cd installtest
  4. node_modules/.bin/ng generate library libtest
  5. cd projects/libtest
  6. npm install --save numeral
  7. npm install --save-dev @types/numeral
  8. ro.pipe.ts zu projects/libtest/src hinzugefügt

    import { Pipe, PipeTransform } from '@angular/core';
    
    import * as numeral from 'numeral';
    
    @Pipe({name: 'decimalUnit'})
    export class RoPipe implements PipeTransform {
      constructor() {
        numeral.register('locale', 'ro', {
            delimiters: {
                thousands: '.',
                decimal: ','
            },
            abbreviations: {
                thousand: 'k',
                million: 'm',
                billion: 'b',
                trillion: 't'
            },
            ordinal: function (number) {
                return number === 1 ? 'er' : 'ème';
            },
            currency: {
                symbol: 'RON'
            }
        });
    
        numeral.locale('ro');
    }
    
      public transform(value: string, numDecimals: number) {
        const b = numeral(value);
        let x = '0,0.';
        for (let i = 0; i < numDecimals; i++) {
            x = x + '0';
        }
    
        return b.format(x);
      }
    }
    
  9. projects/libtest/src/lib/libtest.module.ts aktualisieren

    import { NgModule } from '@angular/core';
    import { LibtestComponent } from './libtest.component';
    import { RoPipe } from './ro.pipe';
    
    @NgModule({
      declarations: [LibtestComponent, RoPipe],
      imports: [
      ],
      exports: [LibtestComponent, RoPipe]
    })
    export class LibtestModule { }
    
  10. projects/libtest/src/public_api.ts aktualisieren

    export * from './lib/libtest.service';
    export * from './lib/libtest.component';
    export * from './lib/libtest.module';
    export * from './lib/ro.pipe';
    
  11. tsconfig.json aktualisieren. füge "projects/libtest/node_modules/@types" zu "typeRoots" hinzu

  12. src/app/app.module.ts aktualisieren

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { LibtestModule } from 'projects/libtest/src/public_api';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        LibtestModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    
  13. src/app/app.component.html aktualisieren

    <label>{{ '12345678' | decimalUnit:2 }}</label>
    <br>
    <label>{{ '12345678' | decimalUnit:0 }}</label>
    <br>
    <label>{{ '12345678' | decimalUnit:2 }}</label>
    <br>
    <label>{{ '12345678' | decimalUnit:2 }}</label>
    <br>
    <label>{{ '12345678' | decimalUnit:2 }}</label>
    

Danach habe ich npm run start ausgeführt, um zu überprüfen, ob es mit dem dev-Build funktioniert. Als Nächstes habe ich npm run start -- --prod ausgeführt, um zu überprüfen, ob es mit dem Prod-Build funktioniert. Beide haben gearbeitet. Das letzte, was ich tat, war, npm run build und npm run build -- --prod auszuführen und die Website über IIS zu laden, was beides funktionierte. Ich habe das vollständige Repo-Projekt auf GitHub als Referenz gesetzt.

Sie bieten nicht wirklich ein MVCE . Daher ist es schwer zu sagen, warum Ihr Projekt momentan nicht funktioniert. Wenn die oben genannten Schritte für Sie nicht funktionieren, geben Sie bitte detaillierter an, was Sie genau versucht haben, was fehlschlägt.

7

Meines Wissens ist dies nicht möglich.

Um Ihr "Problem" etwas zu lösen, können Sie ein völlig neues CLI-Projekt erstellen. Generieren Sie im neuen Projekt Ihre Bibliothek und andere zukünftige Bibliotheken. Das neue Projekt kann einige Schaufenster/Dokumente für Ihre Bibliotheken sein. Auf diese Weise verwenden alle Ihre Bibliotheken dieselbe Version von Abhängigkeiten, sind jedoch nicht in Ihrer Hauptanwendung enthalten.

0
Robin Dijkhof