There are 134 operators the last time I counted, grouped in 10 categories such as Creation Operators, Transformation Operators, etc. Some of them are more commonly used and/or better understood than the others, and very few people can claim they know when to use which operators all the time.

Luckily there is a utility called “RxJS Operator Decision Tree” that helps you identify the right operator to use. Wouldn’t it be great, though, if this tool is available in VS Code?

Brandon 👨🏿‍💻✍🏿🏀 on Twitter

Someone with more time should make the RxJS operator decision tree a VSCode extension. Thanks in advance ;-)

We took up Brandon’s challenge and here’s what we came up with:

This feature is available in v1.2.0 of Copilot extension. It’s launched from the command palette (cmd-shift-p). Please try it and let us know your experience. Please also send us your feature request; It might just get implemented like this!

To install Copilot extension in Visual Studio Code, launch the command palette (cmd-shift-p), select Install Extension and enter Copilot.

To use Copilot view, click the “Copilot” icon in the Activity bar on the far left-hand side. It may take a few seconds for the project to be analyzed and the items to show up in the Application Explorer and State Management Explorer. Click on an element in the tree view and the corresponding file will be previewed in the editor.

The “State Management Explorer” view and diagrams let you browse the NgRx/Redux/Vuex constructs such as stores, states, reducers, selectors, and effects, etc. They are advanced features that are enabled for projects using AngularDoc Team Services on https://angulardoc.io, and open source projects that have set up the free service on https://angulardoc.org.

Copilot also provides a nice UI for the Angular schematics commands. Move the cursor over a module in Application Explorer, and select the inline icon “Schematics”. You will then be asked to pick the schematics type and enter the entity type/name in the input box. Press “Enter” to confirm. The following schematics are supported by default (and you can add your own schematics to the list in the User Settings):

• @schematics/angular
• @ngrx/schematics
• @angular/pwa
• @ng-bootstrap/schematics
• @angular/material
• @clr/angular
• @angular/elements

Note: Only the schematics that have been installed in the project will be available to pick.

For more information on our product suite, please visit our web site. Follow us on Twitter @angulardocio to receive updates. Last but not the least, please leave a review if you like this extension!

Introducing Copilot for VS Code was originally published in AngularDoc on Medium, where people are continuing the conversation by highlighting and responding to this story.

For more than two years, AngularDoc has provided code analysis for AngularJS/Angular projects. In this new release, we have added support for two more web application frameworks — React and Vue.

The detailed feature set of AngularDoc Team Services can be seen at https://angulardoc.io. We’d like to highlight below a key new addition— the state management diagrams.

State management diagrams for NgRx, Redux, and Vuex

State management libraries such as Redux, NgRx, and Vuex, have been widely used in the web applications. Although there may be differences in certain constructs and terminologies among the libraries, the core architecture is similar: there is a central store that is the single source of truth for the state, and decoupled components that focus on a single task for each, such as dispatching the actions, mutating the state, and displaying a slice of the state. While the benefit of such design is obvious, a common complaint of these libraries is their verbosity — the code that is exercised throughout an action’s life cycle is scattered in multiple modules, and it’s not trivial to piece together all these in one mental picture.

Our state management diagrams (Redux, NgRx, Vuex) are specifically designed to put the entire state management structure right in front of your eyes. You can trace how the actions flow through the system: from the component that dispatches an action, to the reducer/mutation that alters the state upon receiving the action, and finally to the component that displays the new state. Better yet, you can click on an item in the diagram and the corresponding code snippet will be highlighted in a text editor.

This is especially valuable for developers who work on large projects to quickly come up to speed with your store’s implementations. It is also a great visual aid to developers who are learning to use NgRx/Redux/Vuex. In addition, you can capture the diagram in SVG and embed the downloaded file in your documentation.

What’s next

You can head to our demo site, https://angulardoc-showcases.angulardoc.org/, where we have a collection of sample repositories for Angular, React, and Vue to let you experience what AngularDoc Team Service has to offer.

AngularDoc Team Service is currently available to GitHub repositories. You can use the service in two ways:

1. AngularDoc Team Service is provided to open source projects for free on https://angulardoc.org.
2. Our SaaS service for closed source projects is hosted on https://angulardoc.io. The annual subscription costs USD $99.

In both cases, signing up is a quick three-step process:

1. Log in using your GitHub credential, and authorize AngularDoc to access your repository;
2. Set up a subdomain for your account (<myorg>.angulardoc.io) in a single click;
3. Pick which repository to use AngularDoc Team Service for.

Then just leave the rest to us — we will automatically analyze your source code and its commit history, and the future commits will be automatically synced through our webhook. Within a few minutes, your team can enjoy a rich set of live diagrams that provide insights into your application’s structure that you have never seen before.

Please don’t hesitate to contact us if you have any questions or comments.

Introducing AngularDoc Team Services was originally published in AngularDoc on Medium, where people are continuing the conversation by highlighting and responding to this story.

We are pleased to announce our holiday gift for open source Angular projects: You can now set up your own subdomain on AngularDoc.org.

What is AngularDoc.org

AngularDoc.org is a registry of open source Angular projects. Using AngularDoc’s static analysis engine, we processed almost 9000 Angular related public repositories on GitHub, and made them searchable and browse-able on AngularDoc.org.

After you log in AngularDoc.org using your GitHub account, you will be able to bookmark and/or rate the repositories. Most importantly, you can navigate to “My Organizations” and click on “Claim Domain” to set up your own subdomain (you’ll need to be the owner of the organization to do so):

Once you have your subdomain, you can click on the “View” button to navigate to the new URL “<organization>.angulardoc.org” (e.g. “https://angulardoc-showcases.angulardoc.org” for our demo organization “AngularDoc-Showcases”). All your public repositories will be listed there, and you can “deploy” the Angular repositories, i.e. have AngularDoc analyze them and show you the results.

What can you do with the subdomain

First of all, it’s cool to have your own subdomain, don’t you think? However, that’s far from the only benefit. By authorizing AngularDoc.org to access and add a webhook to your repository, you can ensure that the architectural information that you see on the subdomain will always be in sync with your commits.

Here are a few important features that are available:

Angular component timeline: You get to step through the commits and tags of your repo and see how the Angular components evolved. You can also click on the “Screenshot” button to capture the information for the selected commit or tag.

Commit history: You can view the commits by the committers and the time span.

Component history: You can view the commit history by the components instead of the committers. You can filter the history by the committer name, component name, and time span.

NgRx explorer: We can identify the NgRx artifacts, such as the stores, reducers, actions, selectors, and effects, in your project if there are any, and show them to you in nice visualizations.

To summarize, we hope that these features on the subdomains are helpful for you and your team. Best of all, they are freely available for all public repositories, and I strongly encourage you to set up yours and let us know your experience. We are planning to roll out an equivalent SaaS service for the private repositories shortly. Please follow us on Twitter @angulardocio to be notified of the releases and updates.

AngularDoc.org — Establishing Your Team’s Subdomain was originally published in AngularDoc on Medium, where people are continuing the conversation by highlighting and responding to this story.

NgRx is a state management library for Angular applications. Inspired by Redux and backed by RxJs, NgRx has become a top library for large scale Angular projects.

The new NgRx Explorer in AngularDoc extension allows you to browse and navigate the building blocks of NgRx, such as the stores, reducers, actions, selectors, and effects, in your application. To use it, just click on the “Angular” icon in the Activity bar on the far left-hand side. You will see the NgRx Explorer below the Angular Explorer. Select an element in NgRx Explorer and the corresponding source code snippet will be previewed in the editor.

Hope you’ll find NgRx Explorer helpful in your Angular development. Please leave a review if you like it. Follow us on Twitter @angulardocio to be notified of the future updates.

Introducing NgRx Explorer for VS Code was originally published in AngularDoc on Medium, where people are continuing the conversation by highlighting and responding to this story.

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:

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

Let’s select “@schematics/angular”. You’ll see all the familiar angular-cli 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”:

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

Introducing Angular Explorer for VS Code was originally published in AngularDoc on Medium, where people are continuing the conversation by highlighting and responding to this story.

AngularDoc for Visual Studio Code

The easiest way to use AngularDoc is to install the VS Code extension.

AngularDoc for Visual Studio Code - Visual Studio Marketplace

After signing up an account, you can launch the AngularDoc editor in VS Code:

AngularDoc extension also provides the context menus to run angular-cli’s “ng generate” commands:

AngularDoc.io

Using the same credential for the VS Code extension, you can log in on the web site https://angulardoc.io and see the same metadata in the web UI for much better user experience:

Angular Copilot

For closed-source projects whose data security is vital, Angular Copilot is an ideal choice since it is a desktop application that has our analytical engine embedded. You can therefore import your local projects and have the static analysis performed in situ. Another benefit of running the desktop edition is that it can generate/modify source code to automate many tasks, such as helping out with the AngularJS-to-Angular migration. Please refer to our GA announcement and How it can helpstreamline AngularJS-to-Angular Migration for more information.

We hope that you’ll find these tools indispensable in your daily work. Please don’t hesitate to let us know how we can do better.

Introducing AngularDoc was originally published in AngularDoc on Medium, where people are continuing the conversation by highlighting and responding to this story.

In March 2018, we managed to identify over 8700 public repos on GitHub that are related to Angular. Scanning and analyzing each of them yielded a wealth of metadata that we eventually published on angulardoc.org, a searchable repository of Angular projects. With this many repos, we were curious: how many of them were upgrade projects? Assuming that a project that had “@angular/upgrade” package in the dependencies qualifies as an upgrade one, we found 1400+ of them, and here’s how they were distributed across the Angular versions, from the first v2.o on the far left to the upcoming v6.0 on the far right:

It's alarming that 60% of the upgrade projects are stuck at the oldest Angular version after 1.5 years.

Migrating a large code base requires a lot of resources and commitment, and doing everything manually is a non-starter. This is when tooling can be a big help. We have just announced the availability of Angular Copilot, a desktop tool that can streamline the migration process with these key features:

• Scaffolding Angular shell for the AngularJS application with Angular CLI
• Migrating bower.json
• Quick configuration of angular-cli build for the global scripts, styles, and/or static assets
• Auto configuration of UpgradeModule to bootstrap the AngularJS app
• Graphical summary of the migration progress
• Incremental migration of individual components from JavaScript to TypeScript
• (VS Code extension) Quick fix of the AngularJS constructs in the component and template files
• One-click migration of the routes

Recently I had the privilege of presenting at the ngHouston Meetup on this topic. The video of the entire presentation, including the demo and the panel discussion, is available on YouTube.

I am excited that I’ll speak at ng-conf 2018 in Salt Lake City, Utah, next week. I’m hoping to interact with many of you in person to share our experiences and hear your ideas on how Angular Copilot can be better.

In the meantime, I encourage you to learn more about Angular Copilot from our GA announcement and the product web site.

Update April 22, 2018: The ng-conf 2018 talk was a huge success! The room was packed and some of the audience had to sit on the floor.

Streamlining the AngularJS-to-Angular migration ng-conf 2018.pptx

I have had many constructive discussions with developers who are eager to learn how Angular Copilot can help their migration. Please send your inquiries via the following form:

Angular Copilot for AngularJS-to-Angular Migration was originally published in AngularDoc on Medium, where people are continuing the conversation by highlighting and responding to this story.

Angular Copilot brings AngularDoc’s analytical engine to your desktop, so that you can benefit from the static analysis of your Angular & AngularJS applications, while your source code and its metadata remain secure on your local machine. Its key features include:

• Repository Dashboard — central place to manage your repos, and to import the popular Angular repos from GitHub;
• Front end for the angular-cli command-line tool — “New Project” wizard to scaffold the Angular application using “ng new” command, and “New Component” dialog to generate blueprints using “ng generate” command;
• Architecture Diagram — animated overall architecture of your AngularJS/angular project, such as the bootstrap class, modules, components, and routes
• Class Browser — classes viewed by the component types, with the convenience of searching and filtering; one click to open the source code in VS Code
• Module Diagram — visualizing the module’s composition, imports, and exports
• Route Tree Diagram — hierarchical tree of the routes and the implementing components
• Import Diagram — visualizing all the Importing relationships between your classes
• Test case browser — central place to view and search the test cases

In addition, the Cookbook feature has “recipes” that allow one-click installation and configuration of popular client frameworks for your application.

While the features listed above are free, Angular Copilot also has premium/paid features such as AngularJS-to-Angular migration.

Angular Copilot works best with VS Code as the code editor. We hope that it becomes an indispensable tool for the web developers along side VS Code. Please visit https://angulardoc.github.io/ to download yours.

Announcing Angular Copilot v1.0 was originally published in AngularDoc on Medium, where people are continuing the conversation by highlighting and responding to this story.