将本地开发的模块打包/导入到项目中 [英] Pack/Import a local developed module into a project

问题描述

我正在尝试将本地开发的Angular项目/模块导入到angular应用程序中，而不将其发布到npm存储库中.

I am trying to import a locally developed Angular project/module into an angular application without publishing it into npm repository.

首先，我遵循本教程以UMD格式构建模块(我跳过了发布部分):

First, I followed this tutorial to build my module in UMD format (I skipped the publish part):

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

然后，我尝试通过执行以下命令行在最终应用程序中安装模块:

Then, I tried to install my module in the final application by executing this command line:

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

这成功将我的模块添加为应用程序package.json中的@myscope/myModule，但是问题是无法识别应用程序中模块的导入.我最终收到以下错误:

This added successfully my module as @myscope/myModule in the package.json of my application, but the problem is that the import of the module in the application isn't recognized. I ended up by getting the following error:

Cannot find module @myscope/myModule

在我的node_modules中，创建了文件夹@myscope，并在其中存在名为myModule

In my node_modules, the folder @myscope is created, and inside it, there is a shortcut to ../path-to-my-module with the name myModule

存在捷径的事实是否是问题的根源?以及如何解决?

Could the fact that there is a shortcut be the source of the problem? and if so how to fix it?

推荐答案

我发现这篇文章可以帮助我解决问题:

I found this article that helped me to solve my problem:

---

要简要介绍一下，这就是我的操作方法:

---

To give a brief summary, this is how I proceeded:

1. 安装 ng-packagr :
   • 全局安装:
     npm install -g ng-packagr
   • 将其安装在项目模块中:
     npm install ng-packagr --save-dev

1. Install ng-packagr:
   • Install it globally:
     npm install -g ng-packagr
   • Install it in the project module:
     npm install ng-packagr --save-dev

{
  "$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",
       //...
    }
  }
}

在我的情况下，我必须添加外部依赖项以避免包装/构建错误:

In my case I had to add external dependencies in order to avoid packaging/build errors:

1. 在项目的根文件夹中创建public_api.ts，并添加以下内容:

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

编辑package.json，并将packagr行添加到scripts标签:

Edit package.json, and add the packagr line to the scripts tag:

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

1. 通过从根文件夹运行以下命令来创建程序包:

1. Create the package by running the following command from the root folder:

npm run packagr

安装以进行本地开发:

• 通过在dist文件夹中运行以下命令来打包模块:
  npm pack
• 从最终项目中安装打包的模块:
  npm install ../some-relative-path/dist/my-component-library-0.0.0.tgz

• Pack the module by running the following command from the dist folder:
  npm pack
• Install the packed module from the final project:
  npm install ../some-relative-path/dist/my-component-library-0.0.0.tgz

然后我可以从最终项目的任何其他模块或组件中导入我的模块

Then I could import my module from any other module or component of my final project

这篇关于将本地开发的模块打包/导入到项目中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！