nrwl/nx-console

Nx Console is the user interface for Nx & Lerna.

The UI for Nx & Lerna

Spend less time looking up command line arguments and more time shipping incredible products.

---

Why Nx Console?

Developers use both command-line tools and user interfaces. They commit in the terminal, but resolve conflicts in Visual Studio Code or WebStorm. They use the right tool for the job.

Nx is a command-line tool, which works great when you want to serve an application or generate a simple component. But it falls short once you start doing advanced things.

For instance:

• Exploring custom generator collections is hard in the terminal, but it's easy using Nx Console.
• Using rarely-used flags is challenging. Do you pass absolute or relative paths? You don't have to remember any flags, names or paths - Nx Console will help you by providing autocompletion and validating your inputs.
• Context-switching between your IDE and the browser is annoying. With Nx Console, you can view the nx graph right in VSCode!

Nx Console does all that and more!

Download

You can install Nx Console in the following places:

• Nx Console for Visual Studio Code from the Visual Studio Marketplace.
• Nx Console for JetBrains from the JetBrains Marketplace

True UI for Nx & Lerna

Nx Console is the UI for all Nx workspaces. It works for any generator or any architect commands. Nx Console does not have a specific UI for, say, generating a component. Instead, Nx Console does what the command-line version of Nx does - it analyzes the same meta information to create the needed UI. This means that anything you can do with Nx, you can do with Nx Console. After all, Nx Console is the UI for Nx.

Useful for Both Experts and Beginners

Even though we started building Nx Console as a tool for experts, we also aimed to make Nx Console a great tool for developers who are new to development or Nx. You can create projects, interact with your editor, run generators and commands and install extensions without ever touching the terminal or having to install any node packages globally. Also, Nx Console highlights the properties you are likely to use for built-in generators and commands, so if you haven't used the CLI, you don't get overwhelmed.

Compatibility

The latest version of Nx Console supports all Nx versions starting at Nx 15. For older versions, we cannot guarantee compatibility or full functionality. However, we welcome contributions! If you encounter specific issues with older versions, please consider submitting a PR. Of course, if you discover any problems with newer versions of Nx, please report these issues to help us improve Nx Console.

If you're looking to upgrade your version of Nx easily, refer to the Nx migrate documentation.

Learn More

• Documentation - Official documentation with video tutorials
• nx.dev - Documentation, Guides and Interactive Tutorials on Nx
• Join the community - Chat about Nx & Nx Console on the official discord server
• Learn more about the team at Nx - The team at Nx led the development of Nx Console, after working with many Enterprise clients.

Contributing

Please read the contributing guidelines. Pick one of the issues from the good first issue list to get started.

Jetbrains WSL support

The Node interpreter under Languages & Frameworks > Node.js needs to be configured to use the Node executable within the WSL distribution. You can read more on the official Jetbrains docs page.

nx-console's Issues

Autocomplete module name errors: path does not exist.

[enhancement] - Save user preferences/settings

When serving I often prefer to run with --open. I selected that in the Angular Console and it worked, but when I went back to other tabs and came back, that option was not saved/remembered.

I would like the user preferences to be saved.

open in Webstorm button

This app is really cool, Thanks!

The video shows the Angular Console with a webstorm icon next to the VSCode icon. I have both IDEs installed, but I only see the open in VSCode icon, and not one to open it in Webstorm.

I am running the app on windows 10, while the Video appears to be running on a Mac. Should "open in Webstorm" be an option on the toolbar when "open in VSCode" is present?

How does an IDE get its icon on that toolbar?

Feature: Available Extension Discovery

Working in the enterprise we own our own schematics on a private npm feed. It would be nice if you could configure a discovery endpoint that the application queried to provide additional information to Angular Console, such as populating the Available Extensions tab.

Importing from other drives than C: (Windows)

Context: Using Windows 10, trying to import existing Angular projects to get started. My workspace partition on Windows is an encrypted and named D instead of C. This partition is decrypted and accessible.

Current: The Angular Consoles only lists the default C: partition on Windows.
Expected: The Angular Console should list all partitions that are accessible on Windows.

Workaround: Create a symlink from C: to D: (mklink /d C:/D D:)

Show Workspace name on Windows Title

Here is the scenario:

1. Open Angular Console, the Windows Title shows "Angular Console".
2. When click into specific workspace, for example: demo3
3. the Windows Title is "Angular Console" now, it may change to "demo3 - Angular Console" in the Windows Title bar. See screenshot below:

Reason:

When I click into an item of Genereate Code, Run Tasks or Add/Remove CLI Extensions, the workspace name is disappeared. If the name can show on Windows Title, I think it will improve UX.

[Feature Request] Ability for multiple terminal tasks

Just started testing the usage of Angular Console and noticed it doesn't currently allow multiple tasks to be triggered parallel with one another. If a user selects a task that shows in the UI corresponding to their package.json scripts, they can only run one at a time. It would be a nice enhancement if the user could still access the task list screen once a task has been triggered and then upon selecting an additional task, a 'tab' in the terminal UI is created for the additional task to be run. Similar to how most terminals work.

Change generate view to have no checkboxes or sidenav

Per discussion with Dan, schematics don't make sense to be checkboxes, or to even remain in the side bar once a schematic has been selected.

Linux ubuntu version

Release an linux version software for the angular console. That will awesome. Because lots of developer used ubuntu

task-runner component: Task Output is off-centre

Since this is an electron app we should try to align the terminal title with the app window title

Prompt when leaving schematics generate form

If a user clicks away while they're in the middle of generating, prompt them to make sure.

Serving the Application

• Created a new application

• Ran 'Serve' from the project via the GUI
  Project started.
  when to add extensions.
  Could not find or navigate back to terminal that was running the server.

ISSUE: Could not find the terminal with the running server.

task-runner component: Need more of an affordance when a task is running vs complete

Terminal shows "command is missing required fields" when clicking Optional fields

Steps to reproduce:

1. Go to a workspace
2. Go to Generate Code
3. Click on the Angular CLI Component schematic
   
4. See that the terminal output is fine
   
5. Click on the Optional fields bar to expand
   
6. See that the terminal has "command is missing required fields"
   

chore: CI + Build cleanup

Currently, our CI process is flaky. We need to have it be more reliable

Schematic is not available on Generate Code List, after adding a schematic extension.

Repro:
-Navigate to add/remove extension.

• Add a new extension from the list. Ex: angular/material
• Navigate to generate code tab.
• Scroll down or filter by schematics name.

Workspace creation: Terminal dialog is closable while command still running

I just went to create a new workspace and I notice the flow has been updated to show the terminal in a dialog.

Currently, you can click the overlay to close the dialog, but I would argue this is not desired as if you accidentally click (like I just did) you lose reference to what’s happening and get visually stranded.

Additionally, the text in the top bar remains something like “Fill in required fields” even when the command is already running (and you must have already completed that requirement).

Can't open directory drop down when attempting to import existing project (Windows 7)

Hi,

I get this error when attempting to open a directory when importing a project.

I've restarted the Angular Console a few times but no luck. Error still present.

Thanks.

Edit: it's an issue with opening directories with a space in the name i.e. can't open any directories with this naming convention.

Add @nrwl/schematics error to an existing Angular 6 project

Retro:

• Open the project.
• Navigate to add extension.
• Choose @nrwl/schematics and run.

Error:

Repro repo diff:
Yonet/Code4Good@dac9b89

freshly installed app has GraphQL error

I installed the app from an installer that @mrmeku created on Mac. When I opened it, and clicked "open workspace" without providing a path, it had a 500 error.

Error: Http failure response for http://localhost:7777/graphql: 500 Internal Server Error

When I provided a path to the input, it started failing with new errors. And when I clicked "Create New Workspace" it had this screen:

Maybe the server died and never recovered because I didn't provide a path the first time like I was supposed to?

Linux support

There are currently installs for Mac and Windows. Any way to install on Ubuntu?

[Future Request] Support to change UI language

I hope, in future, Angular Console will support changing the language of UI.

feat: Open in terminal / powershell

We want to be able to allow users to easily open their workspace in a terminal environment if they'd like to.

build: Use electron to serve the server

Creating application using @nrwl/schematic generates error "Cannot read property 'kind' of undefined" when using yarn

Steps to reproduce:

1. Create a workspace using @nrwl/shematics

2. Generate app using @nrwl/schematics

Angular-Console generates this command line script:
ng generate application my-app --directory=my-app --viewEncapsulation=None --routing --prefix=my --style=scss --tags=ui

feat: Angular global error handler

When an error is propagated up through Angular's zone, we want to capture that error and log it with analytics so we can fix it in a future release.

ui-form component: Add links to docs to form fields wherever possible

To encourage developers to read documentation we can add links to docs on the form.
Ex:

• User wants to generate a component.
• Sees the option for viewEncapsulation but doesn't really know what it is.
• User clicks the info link on the form label to learn more about the viewEncapsulation options they can choose from.

creation screen: Add checkboxes to indicate that a step has been successfully complete

UI can be seen here: https://myaccount.google.com/privacycheckup

It makes you feel all nice and cozy inside when you see a green checkbox

Create new project/workspace with 3rd party Schematic

Currently when creating a new workspace AngularConsole only gives the choice of the default angular schematics or the nx schematics.

It would be beneficial to allow other, or internal, schematics to be used at this point.

[Feature Request] Use a GraphQL Subscription for command output

Currently the command output is retrieved by polling the GraphQL Query with a small interval. It probably makes sense to use a GraphQL Subscription to handle the output of the commands as it should save a lot of unneeded requests.

I'm happy to give a go at implementing this if it seems useful.

Address the UX problem of executing schematics

Right now it is an arrow in the header, which makes me feel like it's related to app navigation, not relating to executing my schematic.

Error on clicking to a project in projects page.

Repro:
Select a workspace.
Click on a project list item, ex: application.

skipPackageJson option installs packages

This is not a bug but confusing behavior.

Run:

ng generate library teach/app1 --publishable --skipPackageJson --routing --lazy --parentModule=apps/teach/src/app/app.module.ts

Behavior:

@angular-devkit/build-ng-packagr, ng-packagr, tsickle, tslib installed.
npm warnings displayed.

Suggestion:
I do see that these packages are being installed for publishable option but it might be confusing to users. I am wondering if we can display more information on what is happening?

No exceptions should be in the console when application starts with the non-default route

zone.js:388 ERROR Error: Unable to process animations due to the following failed trigger transitions
 @routerTransition has failed due to:

- `query(":leave")` returned zero elements. (Use `query(":leave", { optional: true })` if you wish to allow this.)

[Feature Request] Allow opening project in terminal

It would be great if there was a way to open a terminal in the project dir, similar to the other apps in the header.

Unsigned executable triggers virus protection

Norton won't let me download this to try it out.
I could disable virus protection maybe or build from source however it looks like they would stop making such harsh assumptions if the executable was signed according to:
https://www.symantec.com/connect/forums/how-avoid-wsreputation1-error

Display affected:dep-graph

Expected behavior:

• Dep-graph displayed on a new route. Not generated under the 'Run Tasks' route.
• Effected lib/app nodes are interactive, ex: display child modules/files when clicked.
• Default graph option is '--base=master'
• Allow user to run it with all options.

"Little Big Details" - Misc. UX Feedback

@nrwl/nrwlians Please add bits of tiny UX feedback to this list.

Things which are not really bugs, just things we can refine.

• When clicking run on a command, it takes a couple of seconds for anything to happen in the UI. We should immediately provide feedback to the users that the run command succeeded

Add support for zoom

Looks like command + and command - do not work to zoom in and out in the app.

Also, it looks like the width: 100vw; on the .nested-outlet-container class may be an issue when zooming. The schematics options screen does not scale correctly when the css zoom property is used on a parent element like <body> (not sure if css zoom is the same as the zoom that the browser uses with command +, but if it is then this may be an issue).

Oh, and one more. When using the css zoom on the <body> it results in a vertical scroll bar. My guess is that this is due to the structure of the layout with the sticky header/sidebar and a scrollable panel. Just want to add that info here to make sure that gets tested when zoom is implemented. 😄

Empty Projects page after importing a newly created nx workspace project

Repro:

• Create an nx workspace.
• Navigate to import and select newly created workspace.
• Automatic navigation to Project page renders empty page.

Suggestion:

• Have a message on Project tab for empty project and link to generate code tab.
• Or navigate to generate code tab if the project is empty.

fix: Record exceptions in analytics

We need to do this for both API exceptions and also node unhandled exceptions on our server

Terminal doesn't generate output when clicking an action button more than once (quickly)

When hitting actions buttons (e.g. build, generate component) more than once (quickly), I noticed that the terminal would not display the output for the action.

The action was still executed, at least in the case of generate component, but no console output.

fix: The required property isn't handled correctly for tasks

Currently none of our tasks have required fields since we need to re-archtiect how task default values are computed. We need to parse angular.json to find the default values that an architect command has and fill them out. Then we can mark fields as required

[Feature Request] Provide Folder Refresh Button to reload folder tree

Escenario:

Started application cannot provide any way to refresh folder (if i'd create new one), So turns me to close the app, start again and select the new created folder.

[Feature Request] Allow creation of component in sub-directory

Currently you have to provide a name for new components including sub-directories for the component to be created in a sub-directory.

For example:
I want to create info component inside the entitiy/detail folder.

I would have to name the component entity/detail/info.

Feature Request:
Allow option to choose the directory a new component is created in

Add Google Analytics for user behavior and server error.

Capture events:

• Server and client errors.
• Add click and navigation.
• Unique installations.

fix: Use Electron storage for settings storage

We need to do this since local storage cannot be shared between the same domains on different ports. We cannot always launch angular console on the same port 100% of the time

Save window size when exiting app

Feature request:

Would like the app to save the window dimensions when exiting the app and use those when opening the app if they exist. It would also be nice if it saved the window location as well.

Angular Console should work without internet connection

These two should be replaced with local links:

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Extended" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

Add some keyboard shortcuts or hotkeys

For example:

• Ctrl-1: switch to Projects
• Ctrl-2: switch to Generate Code
• Ctrl-3: switch to Run Tasks
• Ctrl-4: switch to Add/Remove CLI Extensions
• ArrowDown / ArrowUp: move cursor up and down of the items
• /: Jump to Filter

• Alt-A: hit Add button
• Alt-C: hit Cancel button
• Escape: back to go back to previous page