Pack/Import 一个本地开发的模块到项目中

Question

我正在尝试将本地开发的 Angular project/module 导入到 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，在里面，有一个 ../path-to-my-module 的快捷方式，名称为 myModule

是否存在捷径是问题的根源？如果是，如何解决？

Answer 1

我发现这篇文章帮助我解决了我的问题：

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

做一个简短的总结，我是这样进行的：

安装 ng-packagr：
- 全局安装：
  npm install -g ng-packagr
- 在项目模块中安装：
  npm install ng-packagr --save-dev

在项目的根文件夹中创建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",
       //...
    }
  }
}

在我的例子中，我必须添加外部依赖项以避免 packaging/build 错误：

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

export * from './src/app/modules/myFeature/my-feature.module'
编辑 package.json，并将 packagr 行添加到 scripts 标签：

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

通过运行从根文件夹中执行以下命令创建程序包：

npm run packagr
安装它用于本地开发：
- 通过运行从 dist 文件夹中执行以下命令来打包模块：
  npm pack
- 从最终项目安装打包模块：
  npm install ../some-relative-path/dist/my-component-library-0.0.0.tgz

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

Pack/Import 一个本地开发的模块到项目中

Pack/Import a local developed module into a project

npm

angular-module

angular-cli

angular

ng-packagr