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

Question

我正在尝试将本地开发的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

在my中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

简要概述一下，这是我的工作方式：

1. 安装ng-packagr：
   • 全局安装：
     npm install -g ng-packagr
   • Install it in the project module:
     npm install ng-packagr --save-dev
2. create ng-package.json in the root folder of the project, and add the following:

   {
     "$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:

3. create public_api.ts in the root folder of the project, and add the following:

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

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

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

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

   npm run packagr

6. Install it for local development:

   • 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