10

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

在 mynode_modules中，创建了文件夹@myscope，在其中，有一个快捷方式，../path-to-my-module名称为myModule

有捷径这一事实会是问题的根源吗？如果是这样，如何解决？

4

1 回答 1

14

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

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
    • 将其安装在项目模块中：
      npm install ng-packagr --save-dev
  2. 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",
       //...
    }
  }
}

就我而言，我必须添加外部依赖项以避免打包/构建错误：

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

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

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

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

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

    npm run packagr

  2. 安装它以进行本地开发：

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

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

于 2018-01-08T12:26:55.647 回答