Sometimes the structure of Angular projects can become confusing.
After adding tons of components and modules it might be difficult to keep track of what is what.
Compodoc can help you out by generating a much better to read documentation for your project. It can give you a visual and easy to browse overview of all the code in your application and lots of useful features.
How to install:
Compodoc is available by npm. First install it globally:
npm install -g @compodoc/compodoc
Then install it in your project:
npm install --save-dev @compodoc/compodoc
In a next step you have to add a command to your package.json. In the 'scripts' area add the following line:
Hint: in the original documentation at the moment it refers to tsconfig.json which is wrong and would give you an error message.
Finally generate the documentation and open it in the browser:
npm run compodoc
compodoc -s
Open a browser and navigate to http://localhost:8080 to see the documentation.
The documentation shows a navigation that can lead you to all relevant information. The navigation depends on your project and just shows what you have. If you have enumerations, interfaces, classes, services etc. it automatically adds some more sections to the navigation.
In the 'Getting started' section you can see the content of your README.md file. It can also include a license file. More interesting is the 'Overview' which shows the structure of your application visualized as a chart and counts modules and components.
In the section 'Modules' all your modules are listed and can be clicked. From the modules you can navigate directly to the components in the module.
Through the section 'Components' you can also directly navigate to the components.
The component view shows your comments from the sourcecode, the metadata of your component decorator, you can browse the source code, the template and - a really nice feature - you can see a chart of the DOM-Tree.
Another nice functionality in the view of a component, class etc. is that it tells you the line of code where i.e. a method is defined.
When you click the link 'Defined in ... ' you directly navigate to the code and the line is highlighted.
But there are more charts. If your application uses routing it can display the routes in a nice chart. Here is a screenshot from the Compodoc example documentation:
The routes are clickable so that you can navigate directly to the component or module.
How good is my documenation?
Sure it cannot measure that but it can tell you how much code is covered by proper documentation. In the section 'Documentation coverage' you can see where you are missing documentation.
Here is an example of how it should/could be.😇
There are much more features to explore. To see a nice working example just open the example documentation made by Compodoc.
For more detailed information visit the Compodoc website.
After adding tons of components and modules it might be difficult to keep track of what is what.
Compodoc can help you out by generating a much better to read documentation for your project. It can give you a visual and easy to browse overview of all the code in your application and lots of useful features.
How to install:
Compodoc is available by npm. First install it globally:
npm install -g @compodoc/compodoc
Then install it in your project:
npm install --save-dev @compodoc/compodoc
In a next step you have to add a command to your package.json. In the 'scripts' area add the following line:
"compodoc": "./node_modules/.bin/compodoc -p src/tsconfig.app.json"
Hint: in the original documentation at the moment it refers to tsconfig.json which is wrong and would give you an error message.
Finally generate the documentation and open it in the browser:
npm run compodoc
compodoc -s
Open a browser and navigate to http://localhost:8080 to see the documentation.
The documentation shows a navigation that can lead you to all relevant information. The navigation depends on your project and just shows what you have. If you have enumerations, interfaces, classes, services etc. it automatically adds some more sections to the navigation.
In the 'Getting started' section you can see the content of your README.md file. It can also include a license file. More interesting is the 'Overview' which shows the structure of your application visualized as a chart and counts modules and components.
In the section 'Modules' all your modules are listed and can be clicked. From the modules you can navigate directly to the components in the module.
Through the section 'Components' you can also directly navigate to the components.
But there are more charts. If your application uses routing it can display the routes in a nice chart. Here is a screenshot from the Compodoc example documentation:
How good is my documenation?
Sure it cannot measure that but it can tell you how much code is covered by proper documentation. In the section 'Documentation coverage' you can see where you are missing documentation.
Here is an example of how it should/could be.😇
For more detailed information visit the Compodoc website.
Comments
Post a Comment