Compodoc is a comprehensive documentation generation tool specifically designed for Angular applications. It automatically analyzes Angular TypeScript codebases to generate clean, searchable, and navigable documentation websites with features including automatic API documentation extraction, dependency graphs, component relationship visualization, JSDoc support, and coverage reporting.
npm install --save-dev @compodoc/compodocimport { Application, CliApplication } from "@compodoc/compodoc";For CommonJS:
const { Application, CliApplication } = require("@compodoc/compodoc");# Generate documentation from tsconfig.json
compodoc -p tsconfig.json -d documentation
# Generate and serve documentation
compodoc -p tsconfig.json -d documentation -s
# Watch for changes during development
compodoc -p tsconfig.json -d documentation -s -wimport { Application } from "@compodoc/compodoc";
// Create application instance
const app = new Application({
tsconfig: "./tsconfig.json",
output: "./documentation",
theme: "gitbook",
serve: false
});
// Generate documentation
app.generate().then(() => {
console.log("Documentation generated successfully");
});Compodoc is built around several key architectural components:
Application and CliApplication classes that orchestrate the documentation generation processMain application classes for programmatic and CLI usage, providing the foundation for documentation generation.
class Application {
constructor(options?: Object);
// Core generation methods
protected generate(): Promise<{}>;
protected testCoverage(): void;
// File management
setFiles(files: Array<string>): void;
setUpdatedFiles(files: Array<string>): void;
clearUpdatedFiles(): void;
// Utility methods
hasWatchedFilesTSFiles(): boolean;
hasWatchedFilesRootMarkdownFiles(): boolean;
runWebServer(folder: string): void;
runWatch(): void;
}
class CliApplication extends Application {
protected start(): any;
}Comprehensive configuration management with extensive customization options for documentation generation.
class Configuration {
static getInstance(): Configuration;
get mainData(): MainDataInterface;
get pages(): PageInterface[];
addPage(page: PageInterface): void;
addAdditionalPage(page: PageInterface): void;
hasPage(name: string): boolean;
resetPages(): void;
resetAdditionalPages(): void;
resetRootMarkdownPages(): void;
}Advanced dependency analysis system for extracting Angular and TypeScript API information.
class DependenciesEngine {
// Instance properties
modules: Object[];
components: Object[];
directives: Object[];
injectables: Object[];
guards: Object[];
pipes: Object[];
classes: Object[];
interfaces: Object[];
routes: RouteInterface;
miscellaneous: MiscellaneousData;
// Singleton access
static getInstance(): DependenciesEngine;
// Initialization and updates
init(data: ParsedData): void;
update(data: ParsedData): void;
// Data access methods
getModules(): Object[];
getComponents(): Object[];
getDirectives(): Object[];
getInjectables(): Object[];
getGuards(): Object[];
getPipes(): Object[];
getClasses(): Object[];
getInterfaces(): Object[];
getRoutes(): RouteInterface;
getMiscellaneous(): MiscellaneousData;
getRawModule(name: string): Object;
}HTML generation and template processing system for creating documentation websites.
class HtmlEngine {
static getInstance(): HtmlEngine;
init(templatePath: string): Promise<void>;
render(mainData: any, page: any): string;
}Search indexing and functionality for documentation websites.
class SearchEngine {
static getInstance(): SearchEngine;
indexPage(page: any): void;
generateSearchIndexJson(outputFolder: string): Promise<any>;
}File system operations and utilities for reading and writing documentation files.
class FileEngine {
static getInstance(): FileEngine;
get(filepath: string): Promise<string>;
getSync(filepath: string): string;
write(filepath: string, contents: string): Promise<void>;
writeSync(filepath: string, contents: string): void;
existsSync(filepath: string): boolean;
}Export functionality for different output formats (HTML, JSON).
class ExportEngine {
static getInstance(): ExportEngine;
export(outputFolder: string, data: any): Promise<any>;
}Comprehensive command-line interface with extensive configuration options.
interface CLIOptions {
// Basic options
tsconfig?: string;
output?: string;
name?: string;
serve?: boolean;
watch?: boolean;
port?: number;
// Theming & styling
theme?: string;
extTheme?: string;
customFavicon?: string;
customLogo?: string;
// Content control
includes?: string;
templates?: string;
assetsFolder?: string;
// Feature toggles
disableGraph?: boolean;
disableCoverage?: boolean;
disableSourceCode?: boolean;
disablePrivate?: boolean;
disableProtected?: boolean;
// Coverage testing
coverageTest?: number;
coverageMinimumPerFile?: number;
unitTestCoverage?: string;
// Export options
exportFormat?: "html" | "json";
// Language
language?: string;
}interface MainDataInterface {
output: string;
theme: string;
serve: boolean;
port: number;
open: boolean;
assetsFolder: string;
documentationMainName: string;
documentationMainDescription: string;
modules: any[];
components: any[];
directives: any[];
injectables: any[];
guards: any[];
pipes: any[];
classes: any[];
interfaces: any[];
routes: any[];
tsconfig: string;
watch: boolean;
coverageTest: boolean;
coverageTestThreshold: number;
exportFormat: string;
language: string;
// ... additional configuration properties
}
interface PageInterface {
name: string;
id: string;
context: string;
depth: number;
pageType: string;
path?: string;
filename?: string;
// ... additional page properties
}
interface ConfigurationInterface {
mainData: MainDataInterface;
pages: PageInterface[];
addPage(page: PageInterface): void;
addAdditionalPage(page: PageInterface): void;
hasPage(name: string): boolean;
resetPages(): void;
resetAdditionalPages(): void;
resetRootMarkdownPages(): void;
}
interface RouteInterface {
children: any[];
// Route structure details
}
interface MiscellaneousData {
variables: any[];
functions: any[];
typealiases: any[];
enumerations: any[];
groupedVariables: any[];
groupedFunctions: any[];
groupedEnumerations: any[];
groupedTypeAliases: any[];
}
interface CoverageData {
count: number;
status: string;
files: any[];
}