Question

我正在尝试将本地开发的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",
       //...
    }
  }
}

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

在项目的根文件夹中创建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

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

将本地开发的模块打包/导入项目

1 个答案: