web-dev-qa-db-ja.com

Angular npmリンクのライブラリ）で「モジュールが見つかりません」エラーを修正する方法

JavaScriptライブラリのAngularラッパーを構築しようとしていますが、「モジュールが見つかりません」というエラーが発生します。JavaScriptライブラリは開発中であり、まだNPMに公開されていないため、問題の原因となっている可能性があるnpm-linkを使用していますが、よくわかりません。私のAngularバージョンは8.2.2です。

Javascriptソースライブラリ

sourcelib/index.js：

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

sourcelibディレクトリには、package.jsonとREADME.mdファイル。期待どおりにnpm-linkが作成されます。

cd sourcelib
npm link

Angular wrapper

Angularワークスペース、ライブラリ、およびテストアプリケーションを作成するために私が実行しているCLIコマンドは、Angularです。

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

testlibをJavaScriptライブラリにリンクします。

cd projects/testlib
npm link sourcelib

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

今ビルドsourcelib：

ng build

これがコンソール出力です：

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

sourcelibへのnpm-linkを作成します。

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

角度テストアプリ

リンク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 {
}

アプリを提供：

ng serve

結果

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.

これのトラブルシューティングに多くの時間を費やしましたが、解決策を見つけることができませんでした。任意の助けいただければ幸いです。

javascriptangulartypescriptnpmnpm-link
4
Elliot

package.jsonを使用するパッケージのnpm linkにあるmainパラメータを確認してください。そのようなパラメーターが存在しないフォルダーを対象とするである場合、インポートは失敗します

0
Alberto