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

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

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

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

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

对于图书馆开发人员来说，有很多事情要知道：

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

Ionic 3自定义库上的ng-packagr

1 个答案: