nrwl/nx-console

Nx Console is the user interface for Nx & Lerna.

nx-console's Issues

[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

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.)

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"
   

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.

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.

chore: CI + Build cleanup

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

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.

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.

[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.

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.

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">

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

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.

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.

"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

Linux ubuntu version

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

Autocomplete module name errors: path does not exist.

Error on clicking to a project in projects page.

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

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

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?

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.

[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.

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.

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

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

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

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

Prompt when leaving schematics generate form

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

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

fix: Record exceptions in analytics

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

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.

[Future Request] Support to change UI language

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

Linux support

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

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.

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?

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.

[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.

[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.

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).

build: Use electron to serve the server

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.

Add Google Analytics for user behavior and server error.

Capture events:

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

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.

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. 😄

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

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:)