ng-packagr on Ionic 3定制库

Question

我需要为我的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兼容的最新版本)

如有任何帮助，我们将不胜感激:)

Answer 1

开发Angular库并不是一件容易的事情。

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

或者，如果它应该更多地与angular一起跨平台，这可能是一个非常酷的助手：https://nstudio.io/xplat/

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

使用ng new my-workplace --application=false

• Add your library ng add library my-lib

• Add ng add application my-app

1. 创建一个新项目

这种情况下的CLI设置为您提供了很多帮助...但是当你不想手动操作的时候，你也可以根据cli模板来改变你的angular.json。为此，创建一个如上所示的虚拟工作区，并根据它更改配置。

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

1. 当您使用barell导出/导入然后只与my-folder/index一起使用/index对于ng-packager非常重要，否则它将无法工作
2. 将您想要从外部使用的每个组件导出到public_api.ts，为此您可以使用barell导出逐个导出它们，但请记住使用/index导出...
3. 如果您还想使用库样式，则必须使用build-scss手动构建它们并将其复制到您的dist文件夹
4. 避免循环依赖错误<代码>H222<代码>G223