将本地开发的模块打包/导入到项目中 [英] 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-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文件夹，里面有一个../path-to-my-module的快捷方式 名称为 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:

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

<小时>

简单总结一下，我是这样进行的:

---

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

1. 安装 ng-packagr:
   • 全局安装:
     npm install -g ng-packagr
   • 将其安装在项目模块中:
     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，并添加以下内容:

从'./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 包
• 安装来自最终项目的打包模块:
  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屋！