angular - Ionic 3 自定义库上的 ng-packagr

问题描述

我需要为我的 Ionic 应用程序构建一组库，以缩短上市时间并拥有可共享的代码片段。我找到了 ng-packagr，我想弄清楚如何使它与 Ionic 3.9.5 一起工作。

在构建阶段（运行ng-packagr -p package.json）我收到以下错误

BUILD ERROR
node_modules\ionic-angular\components\picker\picker-component.d.ts.PickerCmp.html(13,71): : Expected 0 arguments, but got 1.
node_modules\ionic-angular\components\input\input.d.ts.TextInput.html(1,928): : Expected 0 arguments, but got 1.
node_modules\ionic-angular\components\input\input.d.ts.TextInput.html(1,961): : Expected 0 arguments, but got 1.

Error: node_modules\ionic-angular\components\picker\picker-component.d.ts.PickerCmp.html(13,71): : Expected 0 arguments, but got 1.
node_modules\ionic-angular\components\input\input.d.ts.TextInput.html(1,928): : Expected 0 arguments, but got 1.
node_modules\ionic-angular\components\input\input.d.ts.TextInput.html(1,961): : Expected 0 arguments, but got 1.

    at Object.<anonymous> (C:\app_repo\gw-ionic-task-app\task-module\node_modules\ng-packagr\lib\ngc\compile-source-files.js:53:68)
    at Generator.next (<anonymous>)
    at C:\app_repo\gw-ionic-task-app\task-module\node_modules\ng-packagr\lib\ngc\compile-source-files.js:7:71
    at new Promise (<anonymous>)
    at __awaiter (C:\app_repo\gw-ionic-task-app\task-module\node_modules\ng-packagr\lib\ngc\compile-source-files.js:3:12)
    at Object.compileSourceFiles (C:\app_repo\gw-ionic-task-app\task-module\node_modules\ng-packagr\lib\ngc\compile-source-files.js:19:12)
    at Object.<anonymous> (C:\app_repo\gw-ionic-task-app\task-module\node_modules\ng-packagr\lib\ng-v5\entry-point\ts\compile-ngc.transform.js:26:32)
    at Generator.next (<anonymous>)
    at C:\app_repo\gw-ionic-task-app\task-module\node_modules\ng-packagr\lib\ng-v5\entry-point\ts\compile-ngc.transform.js:7:71
    at new Promise (<anonymous>)

似乎ionic-angular破坏了ng-packagr构建，但我不知道如何修复它。

这是我的package.json

{
 "name": "ionic-task-module",
 "version": "0.0.1",
 "main": "./dist/bundles/ionic-task-module.umd.min.js",
 "module": "./dist/index.js",
 "typings": "./dist/index.d.ts",
 "scripts": {
   "packagr": "ng-packagr -p package.json",
   //other scripts....
 },
 "ngPackage": {
   "lib": {
     "entryFile": "public_api.ts",
   }
 },
 "devDependencies": {
   "cpx": "^1.5.0",
   "gulp": "^3.9.1",
   "gulp-inline-ng2-template": "^4.0.0",
   "ng-packagr": "^3.0.0",
   "node-sass": "^4.5.2",
   "renamer": "^0.6.1",
   "rimraf": "^2.6.2",
   "rollup": "^0.58.2",
   "typescript": ">=2.4.2 <2.5",
   "uglify-js": "^2.7.5"
 },
 "dependencies": {
   "@angular/animations": "^5.2.11",
   "@angular/cdk": "^5.2.5",
   "@angular/common": "5.2.11",
   "@angular/compiler": "5.2.11",
   "@angular/compiler-cli": "5.2.11",
   "@angular/core": "5.2.11",
   "@angular/forms": "5.2.11",
   "@angular/http": "5.2.11",
   "@angular/material": "^5.2.5",
   "@angular/platform-browser": "5.2.11",
   "@angular/platform-browser-dynamic": "5.2.11",
   "@ionic-native/core": "~4.20.0",
   "@ionic/storage": "2.2.0",
   "ionic-angular": "3.9.5",
   "ionicons": "3.0.0",
   "intl": "1.2.5",
   "moment": "^2.24.0",
   "ngx-countdown-timer": "^0.1.9",
   "lokijs": "1.5.6",
   "rxjs": "5.5.11",
   "sw-toolbox": "3.6.0",
   "zone.js": "0.8.29",
   "localforage": "1.7.2",
   "ol": "5.3.3"
 }
}

在public_api.ts我只是导出我的主模块。它可能与错误版本有关packagr？（v3.0.6 是与 Angular 5.x 兼容的最后一个版本）

任何帮助，将不胜感激：）

标签： angulartypescriptionic-frameworkangular5ng-packagr

开发 Angular 库并非易事。

我建议您使用像 nrwl/nx 这样的工具：https ://nx.dev/angular

或者，如果它应该是更多具有角度的跨平台，这可能是一个非常酷的帮手：https ://nstudio.io/xplat/

但是你也可以自己做，但在这里我也建议你改变你的工作场所设置。

创建一个新项目ng new my-workplace --application=false
添加您的图书馆ng add library my-lib
添加您的应用程序ng add application my-app

在这种情况下，CLI 为您设置了很多...但是当您不想手动进行时，您也可以根据 cli 模板更改 angular.json。为此，请创建一个像上面这样的虚拟工作场所并根据它更改配置。

对于 Library Dev 来说，有很多事情需要了解：

当您使用 barell 导出/导入时，仅将其与my-folder/index/index 一起使用对于 ng-packager 非常重要，否则它将无法工作
将您想要使用的每个组件从外部导出到 public_api.ts，为此您可以将它们一个一个地导出，或者像第 1 点中一样使用 barell 导出，但请记住使用 /index... 导出它
如果您还想要库样式，则必须使用 build-scss 手动构建它们并将其复制到您的 dist 文件夹
避免循环依赖错误

angular - Ionic 3 自定义库上的 ng-packagr

问题描述

解决方案

推荐阅读