web-dev-qa-db-ja.com

ローカルで開発されたモジュールをプロジェクトにパック/インポートする

ローカルで開発したAngularプロジェクト/モジュールをangularアプリケーションにnpmリポジトリに公開せずにインポートしようとしています。

まず、このチュートリアルに従ってモジュールをUMD形式でビルドしました（公開の部分は省略しました）。

https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464

次に、次のコマンドラインを実行して、最終的なアプリケーションにモジュールをインストールしようとしました。

npm install ../path-to-my-module --save

これにより、アプリケーションの@myscope/myModuleにpackage.jsonとしてモジュールが正常に追加されましたが、問題は、アプリケーションへのモジュールのインポートが認識されないことです。最終的に次のエラーが発生しました：

Cannot find module @myscope/myModule

私のnode_modulesに、フォルダー@myscopeが作成され、その中にmyModuleという名前の../path-to-my-moduleへのショートカットがあります

ショートカットがあるということが問題の原因なのでしょうか？もしそうならそれを修正する方法？

angularnpmangular-cliangular-moduleng-packagr
8
Strider

私は私の問題を解決するのに役立つこの記事を見つけました：

https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

簡単に要約すると、これは私が進めた方法です：

  1. インストールng-packagr：
    • グローバルにインストール：
      npm install -g ng-packagr
    • プロジェクトモジュールにインストールします。
      npm install ng-packagr --save-dev
  2. 作成ng-package.jsonをプロジェクトのルートフォルダーに追加し、以下を追加します。
    {
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"   
    "externals": {
      "@angular/cdk": "ng.cdk",
      "@angular/cdk/accordion": "ng.cdk.accordion",
       //...
    }
  }
}

私の場合、パッケージ化/ビルドエラーを回避するために、外部依存関係を追加する必要がありました。

  1. 作成public_api.tsをプロジェクトのルートフォルダーに追加し、以下を追加します。

    export * from './src/app/modules/myFeature/my-feature.module'

  2. 編集package.jsonを追加し、packagr行をscriptsタグに追加します。

"scripts": {
  //...
  "packagr": "ng-packagr -p ng-package.json"
}

  1. ルートフォルダーから次のコマンドを実行して、パッケージを作成します。

    npm run packagr

  2. ローカル開発用にインストールします。

    • distフォルダーから次のコマンドを実行して、モジュールをパックします。
      npm pack
    • 最終プロジェクトからパックされたモジュールをインストールします。
      npm install ../some-relative-path/dist/my-component-library-0.0.0.tgz

次に、私の最終プロジェクトの他のモジュールまたはコンポーネントから自分のモジュールをインポートできます

9
Strider