web-dev-qa-db-fra.com

Angular 7 library - comment regrouper des dépendances sans les ajouter à l'application principale

J'ai un Angular 7 application que j'ai créé avec le @angular/cli et puis j'ai ajouté une bibliothèque à l'aide de ng generate library. Cela fonctionne très bien dans le mode dev et autres. Il n'y a pas de problèmes.

J'aimerais conserver les dépendances pertinentes pour la bibliothèque qui y est contenue; Et ne pas encombrer le package.json de l'application principale. Alors, naturellement, j'ai npm install --save [xyx] dans le dossier de la bibliothèque. Cela a bien fonctionné. Fonctionne toujours très bien en mode dev.

Mais quand j'essaie de faire ng build --prod, soudain, il ne peut pas trouver les dépendances qui font partie de la bibliothèque. La raison en est évidente, bien sûr; Ils ne sont pas correctement intégrés. J'ai étudié la fonctionnalité npm de bundleDependencies en vain, et j’ai examiné les options lib: { embedded: ... } et whitelistedNonPeerDependencies pour ng-package.json, mais je n'arrive pas à leur demander de faire ce que je veux. .

Ce n'est pas une exigence décisive; Si c'est absolument obligatoire, je vais simplement installer les dépendances dans l'application principale. Mais j'aimerais bien éviter cela. Peut-être que c'est un objectif déraisonnable, je ne suis pas sûr.

Toute aide serait grandement appréciée.

angularangular7
14
Ciel

J'ai essayé de faire ce que vous avez décrit localement sans problème. Voici les étapes que j'ai prises.

  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. ajouté ro.pipe.ts à projects/libtest/src

    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. mettre à jour projects/libtest/src/lib/libtest.module.ts

    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. mettre à jour projects/libtest/src/public_api.ts

    export * from './lib/libtest.service';
export * from './lib/libtest.component';
export * from './lib/libtest.module';
export * from './lib/ro.pipe';

  11. mettre à jour tsconfig.json. ajouter "projects/libtest/node_modules/@types" à "typeRoots" tableau

  12. mettre à jour src/app/app.module.ts

    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. mettre à jour src/app/app.component.html

    <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>

Après cela, j'ai exécuté npm run start pour vérifier qu'il fonctionne avec la version de développement. Ensuite, j'ai exécuté npm run start -- --prod pour vérifier qu'il fonctionne avec la version de production. Les deux ont travaillé. La dernière chose que j'ai faite a été d'exécuter npm run build et npm run build -- --prod et de charger le site Web via IIS, qui ont tous deux fonctionné. Je mets le projet de repo complet sur GitHub pour référence.

Vous ne fournissez pas vraiment un MVCE . Il est donc difficile de vous dire pourquoi votre projet ne fonctionne pas pour le moment. Si les étapes ci-dessus ne vous conviennent pas, veuillez fournir plus de détails sur ce que vous avez essayé de faire et qui échoue (ou au moins sur un projet minimal capable de reproduire le problème rencontré).

7
peinearydevelopment

Pour autant que je sache, ce n'est pas possible.

Pour résoudre un peu votre "problème", vous pouvez créer un nouveau projet cli. Dans le nouveau projet, générez votre bibliothèque et d’autres bibliothèques futures. Le nouveau projet peut être une vitrine/une documentation pour vos bibliothèques. De cette façon, toutes vos bibliothèques utiliseront la même version des dépendances mais ne seront pas incluses dans votre application principale.

0
Robin Dijkhof