Skip to main content

Angular Console–Angular CLI made easy

The guys from Nrwl are introducing the Angular Console; a more approachable way to work with all the features that the Angular CLI already provides.

The Angular Console is available at https://angularconsole.com/ and offers the following set of features:

  • Trivial Code Generation: Leverage the CLI's built in generators for Components, Providers and more, all without having to remember a single command line flag.
  • Run Custom NPM Scripts: As well as the standard `ng` commands, all of your custom npm scripts are automatically detected and allow you to run them with a single click.
  • Discover and Install Extensions: Search through a comprehensive list of official and community schematics to extend the power of the Angular CLI even further, and install them directly in the UI.
  • Build CLI Commands Visually: Using a visual form-driven UI, you get all of the flags and arguments for your chosen command available inline.
  • Integrated Terminal Output: As you compose and execute your commands in a visual way, you will also see your changes reflected in the inline terminal output in real-time.
  • Import Existing Projects: Create new Angular CLI projects from scratch, or import existing ones.

Getting started

  • After installing the Angular Console, you get a new menu item and desktop icon. Running the application will bring you to the Recently Opened Workspaces screen where you can see all projects you were working on before.

image

  • Let’s create a new Angular workspace by clicking on Create. A new wizard is started and you first have to specify 3 things
    • A working folder
    • A workspace name
    • The schematics you want to use

image

  • Click Create to continue. You see the command that gets generated and all output is written to a console:

image

  • After the installation is done, you can immediately trigger the different ng commands like build, serve, …

image

  • Let’s try for example to create a new component by clicking on Generate Component. Now you get a nice UI that allows you to specify all fields. Fill in all required fields and click Generate.

image

  • You also have the option to Generate code based on the available schematics:

image

  • And last but not least you can also directly run all tasks that are found inside your package.json:

image

Enough reasons to give the Angular Console a try…

Labels:

Popular posts from this blog

Podman– Command execution failed with exit code 125

After updating WSL on one of the developer machines, Podman failed to work. When we took a look through Podman Desktop, we noticed that Podman had stopped running and returned the following error message: Error: Command execution failed with exit code 125 Here are the steps we tried to fix the issue: We started by running podman info to get some extra details on what could be wrong: >podman info OS: windows/amd64 provider: wsl version: 5.3.1 Cannot connect to Podman. Please verify your connection to the Linux system using `podman system connection list`, or try `podman machine init` and `podman machine start` to manage a new Linux VM Error: unable to connect to Podman socket: failed to connect: dial tcp 127.0.0.1:2655: connectex: No connection could be made because the target machine actively refused it. That makes sense as the podman VM was not running. Let’s check the VM: >podman machine list NAME         ...
Read more

Azure DevOps/ GitHub emoji

I’m really bad at remembering emoji’s. So here is cheat sheet with all emoji’s that can be used in tools that support the github emoji markdown markup: All credits go to rcaviers who created this list.
Read more

Cleaner switch expressions with pattern matching in C#

Ever find yourself mapping multiple string values to the same result? Being a C# developer for a long time, I sometimes forget that the C# has evolved so I still dare to chain case labels or reach for a dictionary. Of course with pattern matching this is no longer necessary. With pattern matching, you can express things inline, declaratively, and with zero repetition. A small example I was working on a small script that should invoke different actions depending on the environment. As our developers were using different variations for the same environment e.g.  "tst" alongside "test" , "prd" alongside "prod" .  We asked to streamline this a long time ago, but as these things happen, we still see variations in the wild. This brought me to the following code that is a perfect example for pattern matching: The or keyword here is a logical pattern combinator , not a boolean operator. It matches if either of the specified pattern...
Read more