Introducing Angular Explorer for VS Code

We are excited to announce our revamped AngularDoc extension for Visual Studio Code.

AngularDoc for Visual Studio Code - Visual Studio Marketplace

I’d like to highlight the following two new features:

• “Angular” view that has an Application Explorer for browsing the Angular application’s modules and components, and Outline panel to help you navigate the top level constructs in the TypeScript source file.
• Invoking schematics commands from the explorer’s context menu.

Angular View

To use the Angular view, click the “Angular” icon in the Activity bar on the far left-hand side. You will see the Application Explorer on the top left and Outline on the bottom left.

It may take a few seconds for the project to be analyzed and the modules to show up in Application Explorer. Click on a module to expand it and reveal its components. Select an element in Application Explorer and the corresponding source file will be previewed in the editor. The Outline view will display the top level constructs found in the source file. Clicking on an element will reveal the text segment in the editor.

Schematics Context Menu

Schematics are command-line tools that can create new components or update the existing source code. In Angular 6, you can run “ng add” and “ng update” commands to install or update the libraries. Behind the scenes, the scaffolding and upgrading scripts are all schematics that the libraries have implemented. The following are the known libraries and we can expect that more and more libraries will join this list:

• @schematics/angular (i.e. the default angular-cli commands)
• @ngrx/schematics
• @angular/pwa
• @ng-bootstrap/schematics
• @angular/material
• @clr/angular
• @angular/elements

While these code generation scripts can save us a lot of typing, it’s increasingly a challenge to memorize all the available commands in a schematic and what they do. That’s why we have implemented the schematics context menu so that there’s no more guess work.

In Application Explorer, right click on a module and you will see the “Schematics” context menu:

Schematics context menu on a module

Select the “Schematics” menu, and the input box will let you choose from the list of available schematics:

List of available schematics

Let’s select “@schematics/angular”. You’ll see all the familiar angular-cli commands:

List of schematic commands

Let’s go ahead and select “component”, and then enter the name “contact”. You’ll see a new component “ContactComponent” under “AboutModule” in a few seconds:

AngularDoc extension will automatically discover the known schematics that have been installed in your project. If you have a custom schematic, you need to tell AngularDoc about it so that we can look for it in your project. Just open the user settings and add “angulardoc.schematics”:

Custom schematics in user settings

Hope you’ll find AngularDoc extension helpful. Please leave a review if you like it. Follow us on Twitter @angulardocio to be notified of the future updates.

Update [2018–06–17]

You can now see the schematics commands and their outputs in the “AngularDoc” Output channel. In addition, the input box of the schematics command takes not just the name but also optionally arguments. For example, this is what you’ll get after you enter the command input

team --inline-template

Schematics command output