Compodoc: [BUG] Routes documentation is not generated

[x1unix]

Routes doc section is not generated

Operating System, Node.js, npm, compodoc version(s)

1.0.0-beta.13

Node.js version : v6.10.2

Operating system : macOS Sierra

Angular configuration, a package.json file in the root folder

{
  "name": "...",
  "version": "2.0.0-beta.3",
  "license": "MIT",
  "private": true,
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 8080",
    "start:aot": "ng serve --aot --port 8080",
    "build:prod": "ng build --prod --env=prod --aot",
    "build:dev": "ng build --dev --env=dev --aot",
    "build": "npm run build:prod"
    "test": "ng test --single-run",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "doc": "npm run doc:serve",
    "doc:generate": "compodoc -p ./tsconfig.json",
    "doc:serve": "compodoc -s -r 8090",
    "doc:watch": "compodoc -p ./tsconfig.json -w -s -r 8090"
  },
  "dependencies": {
    "@angular/common": "^4.0.1",
    "@angular/compiler": "^4.0.1",
    "@angular/core": "^4.0.1",
    "@angular/forms": "^4.0.1",
    "@angular/http": "^4.0.1",
    "@angular/platform-browser": "^4.0.1",
    "@angular/platform-browser-dynamic": "^4.0.1",
    "@angular/router": "^4.0.1",
    "@compodoc/compodoc": "^1.0.0-beta.13",
    "core-js": "^2.4.1",
    "es6-shim": "^0.35.3",
    "fuse-js-latest": "^2.6.2",
    "jquery": "^3.2.1",
    "karma-phantomjs-launcher": "^1.0.4",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "ng2-toasty": "^2.5.0",
    "ng2-validation": "^4.2.0",
    "ngx-bootstrap": "next",
    "node-sass": "^4.5.3",
    "normalize-url": "^1.9.1",
    "phantomjs-prebuilt": "^2.1.14",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.0.1",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@angular/cli": "1.0.3",
    "@angular/compiler-cli": "^4.0.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

Project files:

app.routing.ts

import { RouterModule, Routes } from '@angular/router';

import { AuthComponent } from './auth/auth.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const APP_ROUTES: Routes = [
  {
    path: '',
    component: ContainerComponent,
    canActivate: [LoggedInGuard],
    children: [
      {
        path: 'dashboard',
        component: DashboardComponent,
        data: {
          title: 'Dashboard'
        }
      }
    ]
  },
  {
    path: 'auth',
    component: AuthComponent,
    data: {
      title: 'Authorization'
    }
  },
  {
    path: '**',
    redirectTo: '/dashboard'
  }
];

export const routing = RouterModule.forRoot(APP_ROUTES);

app.module.ts

import { NgModule, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

// Dashboard
import { DashboardComponent } from './dashboard/dashboard.component';
import { VectorMapComponent } from './dashboard/vector-map/vector-map.component';

// App modules
import { AuthModule } from './auth';
import { ContainerModule } from './container/container.module';

import { routing } from './app.routing';


@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    routing, // routing
    ReactiveFormsModule,
    AuthModule,
    ContainerModule
  ],
  declarations: [
    AppComponent,
    VectorMapComponent,
    DashboardComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(public appRef: ApplicationRef) {}
}

Compodoc installed globally or locally ?

Localy

Motivation for or Use Case

Reproduce the error

Steps

• Create a new project via ng cli
• Use app module and routing file from example above
• Generate documentation

Expected

• Routes section generated and presented

Got

• No section available - Screenshot

Notes:
Also I've tried to call RouterModule.forRoot(APP_ROUTES) in app.module.ts file but still had the same behavior

Related issues

Suggest a Fix

[vogloblinsky]

@odin3
Store your routes in app.routing in a module :

__app.routing.ts__

//export const routing = RouterModule.forRoot(APP_ROUTES); -> REMOVE THAT

@NgModule({
  imports: [RouterModule.forRoot(APP_ROUTES)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

__app.module.ts__

//import { routing } from './app.routing';
import { AppRoutingModule } from './app.routing';

...
    FormsModule,
    AppRoutingModule, // routing
    ReactiveFormsModule
...

I didn't close the issue because, the routing parsing algorithm should support your syntax even this is not a good practice -> https://angular.io/guide/styleguide#style-02-12.

[x1unix]

@vogloblinsky, thank you for the reply. Does Compodoc support routes in sub-modules?

[vogloblinsky]

Yes, watch the demo project : https://compodoc.github.io/compodoc-demo-todomvc-angular/routes.html
and the sources : https://github.com/compodoc/compodoc-demo-todomvc-angular

[x1unix]

@vogloblinsky, fixed code as you said but still no Routes section

app.routing.ts

const APP_ROUTES: Routes = [
 // ...
];

@NgModule({
  imports: [RouterModule.forRoot(APP_ROUTES)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

app.module.ts

import { AppRoutingModule } from './app.routing';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    AppRoutingModule,
...
  ],
  declarations: [
...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(public appRef: ApplicationRef) {}
}

[vogloblinsky]

Is there just AuthModule and ContainerModule with AppRoutingModule in your AppModule imports ?
Switch to the gitter channel if you want more reactive feedbacks.
https://gitter.im/compodoc/compodoc

[x1unix]

@vogloblinsky, switched to gitter chat

[x1unix]

@vogloblinsky, no. there are 13 modules (11 of them are app's sub-modules)

[NeoMorfeo]

In my case, i have tryed this with:

app-routing.module.ts

const APP_ROUTES: Routes = [
 // ...
];

@NgModule({
  imports: [RouterModule.forRoot(APP_ROUTES, { useHash: false, preloadingStrategy: NoPreloading })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

but does not work, only works "a litle" if i change the impor to:
imports: [RouterModule.forRoot(APP_ROUTES)],
without any params, anyway, it only generate the page, but with an empty route map.

[vogloblinsky]

@NeoMorfeo thanks for the information, i will test your case when i will start working on that as soon as possible.

[vogloblinsky]

@x1unix any news on your side ?
@NeoMorfeo is it working for you too ?

[x1unix]

@vogloblinsky, currently using v1.0.1 - still have the same issue. I'll try to update to the latest version and let you know

[vogloblinsky]

Bug fixed for dynamic path and pathMatch for route definition.
Need to work on other parts of route description : angular.io/api/router/Routes#description

[x1unix]

@vogloblinsky, tried to generate doc with compodoc v1.0.4. Still no routes, but also got an error - https://pastebin.com/1smaxvfa.

Last parsed file before an error: [21:04:07] parsing : D:/Code/webapp/src/app/shared/helpers/resource-status.ts - file source

[vogloblinsky]

@x1unix your bug is fixed, https://github.com/compodoc/compodoc/issues/385, related to empty description for accessors

[ClintonRoy28]

I faced the same issue. Following method worked for me.

In your app.routing.ts file, my routing was as follows...

export const ROUTING: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);

And i was exporting ROUTING into my app.module.ts.

I replaced the my routing method as follows and exported AppRoutingModule into app.module.ts.

**@NgModule({
imports: [RouterModule.forRoot(APP_ROUTES)],
exports: [RouterModule]
})

export class AppRoutingModule {}**

I was able to display routing tree for my app after this. Hope this works! Thanks:)

[wkjesus]

I have the same issue this is my app.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Import Containers
import { FullLayoutComponent, SimpleLayoutComponent } from './containers';
import { AuthGuard } from 'app/guards/Auth.guard';

export const APP_ROUTES: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    canActivate: [AuthGuard],
    path: '',
    component: FullLayoutComponent,
    data: {
      title: 'Home',
    },
    children: [
      {
        path: 'talleres',
        data: {
          title: 'Talleres',
        },
        loadChildren: './modules/taller/taller.module#TallerModule',
      },
      {
        path: 'dashboard',
        loadChildren: './modules/dashboard/dashboard.module#DashboardModule',
      },
    ],
  },
  {
    path: 'login',
    component: SimpleLayoutComponent,
    data: {
      title: 'Login',
    },
    children: [
      {
        path: '',
        loadChildren: './modules/login/login.module#LoginModule',
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forRoot(APP_ROUTES, { useHash: true })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Still not render the route options in the documentation. pls help!

[x1unix]

@vogloblinsky issue appears again. Opened new issue - https://github.com/compodoc/compodoc/issues/607

[lock[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem. Why locking ? Having issues with the most up-to-date context.