docgeni / docgeni

📖 A modern, powerful and out of the box documentation generator for Angular components lib and markdown docs.(现代化的、强大的、开箱即用的 Angular 组件文档生成工具)

Home Page:https://docgeni.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

类库配置 apiMode 报错

shiyuyuanfang opened this issue · comments

Describe the bug
apiMode 配置成 "automatic" 或者 "compatible" 执行命令 npm run start:docs 有报错信息;无法生成 api,并且页面空白;

To Reproduce
背景: 使用 cli 初始化一个名为 “my-app” 的 angular 项目;并通过 ng add @docgeni/cli 将 docgeni 添加到项目内;

image

这是因为类库配置的根目录没有 tsconfig.lib.json 导致的,确保 rootDir 下有配置文件

这边回头加一下有好的错误提示

tsconfig.lib.json

你好,我在项目根目录下创建了 tsconfig.lib.json 文件,但未进行任何配置,报错信息果然消失了,但是我并不清楚该如何配置 tsconfig.lib.json 文件,请问有没有可供参考的配置。

下图是我的项目目录
image

一般新建一个 lib 会自动创建一个 tsconfig.lib.json 在类库的根目录,我不知道你这个 src/app 是类库项目还是普通的项目。

这个 tsconfig.lib.json 就是类库的 tsconfig 文件,docgeni 需要根据它获取源代码文件

建议你这边不是通过 ng g lib some-lib 创建类库,这样默认就会有 tsconfig.lib.json,如果是非标准的模式创建的,你那个 tsconfig.lib.json 其实就是 tsconfig.app.json 的内容,目前这个名字是定死的,没有支持配置,你简单拷贝 tsconfig.app.json 即可。

一般新建一个 lib 会自动创建一个 tsconfig.lib.json 在类库的根目录,我不知道你这个 src/app 是类库项目还是普通的项目。

这个 tsconfig.lib.json 就是类库的 tsconfig 文件,docgeni 需要根据它获取源代码文件

我是通过

npm install -g @angular/cli 
ng new my-app

创建的一个普通的 angular 项目;

@shiyuyuanfang 通过 ng new my-app 创建的是一个普通的项目,不是类库,你这边后续要 build 类库发版的话需要自行修改很多配置,如果你之后要发布这个类库项目,建议采用类库的方式安装,如果你这边就是一个普通的项目想要通过 docgeni 展示一些组件的文档,那么你先手动拷贝 tsconfig.app.jsontsconfig.lib.json,我之后会考虑这个文件支持自定义,这样就可以配置使用 tsconfig.app.json 文件。

创建类库项目可以参考模板: https://github.com/docgeni/docgeni-template

@shiyuyuanfang 通过 ng new my-app 创建的是一个普通的项目,不是类库,你这边后续要 build 类库发版的话需要自行修改很多配置,如果你之后要发布这个类库项目,建议采用类库的方式安装,如果你这边就是一个普通的项目想要通过 docgeni 展示一些组件的文档,那么你先手动拷贝 tsconfig.app.jsontsconfig.lib.json,我之后会考虑这个文件支持自定义,这样就可以配置使用 tsconfig.app.json 文件。

创建类库项目可以参考模板: https://github.com/docgeni/docgeni-template

我们目前的需求就是将项目内已有的组件可视化的展示给组内其他成员;但是我手动拷贝 tsconfig.app.jsontsconfig.lib.json后依旧不能自动生成api

image

这个得提供一个最小化的在线示例帮你排查一下,tsconfig.json 有配置 paths 么

好的,您稍等

这个得提供一个最小化的在线示例帮你排查一下,tsconfig.json 有配置 paths 么

请访问 https://gitee.com/mayun_yuanfang/docgeni-test 查看我的测试项目

@shiyuyuanfang 我看了一下你的示例,因为你这边没有在 AppModule 中导入 ButtonModule 所以导致从 tsconfig.lib.json 文件中读取不到 components 下的代码。
两种解决方案

  1. AppModule 中导入 ButtonModule
  2. 或者修改 tsconfig.lib.json, 添加 include: "src/**/*.ts" 包含所有 ts 文件
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "examples/**/*"
  ]
}

@shiyuyuanfang 我看了一下你的示例,因为你这边没有在 AppModule 中导入 ButtonModule 所以导致从 tsconfig.lib.json 文件中读取不到 components 下的代码。 解决方案

  1. AppModule 中导入 ButtonModule
  2. 修改 tsconfig.lib.json, 添加 include: "src/**/*.ts" 包含所有 ts 文件
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "examples/**/*"
  ]
}

您好,我重新 Clone 了我的示例,并按照您的步骤修改后,依然不能自动生成 api,您可以将我的示例修改后提交一个 Pull Requests 吗? 我想看一下您具体做了哪些更改

image

是否与我本地环境的 node (v16.14.0)版本有关

我只修改了 tsconfig.lib.json, 和 node 版本应该没有关系,你是 Windows 操作系统还是 Mac 操作系统?

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "examples/**/*"
  ]
}

我的 Windows 10 系统

我尝试过:
1、删除站点 site, 重新生成;
2、改用 chrome 无痕浏览器;
3、删除 node_modules 重新安装依赖;
4、换一台电脑 node(v16.16.0)

这些方式都无法自动生成 api, 我也不清楚在您本地运行我的示例时是如何可以自动生成 api 的

image

image

确认一下你的操作系统,是不是一个在 Windows 操作系统下的兼容性问题

  1. 你尝试 Clone template 试试,是否可以展示 API
  2. 或者执行一下 DEBUG=docgeni:ng-parser npm run start:docs ,把打印日志发给我,或者你搜索一下 components/button, 看一下日志,成功的话应该可以看到 sourceFiles: 4

image

@shiyuyuanfang

Window 系统无法执行这些命令;在 Mac 上倒是可以执行

你按照 https://stackoverflow.com/questions/9249830/how-can-i-set-node-env-production-on-windows 文档方式设置一下 DEBUG 环境变量为 docgeni:ng-parser, 再执行 npm run start:docs 试试

你按照 https://stackoverflow.com/questions/9249830/how-can-i-set-node-env-production-on-windows 文档方式设置一下 DEBUG 环境变量为 docgeni:ng-parser, 再执行 npm run start:docs 试试

您好,我按照 stackoverflow 这篇文档设置了 NODE_ENV=production 并且添加了 DEBUG=docgeni:ng-parser 的环境变量;
再执行 npm run start:docs 后,好像被没有什么作用;

我建议你们是否可以找一台 Windows 复现这个问题,尝试是否可以在项目中兼容 Window 操作系统,毕竟自动生成 api 文档的 apiMode 设置还是非常重要和优秀的;

image

@shiyuyuanfang 你升级到 2.0.1 版本试试是否修复了!

@shiyuyuanfang 你升级到 2.0.1 版本试试是否修复了!

好的,我稍后试一下,稍后给您回复

升级到 2.0.1后有报错信息如下(apiMode: 'automatic' 时才会报错)
image
image

另外:我在升级到 2.0.1 时发现咱们官网中缺少【升级指南及注意事项】文档

报错好像是 TypeScript 的 Issue ,microsoft/TypeScript#38365 你可以看一下有什么区别,你可以尝试直接访问 https://github.com/docgeni/docgeni-template 项目启动试试是否报错

升级到 2.0.1后有报错信息如下(apiMode: 'automatic' 时才会报错) image image

另外:我在升级到 2.0.1 时发现咱们官网中缺少【升级指南及注意事项】文档

请问解决了吗, 我也遇到类似的问题了

@mmxstar @shiyuyuanfang 你们还有 Debug Failure. False expression. 的错误么?
我这边复现不了,如果可以的话提供一个可以复现的最小化示例,我试试。

@mmxstar @shiyuyuanfang 你们还有 Debug Failure. False expression. 的错误么? 我这边复现不了,如果可以的话提供一个可以复现的最小化示例,我试试。

我现在没有在应用项目中添加docgeni,我是在类库项目中添加的docgeni,在类库项目中添加docgeni是很正常的