[FEATURE] class extends class extends another class, I cannot see the properties of the 3rd class when I am viewing the first class

[SDAdham]

Overview of the feature

In angular, I have class extends class extends another class, I cannot see the properties of the 3rd class when I am viewing the first class, I can only see the properties defined in the second class in the first class

Motivation for or Use Case

Complete the feature? :D

class A extends B {
   aVar: any;
}

class B extends C {
   bVar: any;
}

class C {
  cVar: any;
}

when viewing the doc for class A, I'd see aVar and bVar but no cVar. This issue is also for methods, etc...

Related issues

[vogloblinsky]

Works fine for me with development version, i will release 1.1.16 in a few minutes, may be it will works.

[vogloblinsky]

1.1.16 released, could you do a test ?

[SDAdham]

I tested it but it's still a no, it only includes 1 level of inheritance

[SDAdham]

Can you please reopen this issue as it's not resolved yet @vogloblinsky

[vogloblinsky]

@SDAdham Could you generate a sample project with Angular CLI and add your use-case in it, and push it on Github.

When i used your code in https://github.com/compodoc/compodoc-demo-todomvc-angular, i have this result :

[SDAdham]

Hi @vogloblinsky , then this means that there is a bug gets triggered when I use compodoc with my project. Hmm

[SDAdham]

I cannot replicate the project as it's honestly huge, but I'll dedicate some time on this later today or tomorrow to see if I can find anything interesting from the logs

[vogloblinsky]

Ok thanks

[SDAdham]

Sorry for taking long, I don't know if there is a certain debug flag I can use to show more logs, but here is all of the errors i found:

Routes parsing error, maybe a trailing comma or an external variable, trying to fix that later after sources scanning.

Here is how the file referenced content looked like:

const routes: Routes = [
  {
    path: '',
    canActivate: [SomeService],
    data: {
      somVar: [someVal],
    },
    children: [
      {
        path: 'somePath',
        component: Some2Component,
      },
      {
        path: '',
        component: SomeComponent,
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class SomeModuleRoutesModule {}

There are several errors similar to above in many other routes files, but I don't think that this could be related, but nothing else.

This is how I run it:

compodoc -p path/to/tsconfig.json -c path/to/.compodocrc.json

The compodocrc.json is as following:

{
  "$schema": "path/to/node_modules/@compodoc/compodoc/src/config/schema.json",
  "name": "<App Name>",
  "output": "<output>"
}

[SDAdham]

I cannot find a way of debug:

yarn compodoc:help
yarn run v1.22.11
$ compodoc -h
Usage: index-cli <src> [options]

Options:
  -V, --version                             output the version number
  -c, --config [config]                     A configuration file : .compodocrc, .compodocrc.json, .compodocrc.yaml or compodoc property in package.json
  -p, --tsconfig [config]                   A tsconfig.json file
  -d, --output [folder]                     Where to store the generated documentation (default: "./documentation/")
  -y, --extTheme [file]                     External styling theme file
  -n, --name [name]                         Title documentation (default: "Application documentation")
  -a, --assetsFolder [folder]               External assets folder to copy in generated documentation folder
  -o, --open [value]                        Open the generated documentation
  -t, --silent                              In silent mode, log messages aren't logged in the console (default: false)
  -s, --serve                               Serve generated documentation (default http://localhost:8080/) (default: false)
  --host [host]                             Change default host address
  -r, --port [port]                         Change default serving port (default: 8080)
  -w, --watch                               Watch source files after serve and force documentation rebuild (default: false)
  -e, --exportFormat [format]               Export in specified format (json, html) (default: "html")
  --files [files]                           Files provided by external tool, used for coverage test
  --language [language]                     Language used for the generated documentation (de-DE, en-US, es-ES, fr-FR, hu-HU, it-IT, ja-JP, ko-KR, nl-NL, pl-PL, pt-BR, sk-SK, zh-CN,
                                            zh-TW) (default: "en-US")
  --theme [theme]                           Choose one of available themes, default is 'gitbook' (laravel, original, material, postmark, readthedocs, stripe, vagrant)
  --hideGenerator                           Do not print the Compodoc link at the bottom of the page (default: false)
  --hideDarkModeToggle                      Do not show dark mode toggle button at the top right position of the page (default: false)
  --toggleMenuItems <items>                 Close by default items in the menu values : ['all'] or one of these
                                            ['modules','components','directives','controllers','classes','injectables','guards','interfaces','interceptors','pipes','miscellaneous','additi
onalPages']
                                            (default: ["all"])
  --navTabConfig <tab configs>              List navigation tab objects in the desired order with two string properties ("id" and "label"). Double-quotes must be escaped with '\'.
                                            Available tab IDs are "info", "readme", "source", "templateData", "styleData", "tree", and "example". Note: Certain tabs will only be shown if
                                            applicable to a given dependency (default: "[]")
  --templates [folder]                      Path to directory of Handlebars templates to override built-in templates
  --includes [path]                         Path of external markdown files to include
  --includesName [name]                     Name of item menu of externals markdown files (default: "Additional documentation")
  --coverageTest [threshold]                Test command of documentation coverage with a threshold (default 70)
  --coverageMinimumPerFile [minimum]        Test command of documentation coverage per file with a minimum (default 0)
  --coverageTestThresholdFail [true|false]  Test command of documentation coverage (global or per file) will fail with error or just warn user (true: error, false: warn) (default: true)
  --coverageTestShowOnlyFailed              Display only failed files for a coverage test
  --unitTestCoverage [json-summary]         To include unit test coverage, specify istanbul JSON coverage summary file
  --disableSourceCode                       Do not add source code tab and links to source code (default: false)
  --disableDomTree                          Do not add dom tree tab (default: false)
  --disableTemplateTab                      Do not add template tab (default: false)
  --disableStyleTab                         Do not add style tab (default: false)
  --disableGraph                            Do not add the dependency graph (default: false)
  --disableCoverage                         Do not add the documentation coverage report (default: false)
  --disablePrivate                          Do not show private in generated documentation (default: false)
  --disableProtected                        Do not show protected in generated documentation (default: false)
  --disableInternal                         Do not show @internal in generated documentation (default: false)
  --disableLifeCycleHooks                   Do not show Angular lifecycle hooks in generated documentation (default: false)
  --disableRoutesGraph                      Do not add the routes graph (default: false)
  --disableSearch                           Do not add the search input (default: false)
  --disableDependencies                     Do not add the dependencies list (default: false)
  --minimal                                 Minimal mode with only documentation. No search, no graph, no coverage. (default: false)
  --customFavicon [path]                    Use a custom favicon
  --customLogo [path]                       Use a custom logo
  --gaID [id]                               Google Analytics tracking ID
  --gaSite [site]                           Google Analytics site name (default: "auto")
  --maxSearchResults [maxSearchResults]     Max search results on the results page. To show all results, set to 0 (default: 15)
  -h, --help                                display help for command

Version:

1.1.16

TypeScript version used by Compodoc : 4.5.2

TypeScript version of current project : 4.3.5

Node.js version : v14.17.6

Operating system : Windows 10

I'm on Windows 11 though but it doesn't matter, the issue happens on both W11 and during CI.

[SDAdham]

I tried serve option but it's no different.

[vogloblinsky]

Ok i will. try to check if the routing parsing error, raise an exception and generate a problem with the link between the three classes.

[SDAdham]

I just checked, we have this is working just fine with services but not components. But for services, i do not see the inherited variables, only methods.

[vogloblinsky]

Sorry, i cannot reproduce your context.

[philippjenni]

I have the same issue in my project with release 1.1.14 and 1.1.18. I will try to fix the problem and make a PR.

[SDAdham]

thanks @philippjenni , that'll be great :) :)

[philippjenni]

I have fixed the issue in the branch https://github.com/philippjenni/compodoc/tree/hotfix/1140-property-inheritance

@SDAdham can you validate if the bug is fixed for you too?

[vogloblinsky]

@philippjenni Do you have a use-case for reproducing the bug ?

[vogloblinsky]

Ok fixed, thanks @philippjenni for your contribution

[philippjenni]

@vogloblinsky Yes, like this ...

@Component({
  selector: 'ng-checkbox,ngCheckbox',
  template: '<div>My Markup</div>',
})
export class NgCheckboxComponent extends NgCheckboxCommon {
  @Input()
  aVar: any;
}

@Directive()
export class NgCheckboxCommon extends NgBaseModelControl {
  @Input()
  bVar: any;
}

@Directive()
export class NgBaseModelControl {
  @Input()
  cVar: any;
}

The problem is that DirectiveDepFactory doesn't check the extends property so only properties from NgCheckboxCommon will be visible in the documentation. Properites from NgBaseModelControl are ignored. I have extend the DirectiveDepFactory class and update the template and the ExtendsMerger. If @SDAdham can confirm that the fix also works for him, I will create a PR.

[SDAdham]

Absolutely, what version do I install to test this? I tried following this https://stackoverflow.com/questions/39732397/install-specific-branch-from-github-using-npm/50734317 but none of the commands helped. I get this error:

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module '../dist/index-cli.js'

package.json: "@compodoc/compodoc": "github:philippjenni/compodoc#hotfix/1140-property-inheritance",

Here is my trials:

  940  yarn add -D philippjenni/compodoc#hotfix/1140-property-inheritance
  941  yarn add -D "https://github.com/philippjenni/compodoc/tree/hotfix/1140-property-inheritance"
  942  yarn add -D "https://github.com/philippjenni/compodoc.git#hotfix/1140-property-inheritance"
  943  yarn add -D "https://github.com/philippjenni/compodoc/tree/hotfix/1140-property-inheritance"
  944  yarn add -D "https://github.com/philippjenni/compodoc.git#hotfix/1140-property-inheritance"
  945  yarn add -D "github:philippjenni/compodoc.git#hotfix/1140-property-inheritance"
  946  yarn add -D "github:philippjenni/compodoc#hotfix/1140-property-inheritance"
  947  yarn add -D "@compodoc/compodoc@philippjenni/compodoc#hotfix/1140-property-inheritance"
  948  yarn compodoc
  949  yarn add -D "@compodoc/compodoc@github:philippjenni/compodoc#hotfix/1140-property-inheritance"
  950  yarn compodoc
  951  yarn add -D "@compodoc/compodoc@git@github.com:philippjenni/compodoc.git#hotfix/1140-property-inheritance"
  952  yarn compodoc
  953  yarn add -D "git@github.com:philippjenni/compodoc.git#hotfix/1140-property-inheritance"

Neither https://stackoverflow.com/questions/43411864/how-to-install-package-from-github-repo-in-yarn helps :S

[philippjenni]

Try checkout my branch with git and run follow command like this https://github.com/compodoc/compodoc/blob/master/CONTRIBUTING.md#development-process

The follow commands should work:

open one terminal and run inside compodoc folder : npm i and npm run start open another terminal with the source code of the your project, and run node ../compodoc/bin/index-cli.js [Your Parameter] as Example node ../compodoc/bin/index-cli.js -c mycompodoc.conf

[SDAdham]

I cloned your project, then checked out your branch, then i ran npm i then npm run start, then I am getting a huge list of errors: Is there a slack or discord that compodoc use?

[SDAdham]

I even tried to ignore the error and open the second terminal and run the second command, it achieved no luck. It finished, and the other terminal is sitll hanging on the errors

[SDAdham]

Ok, I opened the generated HTML pages manually and I can verify that you are awesome by the look of it. I checked few pages and it seems that I can see the inherited classes. Let me check NestJS project as well.

[vogloblinsky]

@SDAdham just tried that :

• npm i -D https://github.com/compodoc/compodoc
• run your compodoc command

[SDAdham]

It's alright, I am already going through the docs as we speak. Luckily HTML files works awesome on their own without a server. Well done! It works perfectly in Angular!

[SDAdham]

For NestJS project:

• I cannot see the extended classes for controllers.
• For services, I do can see the extended classes but I cannot see their extended extended classes, it's only 1 level it seems

---

I am assuming your fix doesn't include nestjs, right?

[vogloblinsky]

Give me some code example please to see where i miss to process inheritance for Nestjs use-cases please

[SDAdham]

Ok, give me a moment pls, let me try to find a template for nestjs and try to reproduce it for you.

[vogloblinsky]

Thanks

[SDAdham]

@vogloblinsky i did an example code, but I couldn't run compodoc, please see https://github.com/SDAdham/typescript-starter

to start, npm i and then npm run start and http://localhost:3000/api/ to see swagger and npm run compodoc

[SDAdham]

I added you as collaborator

[vogloblinsky]

Ok, i can see the issue for controllers. I will fix it. For services, everything seems to be ok for me. What's wrong ?

[SDAdham]

Nothing is wrong, I just added it just in case you broke something :D :innocent:

Huge thanks @vogloblinsky ! :+1:

[vogloblinsky]

Ok fixed, re-tried that in your Nestjs project :

• npm i -D https://github.com/compodoc/compodoc
• run your compodoc command

[SDAdham]

Nice, many thanks @vogloblinsky & @philippjenni . You guys are honestly awesome. Can you please create the PR and release? :+1:

Just because of this missing feature, we were not able to really look at the docs. It was useless for us and bit deceiving. I'm assuming with your fix, this will change in the upcoming future.

[SDAdham]

Can you please let me know once it's released so that I can update my package.json at my side?

[SDAdham]

@vogloblinsky this issue has been opened since Oct 31, 2021, it's been 4 months, any chance that you can please release the fix?

[maitrungduc1410]

facing same issue when extending my component from a class

[cybercoder]

The coverage shown 0%