web-dev-qa-db-fra.com

Comment corriger l'erreur "Module introuvable" dans la bibliothèque Angular avec lien npm?

J'essaie de construire un Angular pour une bibliothèque Javascript mais j'obtiens une erreur "Module introuvable". La bibliothèque Javascript est en développement et n'est pas encore publiée sur NPM, donc je J'utilise npm-link, ce qui pourrait être à l'origine du problème, mais je n'en suis pas sûr. Ma Angular est la 8.2.2.

bibliothèque source Javascript

sourcelib/index.js: 

var sourcelib = (function () {
    var doSomething = function() {
    };
    return {
        doSomething: doSomething
    };
})();
export default sourcelib;

Le répertoire sourcelib contient également package.json et Fichiers README.md . Un lien npm est créé comme vous vous en doutez:

cd sourcelib
npm link

enveloppe angulaire

Voici les commandes CLI Angular Angular que j'exécute pour créer l'espace de travail, la bibliothèque et l'application de test Angular:

ng new app-test --create-application=false
cd app-test
ng generate library testlib
ng generate application testlib-app

Maintenant, liez testlib à la bibliothèque Javascript:

cd projects/testlib
npm link sourcelib

Générez un module et un composant à l'intérieur testlib :

cd src/lib
ng generate module test
ng generate component test/testcomp

testcomp.component.ts :

import { Component, OnInit } from '@angular/core';
import sourcelib from 'sourcelib';

@Component({
    selector: 'testcomp',
    template: '<div></div>'
})
export class TestcompComponent implements OnInit {
    constructor() { }

    ngOnInit() {
        sourcelib.doSomething();
    }
}

public-api.ts :

export * from './lib/test/test.module';
export * from './lib/test/testcomp/testcomp.component';

Maintenant, construisez sourcelib :

ng build

Voici la sortie de la console:

Building Angular Package

------------------------------------------------------------------------------
Building entry point 'testlib'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
WARNING: No name was provided for external module 'sourcelib' in output.globals – guessing 'sourcelib'
Minifying UMD bundle
Copying declaration files
Writing package metadata
Built testlib

------------------------------------------------------------------------------
Built Angular Package!
 - from: /Users/.../app-test/projects/testlib
 - to:   /Users/.../app-test/dist/testlib
------------------------------------------------------------------------------

Et créez un lien npm vers sourcelib :

cd ../../dist/testlib
npm link

application de test angulaire

Liez testlib-app à testlib :

cd ../../projects/testlib-app
npm link testlib

app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TestcompComponent } from 'testlib';

@NgModule({
    declarations: [
        AppComponent, TestcompComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts :

import { Component } from '@angular/core';
import { TestcompComponent } from 'testlib';

@Component({
    selector: 'app-root',
    template: '<testcomp></testcomp>'
})
export class AppComponent {
}

Servez l'application:

ng serve

Résultat

ERROR in /Users/.../app-test/dist/testlib/fesm2015/testlib.js
Module not found: Error: Can't resolve 'sourcelib' in '/Users/.../app-test/dist/testlib/fesm2015'
ℹ ｢wdm｣: Failed to compile.

J'ai passé beaucoup de temps à résoudre ce problème, mais je n'ai pas pu trouver de solution. Toute aide serait appréciée.

javascriptangulartypescriptnpmnpm-link
4
Elliot

Veuillez vérifier le paramètre main dans le package.json du package que vous souhaitez npm link de. Si un tel paramètre est cibler un dossier qui n'existe pas existe, l'importation échouera

0
Alberto