Learn how to use the Angular Console to improve productivity with the CLI and easily manage 3rd party schematics. https://angularfirebase.com/lessons/angular-console-quick-start-guide/

- Angular Console: https://angularconsole.com/
- Angular CLI Basics Video: https://youtu.be/IZEolKjcjks
2024-02-04T07:22:31.413Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
e134efec-9df8-4d42-8b9d-aa624751f2b4
136b934b5338535f6756878b2f3650367364df5c745108a1f82a07dd088ce2c5
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
I'd say I'm a pretty advanced Angular user, so when I first saw that there was a desktop based app for the Angular CLI, my initial thought was I probably really don't have any need for that.
But, then I actually used it and was very surprised at the productivity gains I got out of it.
Over the next few minutes, I'll take you through all the core features of the Angular console and explain why I think it's a powerful tool for developers of all skill levels.
If you're new here like and subscribe and you can find the full write up at angularfirebase.
Com.
The Angular console is built by Narwhal and it's an Electron app that provides a graphical user interface for the Angular CLI.
It's currently available on Mac and Windows, but there should be a Linux version available in the future.
Go ahead and download it onto your system, open it, And then the first thing you'll do is just select a directory to create a new project or you can import an existing project.
I'm going to go ahead and create a new project.
The first thing I'll do is give it a name, and then we can select the set of schematics that we wanna use for this project.
You have the option for NX here, but I'll just Be using the regular Angular CLI schematics for now.
That's going to create a new project with the CLI, and then you'll see we get the output from the command line directly in the app here.
When that's done, we can open up our project in the IDE.
You can see I have a link here for Versus Code up in the top right.
I'll go ahead and keep Versus Code opened up here on Right for the rest of the video.
One of the reasons this app is really good for productivity is because the Angular CLI is just so complex.
There's so many different options and generators, it's hard to keep track of everything.
Clicking a set of buttons tends to be a lot faster than trying to memorize and type out every single command.
For example, if we want to serve an app, we can just hit the serve button and then we have a set of options here plus a couple of default configurations.
And everything is documented for you right here, so you know exactly what each knob does without having to go search through the documentation.
Serving an app is pretty simple, but when you get into generators for components and modules, there are dozens of different options and it's impossible to memorize all of them.
Let's see how quickly we can set up a shared module here.
I'll go to the module generator and then we fill out the required field such as the name, the associated project, And then we'll also go ahead and import this module into our existing app module.
And you'll also see in the Console it executes It's a dry run of the command before you click generate so you'll know if there are any issues before you actually run this command.
When we click generate, it sets up the shared module as Expected in our App Directory.
But right now it's empty, so let's go ahead and add some components to it.
One of my favorite things about the Console tool is that it will automatically detect this module, so now we can add components to it easily just by clicking that module in the UI.
Typing out the path to a module from the command line is pretty tedious and error prone, so this UI just makes your life a lot easier in that regard.
Then just for fun we'll go ahead and set some random optional fields and you can see the command below gets really long.
The CLI command is probably like 200 characters which is not something that you wanna be typing out by hand.
If we go ahead and click generate, you'll see that component gets added to our shared module with all the various options that we selected.
Good.
The Console can also run your npm scripts.
If you look over here on the right, I'm creating my own custom script that just says say hello, And we'll just have it echo my name back.
Then if you watch over on the left side, as soon as I create it, it shows up in my package JSON scripts here in the Angular console.
Then we can just go ahead and click Run and it echoes my name back as expected.
Now there's one more thing in the Console I wanna show you that I think is Extremely useful, but will become even more useful in the future as more third party schematics are created.
One of the new features in Angular 6 was the ability to use ng add, which allows developers to add 3rd party libraries to their existing project without any setup.
If you click on the puzzle piece, you'll a registry of a whole bunch of different third party schematics such as NGRX, NativeScript, Kendo UI, and a bunch of others.
What I really like about this is that everything is centralized in a single place, so I don't have to go searching on Google for different schematics offered by different third parties.
So a simple example of using ng add would be if you want to add ngrx store to your app.
You simply click on the schematic, run it, and you'll see our actual code gets updated with A store module in the app module plus installs all of the n g r x dependencies.
A growing area in the Angular ecosystem is the use of third party schematics which are essentially mods for the Angular CLI.
A good example would be NativeScript if you're building a native mobile app.
You can generate components that are suitable for iOS and Android.
So let's go ahead and add the NativeScript schematics to our project.
You'll notice that updates our package JSON with a couple of new scripts that we can run from the console, but it also gives us a whole another set of generators specifically for NativeScript.
If you click on the code icon, you'll see we now have schematics for the Angular CLI plus NativeScript.
And overall, they look similar, but they do different things.
So let's go ahead and generate a component for NativeScript.
You'll notice a handful of different options based on the platform that you're targeting.
And when you generate the component if you look at the code you'll notice some slight differences such as the tns extension and also a component that has a native widget instead of just Plain HTML.
I'm gonna go ahead and wrap things up there.
I'm sure they'll be adding additional features to the console in the future, but it's already a great productivity booster in its current state so you'll probably see me using it on future videos.
If you're building an Angular Firebase app and looking to get that app into production as soon as possible, consider signing up for a Pro membership at angularfirebase.com.
You'll get access to full courses and advanced content designed to help you build and ship your app faster.
Thanks for watching, and I'll talk to you soon.

Speaker 0: I'd say I'm a pretty advanced Angular user, so when I first saw that there was a desktop based app for the Angular CLI, my initial thought was I probably really don't have any need for that. But, then I actually used it and was very surprised at the productivity gains I got out of it. Over the next few minutes, I'll take you through all the core features of the Angular console and explain why I think it's a powerful tool for developers of all skill levels. If you're new here like and subscribe and you can find the full write up at angularfirebase. Com.

The Angular console is built by Narwhal and it's an Electron app that provides a graphical user interface for the Angular CLI. It's currently available on Mac and Windows, but there should be a Linux version available in the future. Go ahead and download it onto your system, open it, And then the first thing you'll do is just select a directory to create a new project or you can import an existing project. I'm going to go ahead and create a new project. The first thing I'll do is give it a name, and then we can select the set of schematics that we wanna use for this project.

You have the option for NX here, but I'll just Be using the regular Angular CLI schematics for now. That's going to create a new project with the CLI, and then you'll see we get the output from the command line directly in the app here. When that's done, we can open up our project in the IDE. You can see I have a link here for Versus Code up in the top right. I'll go ahead and keep Versus Code opened up here on Right for the rest of the video.

One of the reasons this app is really good for productivity is because the Angular CLI is just so complex. There's so many different options and generators, it's hard to keep track of everything. Clicking a set of buttons tends to be a lot faster than trying to memorize and type out every single command. For example, if we want to serve an app, we can just hit the serve button and then we have a set of options here plus a couple of default configurations. And everything is documented for you right here, so you know exactly what each knob does without having to go search through the documentation.

Serving an app is pretty simple, but when you get into generators for components and modules, there are dozens of different options and it's impossible to memorize all of them. Let's see how quickly we can set up a shared module here. I'll go to the module generator and then we fill out the required field such as the name, the associated project, And then we'll also go ahead and import this module into our existing app module. And you'll also see in the Console it executes It's a dry run of the command before you click generate so you'll know if there are any issues before you actually run this command. When we click generate, it sets up the shared module as Expected in our App Directory.

But right now it's empty, so let's go ahead and add some components to it. One of my favorite things about the Console tool is that it will automatically detect this module, so now we can add components to it easily just by clicking that module in the UI. Typing out the path to a module from the command line is pretty tedious and error prone, so this UI just makes your life a lot easier in that regard. Then just for fun we'll go ahead and set some random optional fields and you can see the command below gets really long. The CLI command is probably like 200 characters which is not something that you wanna be typing out by hand.

If we go ahead and click generate, you'll see that component gets added to our shared module with all the various options that we selected. Good. The Console can also run your npm scripts. If you look over here on the right, I'm creating my own custom script that just says say hello, And we'll just have it echo my name back. Then if you watch over on the left side, as soon as I create it, it shows up in my package JSON scripts here in the Angular console.

Then we can just go ahead and click Run and it echoes my name back as expected. Now there's one more thing in the Console I wanna show you that I think is Extremely useful, but will become even more useful in the future as more third party schematics are created. One of the new features in Angular 6 was the ability to use ng add, which allows developers to add 3rd party libraries to their existing project without any setup. If you click on the puzzle piece, you'll a registry of a whole bunch of different third party schematics such as NGRX, NativeScript, Kendo UI, and a bunch of others. What I really like about this is that everything is centralized in a single place, so I don't have to go searching on Google for different schematics offered by different third parties.

So a simple example of using ng add would be if you want to add ngrx store to your app. You simply click on the schematic, run it, and you'll see our actual code gets updated with A store module in the app module plus installs all of the n g r x dependencies. A growing area in the Angular ecosystem is the use of third party schematics which are essentially mods for the Angular CLI. A good example would be NativeScript if you're building a native mobile app. You can generate components that are suitable for iOS and Android.

So let's go ahead and add the NativeScript schematics to our project. You'll notice that updates our package JSON with a couple of new scripts that we can run from the console, but it also gives us a whole another set of generators specifically for NativeScript. If you click on the code icon, you'll see we now have schematics for the Angular CLI plus NativeScript. And overall, they look similar, but they do different things. So let's go ahead and generate a component for NativeScript.

You'll notice a handful of different options based on the platform that you're targeting. And when you generate the component if you look at the code you'll notice some slight differences such as the tns extension and also a component that has a native widget instead of just Plain HTML. I'm gonna go ahead and wrap things up there. I'm sure they'll be adding additional features to the console in the future, but it's already a great productivity booster in its current state so you'll probably see me using it on future videos. If you're building an Angular Firebase app and looking to get that app into production as soon as possible, consider signing up for a Pro membership at angularfirebase.com.

You'll get access to full courses and advanced content designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
I'd say I'm a pretty advanced Angular user, so when I first saw that there was a desktop based app for the Angular CLI, my initial thought was I probably really don't have any need for that. But, then I actually used it and was very surprised at the productivity gains I got out of it. Over the next few minutes, I'll take you through all the core features of the Angular console and explain why I think it's a powerful tool for developers of all skill levels. If you're new here like and subscribe and you can find the full write up at angularfirebase. Com. The Angular console is built by Narwhal and it's an Electron app that provides a graphical user interface for the Angular CLI.
It's currently available on Mac and Windows, but there should be a Linux version available in the future. Go ahead and download it onto your system, open it, And then the first thing you'll do is just select a directory to create a new project or you can import an existing project.
software
microsoft
I'm going to go ahead and create a new project. The first thing I'll do is give it a name, and then we can select the set of schematics that we wanna use for this project.
You have the option for NX here, but I'll just Be using the regular Angular CLI schematics for now. That's going to create a new project with the CLI, and then you'll see we get the output from the command line directly in the app here. When that's done, we can open up our project in the IDE. You can see I have a link here for Versus Code up in the top right. I'll go ahead and keep Versus Code opened up here on Right for the rest of the video. One of the reasons this app is really good for productivity is because the Angular CLI is just so complex. There's so many different options and generators, it's hard to keep track of everything.
software development
software
programming
infrastructure
Clicking a set of buttons tends to be a lot faster than trying to memorize and type out every single command. For example, if we want to serve an app, we can just hit the serve button and then we have a set of options here plus a couple of default configurations.
And everything is documented for you right here, so you know exactly what each knob does without having to go search through the documentation. Serving an app is pretty simple, but when you get into generators for components and modules, there are dozens of different options and it's impossible to memorize all of them.
documentation
Let's see how quickly we can set up a shared module here. I'll go to the module generator and then we fill out the required field such as the name, the associated project, And then we'll also go ahead and import this module into our existing app module.
And you'll also see in the Console it executes It's a dry run of the command before you click generate so you'll know if there are any issues before you actually run this command. When we click generate, it sets up the shared module as Expected in our App Directory. But right now it's empty, so let's go ahead and add some components to it. One of my favorite things about the Console tool is that it will automatically detect this module, so now we can add components to it easily just by clicking that module in the UI. Typing out the path to a module from the command line is pretty tedious and error prone, so this UI just makes your life a lot easier in that regard. Then just for fun we'll go ahead and set some random optional fields and you can see the command below gets really long.
programming
software
The CLI command is probably like 200 characters which is not something that you wanna be typing out by hand.
If we go ahead and click generate, you'll see that component gets added to our shared module with all the various options that we selected. Good. The Console can also run your npm scripts. If you look over here on the right, I'm creating my own custom script that just says say hello, And we'll just have it echo my name back.
programming
Then if you watch over on the left side, as soon as I create it, it shows up in my package JSON scripts here in the Angular console. Then we can just go ahead and click Run and it echoes my name back as expected. Now there's one more thing in the Console I wanna show you that I think is Extremely useful, but will become even more useful in the future as more third party schematics are created. One of the new features in Angular 6 was the ability to use ng add, which allows developers to add 3rd party libraries to their existing project without any setup. If you click on the puzzle piece, you'll a registry of a whole bunch of different third party schematics such as NGRX, NativeScript, Kendo UI, and a bunch of others. What I really like about this is that everything is centralized in a single place, so I don't have to go searching on Google for different schematics offered by different third parties. So a simple example of using ng add would be if you want to add ngrx store to your app. You simply click on the schematic, run it, and you'll see our actual code gets updated with A store module in the app module plus installs all of the n g r x dependencies. A growing area in the Angular ecosystem is the use of third party schematics which are essentially mods for the Angular CLI. A good example would be NativeScript if you're building a native mobile app. You can generate components that are suitable for iOS and Android. So let's go ahead and add the NativeScript schematics to our project. You'll notice that updates our package JSON with a couple of new scripts that we can run from the console, but it also gives us a whole another set of generators specifically for NativeScript. If you click on the code icon, you'll see we now have schematics for the Angular CLI plus NativeScript. And overall, they look similar, but they do different things. So let's go ahead and generate a component for NativeScript. You'll notice a handful of different options based on the platform that you're targeting. And when you generate the component if you look at the code you'll notice some slight differences such as the tns extension and also a component that has a native widget instead of just Plain HTML. I'm gonna go ahead and wrap things up there. I'm sure they'll be adding additional features to the console in the future, but it's already a great productivity booster in its current state so you'll probably see me using it on future videos. If you're building an Angular Firebase app and looking to get that app into production as soon as possible, consider signing up for a Pro membership at angularfirebase.com.
You'll get access to full courses and advanced content designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
software
software development
computers
microsoft
programming
I'd say I'm a pretty advanced Angular user, so when I first saw that there was a desktop based app for the Angular CLI, my initial thought was I probably really don't have any need for that. But, then I actually used it and was very surprised at the productivity gains I got out of it. Over the next few minutes, I'll take you through all the core features of the Angular console and explain why I think it's a powerful tool for developers of all skill levels. If you're new here like and subscribe and you can find the full write up at angularfirebase. Com. The Angular console is built by Narwhal and it's an Electron app that provides a graphical user interface for the Angular CLI. It's currently available on Mac and Windows, but there should be a Linux version available in the future. Go ahead and download it onto your system, open it, And then the first thing you'll do is just select a directory to create a new project or you can import an existing project. I'm going to go ahead and create a new project. The first thing I'll do is give it a name, and then we can select the set of schematics that we wanna use for this project. You have the option for NX here, but I'll just Be using the regular Angular CLI schematics for now. That's going to create a new project with the CLI, and then you'll see we get the output from the command line directly in the app here. When that's done, we can open up our project in the IDE. You can see I have a link here for Versus Code up in the top right. I'll go ahead and keep Versus Code opened up here on Right for the rest of the video. One of the reasons this app is really good for productivity is because the Angular CLI is just so complex. There's so many different options and generators, it's hard to keep track of everything. Clicking a set of buttons tends to be a lot faster than trying to memorize and type out every single command. For example, if we want to serve an app, we can just hit the serve button and then we have a set of options here plus a couple of default configurations. And everything is documented for you right here, so you know exactly what each knob does without having to go search through the documentation. Serving an app is pretty simple, but when you get into generators for components and modules, there are dozens of different options and it's impossible to memorize all of them. Let's see how quickly we can set up a shared module here. I'll go to the module generator and then we fill out the required field such as the name, the associated project, And then we'll also go ahead and import this module into our existing app module. And you'll also see in the Console it executes It's a dry run of the command before you click generate so you'll know if there are any issues before you actually run this command. When we click generate, it sets up the shared module as Expected in our App Directory. But right now it's empty, so let's go ahead and add some components to it. One of my favorite things about the Console tool is that it will automatically detect this module, so now we can add components to it easily just by clicking that module in the UI. Typing out the path to a module from the command line is pretty tedious and error prone, so this UI just makes your life a lot easier in that regard. Then just for fun we'll go ahead and set some random optional fields and you can see the command below gets really long. The CLI command is probably like 200 characters which is not something that you wanna be typing out by hand. If we go ahead and click generate, you'll see that component gets added to our shared module with all the various options that we selected. Good. The Console can also run your npm scripts. If you look over here on the right, I'm creating my own custom script that just says say hello, And we'll just have it echo my name back. Then if you watch over on the left side, as soon as I create it, it shows up in my package JSON scripts here in the Angular console. Then we can just go ahead and click Run and it echoes my name back as expected. Now there's one more thing in the Console I wanna show you that I think is Extremely useful, but will become even more useful in the future as more third party schematics are created. One of the new features in Angular 6 was the ability to use ng add, which allows developers to add 3rd party libraries to their existing project without any setup. If you click on the puzzle piece, you'll a registry of a whole bunch of different third party schematics such as NGRX, NativeScript, Kendo UI, and a bunch of others. What I really like about this is that everything is centralized in a single place, so I don't have to go searching on Google for different schematics offered by different third parties. So a simple example of using ng add would be if you want to add ngrx store to your app. You simply click on the schematic, run it, and you'll see our actual code gets updated with A store module in the app module plus installs all of the n g r x dependencies. A growing area in the Angular ecosystem is the use of third party schematics which are essentially mods for the Angular CLI. A good example would be NativeScript if you're building a native mobile app. You can generate components that are suitable for iOS and Android. So let's go ahead and add the NativeScript schematics to our project. You'll notice that updates our package JSON with a couple of new scripts that we can run from the console, but it also gives us a whole another set of generators specifically for NativeScript. If you click on the code icon, you'll see we now have schematics for the Angular CLI plus NativeScript. And overall, they look similar, but they do different things. So let's go ahead and generate a component for NativeScript. You'll notice a handful of different options based on the platform that you're targeting. And when you generate the component if you look at the code you'll notice some slight differences such as the tns extension and also a component that has a native widget instead of just Plain HTML. I'm gonna go ahead and wrap things up there. I'm sure they'll be adding additional features to the console in the future, but it's already a great productivity booster in its current state so you'll probably see me using it on future videos. If you're building an Angular Firebase app and looking to get that app into production as soon as possible, consider signing up for a Pro membership at angularfirebase.com. You'll get access to full courses and advanced content designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
I'd
i'd
say
say
I'm
i'm
a
a
pretty
pretty
advanced
advanced
Angular
angular
user,
user
so
so
when
when
I
i
first
first
saw
saw
that
that
there
there
was
was
a
a
desktop
desktop
based
based
app
app
for
for
the
the
Angular
angular
CLI,
cli
my
my
initial
initial
thought
thought
was
was
I
i
probably
probably
really
really
don't
don't
have
have
any
any
need
need
for
for
that.
that
But,
but
then
then
I
i
actually
actually
used
used
it
it
and
and
was
was
very
very
surprised
surprised
at
at
the
the
productivity
productivity
gains
gains
I
i
got
got
out
out
of
of
it.
it
Over
over
the
the
next
next
few
few
minutes,
minutes
I'll
i'll
take
take
you
you
through
through
all
all
the
the
core
core
features
features
of
of
the
the
Angular
angular
console
console
and
and
explain
explain
why
why
I
i
think
think
it's
it's
a
a
powerful
powerful
tool
tool
for
for
developers
developers
of
of
all
all
skill
skill
levels.
levels
If
if
you're
you're
new
new
here
here
like
like
and
and
subscribe
subscribe
and
and
you
you
can
can
find
find
the
the
full
full
write
write
up
up
at
at
angularfirebase.
angularfirebase
Com.
com
The
the
Angular
angular
console
console
is
is
built
built
by
by
Narwhal
narwhal
and
and
it's
it's
an
an
Electron
electron
app
app
that
that
provides
provides
a
a
graphical
graphical
user
user
interface
interface
for
for
the
the
Angular
angular
CLI.
cli
It's
it's
currently
currently
available
available
on
on
Mac
mac
and
and
Windows,
windows
but
but
there
there
should
should
be
be
a
a
Linux
linux
version
version
available
available
in
in
the
the
future.
future
Go
go
ahead
ahead
and
and
download
download
it
it
onto
onto
your
your
system,
system
open
open
it,
it
And
and
then
then
the
the
first
first
thing
thing
you'll
you'll
do
do
is
is
just
just
select
select
a
a
directory
directory
to
to
create
create
a
a
new
new
project
project
or
or
you
you
can
can
import
import
an
an
existing
existing
project.
project
I'm
i'm
going
going
to
to
go
go
ahead
ahead
and
and
create
create
a
a
new
new
project.
project
The
the
first
first
thing
thing
I'll
i'll
do
do
is
is
give
give
it
it
a
a
name,
name
and
and
then
then
we
we
can
can
select
select
the
the
set
set
of
of
schematics
schematics
that
that
we
we
wanna
wanna
use
use
for
for
this
this
project.
project
You
you
have
have
the
the
option
option
for
for
NX
nx
here,
here
but
but
I'll
i'll
just
just
Be
be
using
using
the
the
regular
regular
Angular
angular
CLI
cli
schematics
schematics
for
for
now.
now
That's
that's
going
going
to
to
create
create
a
a
new
new
project
project
with
with
the
the
CLI,
cli
and
and
then
then
you'll
you'll
see
see
we
we
get
get
the
the
output
output
from
from
the
the
command
command
line
line
directly
directly
in
in
the
the
app
app
here.
here
When
when
that's
that's
done,
done
we
we
can
can
open
open
up
up
our
our
project
project
in
in
the
the
IDE.
ide
You
you
can
can
see
see
I
i
have
have
a
a
link
link
here
here
for
for
Versus
versus
Code
code
up
up
in
in
the
the
top
top
right.
right
I'll
i'll
go
go
ahead
ahead
and
and
keep
keep
Versus
versus
Code
code
opened
opened
up
up
here
here
on
on
Right
right
for
for
the
the
rest
rest
of
of
the
the
video.
video
One
one
of
of
the
the
reasons
reasons
this
this
app
app
is
is
really
really
good
good
for
for
productivity
productivity
is
is
because
because
the
the
Angular
angular
CLI
cli
is
is
just
just
so
so
complex.
complex
There's
there's
so
so
many
many
different
different
options
options
and
and
generators,
generators
it's
it's
hard
hard
to
to
keep
keep
track
track
of
of
everything.
everything
Clicking
clicking
a
a
set
set
of
of
buttons
buttons
tends
tends
to
to
be
be
a
a
lot
lot
faster
faster
than
than
trying
trying
to
to
memorize
memorize
and
and
type
type
out
out
every
every
single
single
command.
command
For
for
example,
example
if
if
we
we
want
want
to
to
serve
serve
an
an
app,
app
we
we
can
can
just
just
hit
hit
the
the
serve
serve
button
button
and
and
then
then
we
we
have
have
a
a
set
set
of
of
options
options
here
here
plus
plus
a
a
couple
couple
of
of
default
default
configurations.
configurations
And
and
everything
everything
is
is
documented
documented
for
for
you
you
right
right
here,
here
so
so
you
you
know
know
exactly
exactly
what
what
each
each
knob
knob
does
does
without
without
having
having
to
to
go
go
search
search
through
through
the
the
documentation.
documentation
Serving
serving
an
an
app
app
is
is
pretty
pretty
simple,
simple
but
but
when
when
you
you
get
get
into
into
generators
generators
for
for
components
components
and
and
modules,
modules
there
there
are
are
dozens
dozens
of
of
different
different
options
options
and
and
it's
it's
impossible
impossible
to
to
memorize
memorize
all
all
of
of
them.
them
Let's
let's
see
see
how
how
quickly
quickly
we
we
can
can
set
set
up
up
a
a
shared
shared
module
module
here.
here
I'll
i'll
go
go
to
to
the
the
module
module
generator
generator
and
and
then
then
we
we
fill
fill
out
out
the
the
required
required
field
field
such
such
as
as
the
the
name,
name
the
the
associated
associated
project,
project
And
and
then
then
we'll
we'll
also
also
go
go
ahead
ahead
and
and
import
import
this
this
module
module
into
into
our
our
existing
existing
app
app
module.
module
And
and
you'll
you'll
also
also
see
see
in
in
the
the
Console
console
it
it
executes
executes
It's
it's
a
a
dry
dry
run
run
of
of
the
the
command
command
before
before
you
you
click
click
generate
generate
so
so
you'll
you'll
know
know
if
if
there
there
are
are
any
any
issues
issues
before
before
you
you
actually
actually
run
run
this
this
command.
command
When
when
we
we
click
click
generate,
generate
it
it
sets
sets
up
up
the
the
shared
shared
module
module
as
as
Expected
expected
in
in
our
our
App
app
Directory.
directory
But
but
right
right
now
now
it's
it's
empty,
empty
so
so
let's
let's
go
go
ahead
ahead
and
and
add
add
some
some
components
components
to
to
it.
it
One
one
of
of
my
my
favorite
favorite
things
things
about
about
the
the
Console
console
tool
tool
is
is
that
that
it
it
will
will
automatically
automatically
detect
detect
this
this
module,
module
so
so
now
now
we
we
can
can
add
add
components
components
to
to
it
it
easily
easily
just
just
by
by
clicking
clicking
that
that
module
module
in
in
the
the
UI.
ui
Typing
typing
out
out
the
the
path
path
to
to
a
a
module
module
from
from
the
the
command
command
line
line
is
is
pretty
pretty
tedious
tedious
and
and
error
error
prone,
prone
so
so
this
this
UI
ui
just
just
makes
makes
your
your
life
life
a
a
lot
lot
easier
easier
in
in
that
that
regard.
regard
Then
then
just
just
for
for
fun
fun
we'll
we'll
go
go
ahead
ahead
and
and
set
set
some
some
random
random
optional
optional
fields
fields
and
and
you
you
can
can
see
see
the
the
command
command
below
below
gets
gets
really
really
long.
long
The
the
CLI
cli
command
command
is
is
probably
probably
like
like
200
200
characters
characters
which
which
is
is
not
not
something
something
that
that
you
you
wanna
wanna
be
be
typing
typing
out
out
by
by
hand.
hand
If
if
we
we
go
go
ahead
ahead
and
and
click
click
generate,
generate
you'll
you'll
see
see
that
that
component
component
gets
gets
added
added
to
to
our
our
shared
shared
module
module
with
with
all
all
the
the
various
various
options
options
that
that
we
we
selected.
selected
Good.
good
The
the
Console
console
can
can
also
also
run
run
your
your
npm
npm
scripts.
scripts
If
if
you
you
look
look
over
over
here
here
on
on
the
the
right,
right
I'm
i'm
creating
creating
my
my
own
own
custom
custom
script
script
that
that
just
just
says
says
say
say
hello,
hello
And
and
we'll
we'll
just
just
have
have
it
it
echo
echo
my
my
name
name
back.
back
Then
then
if
if
you
you
watch
watch
over
over
on
on
the
the
left
left
side,
side
as
as
soon
soon
as
as
I
i
create
create
it,
it
it
it
shows
shows
up
up
in
in
my
my
package
package
JSON
json
scripts
scripts
here
here
in
in
the
the
Angular
angular
console.
console
Then
then
we
we
can
can
just
just
go
go
ahead
ahead
and
and
click
click
Run
run
and
and
it
it
echoes
echoes
my
my
name
name
back
back
as
as
expected.
expected
Now
now
there's
there's
one
one
more
more
thing
thing
in
in
the
the
Console
console
I
i
wanna
wanna
show
show
you
you
that
that
I
i
think
think
is
is
Extremely
extremely
useful,
useful
but
but
will
will
become
become
even
even
more
more
useful
useful
in
in
the
the
future
future
as
as
more
more
third
third
party
party
schematics
schematics
are
are
created.
created
One
one
of
of
the
the
new
new
features
features
in
in
Angular
angular
6
6
was
was
the
the
ability
ability
to
to
use
use
ng
ng
add,
add
which
which
allows
allows
developers
developers
to
to
add
add
3rd
3rd
party
party
libraries
libraries
to
to
their
their
existing
existing
project
project
without
without
any
any
setup.
setup
If
if
you
you
click
click
on
on
the
the
puzzle
puzzle
piece,
piece
you'll
you'll
a
a
registry
registry
of
of
a
a
whole
whole
bunch
bunch
of
of
different
different
third
third
party
party
schematics
schematics
such
such
as
as
NGRX,
ngrx
NativeScript,
nativescript
Kendo
kendo
UI,
ui
and
and
a
a
bunch
bunch
of
of
others.
others
What
what
I
i
really
really
like
like
about
about
this
this
is
is
that
that
everything
everything
is
is
centralized
centralized
in
in
a
a
single
single
place,
place
so
so
I
i
don't
don't
have
have
to
to
go
go
searching
searching
on
on
Google
google
for
for
different
different
schematics
schematics
offered
offered
by
by
different
different
third
third
parties.
parties
So
so
a
a
simple
simple
example
example
of
of
using
using
ng
ng
add
add
would
would
be
be
if
if
you
you
want
want
to
to
add
add
ngrx
ngrx
store
store
to
to
your
your
app.
app
You
you
simply
simply
click
click
on
on
the
the
schematic,
schematic
run
run
it,
it
and
and
you'll
you'll
see
see
our
our
actual
actual
code
code
gets
gets
updated
updated
with
with
A
a
store
store
module
module
in
in
the
the
app
app
module
module
plus
plus
installs
installs
all
all
of
of
the
the
n
n
g
g
r
r
x
x
dependencies.
dependencies
A
a
growing
growing
area
area
in
in
the
the
Angular
angular
ecosystem
ecosystem
is
is
the
the
use
use
of
of
third
third
party
party
schematics
schematics
which
which
are
are
essentially
essentially
mods
mods
for
for
the
the
Angular
angular
CLI.
cli
A
a
good
good
example
example
would
would
be
be
NativeScript
nativescript
if
if
you're
you're
building
building
a
a
native
native
mobile
mobile
app.
app
You
you
can
can
generate
generate
components
components
that
that
are
are
suitable
suitable
for
for
iOS
ios
and
and
Android.
android
So
so
let's
let's
go
go
ahead
ahead
and
and
add
add
the
the
NativeScript
nativescript
schematics
schematics
to
to
our
our
project.
project
You'll
you'll
notice
notice
that
that
updates
updates
our
our
package
package
JSON
json
with
with
a
a
couple
couple
of
of
new
new
scripts
scripts
that
that
we
we
can
can
run
run
from
from
the
the
console,
console
but
but
it
it
also
also
gives
gives
us
us
a
a
whole
whole
another
another
set
set
of
of
generators
generators
specifically
specifically
for
for
NativeScript.
nativescript
If
if
you
you
click
click
on
on
the
the
code
code
icon,
icon
you'll
you'll
see
see
we
we
now
now
have
have
schematics
schematics
for
for
the
the
Angular
angular
CLI
cli
plus
plus
NativeScript.
nativescript
And
and
overall,
overall
they
they
look
look
similar,
similar
but
but
they
they
do
do
different
different
things.
things
So
so
let's
let's
go
go
ahead
ahead
and
and
generate
generate
a
a
component
component
for
for
NativeScript.
nativescript
You'll
you'll
notice
notice
a
a
handful
handful
of
of
different
different
options
options
based
based
on
on
the
the
platform
platform
that
that
you're
you're
targeting.
targeting
And
and
when
when
you
you
generate
generate
the
the
component
component
if
if
you
you
look
look
at
at
the
the
code
code
you'll
you'll
notice
notice
some
some
slight
slight
differences
differences
such
such
as
as
the
the
tns
tns
extension
extension
and
and
also
also
a
a
component
component
that
that
has
has
a
a
native
native
widget
widget
instead
instead
of
of
just
just
Plain
plain
HTML.
html
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
I'm
i'm
sure
sure
they'll
they'll
be
be
adding
adding
additional
additional
features
features
to
to
the
the
console
console
in
in
the
the
future,
future
but
but
it's
it's
already
already
a
a
great
great
productivity
productivity
booster
booster
in
in
its
its
current
current
state
state
so
so
you'll
you'll
probably
probably
see
see
me
me
using
using
it
it
on
on
future
future
videos.
videos
If
if
you're
you're
building
building
an
an
Angular
angular
Firebase
firebase
app
app
and
and
looking
looking
to
to
get
get
that
that
app
app
into
into
production
production
as
as
soon
soon
as
as
possible,
possible
consider
consider
signing
signing
up
up
for
for
a
a
Pro
pro
membership
membership
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
access
access
to
to
full
full
courses
courses
and
and
advanced
advanced
content
content
designed
designed
to
to
help
help
you
you
build
build
and
and
ship
ship
your
your
app
app
faster.
faster
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
talk
talk
to
to
you
you
soon.
soon
success
The speaker explains the benefits of the Angular CLI for developers of all skill levels, including productivity gains and the ability to create new projects. They also discuss the use of the Angular console and how it can be used for productivity gains and development of third-party schematic. The speaker also mentions the use of third-party schematic in the Angular CLI and encourages viewers to sign up for a Pro membership to help them build and ship their app faster.
Angular Console
I'd say I'm a pretty advanced Angular user, so when I first saw that there was a desktop based app for the Angular CLI, my initial thought was I probably really don't have any need for that. But, then I actually used it and was very surprised at the productivity gains I got out of it. Over the next few minutes, I'll take you through all the core features of the Angular console and explain why I think it's a powerful tool for developers of all skill levels. If you're new here like and subscribe and you can find the full write up at angularfirebase. Com. The Angular console is built by Narwhal and it's an Electron app that provides a graphical user interface for the Angular CLI. It's currently available on Mac and Windows, but there should be a Linux version available in the future. Go ahead and download it onto your system, open it, And then the first thing you'll do is just select a directory to create a new project or you can import an existing project. I'm going to go ahead and create a new project. The first thing I'll do is give it a name, and then we can select the set of schematics that we wanna use for this project. You have the option for NX here, but I'll just Be using the regular Angular CLI schematics for now. That's going to create a new project with the CLI, and then you'll see we get the output from the command line directly in the app here. When that's done, we can open up our project in the IDE. You can see I have a link here for Versus Code up in the top right. I'll go ahead and keep Versus Code opened up here on Right for the rest of the video. One of the reasons this app is really good for productivity is because the Angular CLI is just so complex. There's so many different options and generators, it's hard to keep track of everything. Clicking a set of buttons tends to be a lot faster than trying to memorize and type out every single command. For example, if we want to serve an app, we can just hit the serve button and then we have a set of options here plus a couple of default configurations. And everything is documented for you right here, so you know exactly what each knob does without having to go search through the documentation. Serving an app is pretty simple, but when you get into generators for components and modules, there are dozens of different options and it's impossible to memorize all of them. Let's see how quickly we can set up a shared module here. I'll go to the module generator and then we fill out the required field such as the name, the associated project, And then we'll also go ahead and import this module into our existing app module. And you'll also see in the Console it executes It's a dry run of the command before you click generate so you'll know if there are any issues before you actually run this command. When we click generate, it sets up the shared module as Expected in our App Directory. But right now it's empty, so let's go ahead and add some components to it. One of my favorite things about the Console tool is that it will automatically detect this module, so now we can add components to it easily just by clicking that module in the UI. Typing out the path to a module from the command line is pretty tedious and error prone, so this UI just makes your life a lot easier in that regard. Then just for fun we'll go ahead and set some random optional fields and you can see the command below gets really long. The CLI command is probably like 200 characters which is not something that you wanna be typing out by hand. If we go ahead and click generate, you'll see that component gets added to our shared module with all the various options that we selected. Good. The Console can also run your npm scripts. If you look over here on the right, I'm creating my own custom script that just says say hello, And we'll just have it echo my name back. Then if you watch over on the left side, as soon as I create it, it shows up in my package JSON scripts here in the Angular console. Then we can just go ahead and click Run and it echoes my name back as expected. Now there's one more thing in the Console I wanna show you that I think is Extremely useful, but will become even more useful in the future as more third party schematics are created. One of the new features in Angular 6 was the ability to use ng add, which allows developers to add 3rd party libraries to their existing project without any setup. If you click on the puzzle piece, you'll a registry of a whole bunch of different third party schematics such as NGRX, NativeScript, Kendo UI, and a bunch of others. What I really like about this is that everything is centralized in a single place, so I don't have to go searching on Google for different schematics offered by different third parties. So a simple example of using ng add would be if you want to add ngrx store to your app. You simply click on the schematic, run it, and you'll see our actual code gets updated with A store module in the app module plus installs all of the n g r x dependencies. A growing area in the Angular ecosystem is the use of third party schematics which are essentially mods for the Angular CLI. A good example would be NativeScript if you're building a native mobile app. You can generate components that are suitable for iOS and Android. So let's go ahead and add the NativeScript schematics to our project. You'll notice that updates our package JSON with a couple of new scripts that we can run from the console, but it also gives us a whole another set of generators specifically for NativeScript. If you click on the code icon, you'll see we now have schematics for the Angular CLI plus NativeScript. And overall, they look similar, but they do different things. So let's go ahead and generate a component for NativeScript. You'll notice a handful of different options based on the platform that you're targeting. And when you generate the component if you look at the code you'll notice some slight differences such as the tns extension and also a component that has a native widget instead of just Plain HTML. I'm gonna go ahead and wrap things up there. I'm sure they'll be adding additional features to the console in the future, but it's already a great productivity booster in its current state so you'll probably see me using it on future videos. If you're building an Angular Firebase app and looking to get that app into production as soon as possible, consider signing up for a Pro membership at angularfirebase.com. You'll get access to full courses and advanced content designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
The speaker explains the benefits of the Angular CLI for developers of all skill levels, including productivity gains and the ability to create new projects. They also discuss the use of the Angular console and how it can be used for productivity gains and development of third-party schematic. The speaker also mentions the use of third-party schematic in the Angular CLI and encourages viewers to sign up for a Pro membership to help them build and ship their app faster.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Angular Console 
        and a small summary : The speaker explains the benefits of the Angular CLI for developers of all skill levels, including productivity gains and the ability to create new projects. They also discuss the use of the Angular console and how it can be used for productivity gains and development of third-party schematic. The speaker also mentions the use of third-party schematic in the Angular CLI and encourages viewers to sign up for a Pro membership to help them build and ship their app faster.
        [/INST]
        
        Generate the video : I'd say I'm a pretty advanced Angular user, so when I first saw that there was a desktop based app for the Angular CLI, my initial thought was I probably really don't have any need for that. But, then I actually used it and was very surprised at the productivity gains I got out of it. Over the next few minutes, I'll take you through all the core features of the Angular console and explain why I think it's a powerful tool for developers of all skill levels. If you're new here like and subscribe and you can find the full write up at angularfirebase. Com. The Angular console is built by Narwhal and it's an Electron app that provides a graphical user interface for the Angular CLI. It's currently available on Mac and Windows, but there should be a Linux version available in the future. Go ahead and download it onto your system, open it, And then the first thing you'll do is just select a directory to create a new project or you can import an existing project. I'm going to go ahead and create a new project. The first thing I'll do is give it a name, and then we can select the set of schematics that we wanna use for this project. You have the option for NX here, but I'll just Be using the regular Angular CLI schematics for now. That's going to create a new project with the CLI, and then you'll see we get the output from the command line directly in the app here. When that's done, we can open up our project in the IDE. You can see I have a link here for Versus Code up in the top right. I'll go ahead and keep Versus Code opened up here on Right for the rest of the video. One of the reasons this app is really good for productivity is because the Angular CLI is just so complex. There's so many different options and generators, it's hard to keep track of everything. Clicking a set of buttons tends to be a lot faster than trying to memorize and type out every single command. For example, if we want to serve an app, we can just hit the serve button and then we have a set of options here plus a couple of default configurations. And everything is documented for you right here, so you know exactly what each knob does without having to go search through the documentation. Serving an app is pretty simple, but when you get into generators for components and modules, there are dozens of different options and it's impossible to memorize all of them. Let's see how quickly we can set up a shared module here. I'll go to the module generator and then we fill out the required field such as the name, the associated project, And then we'll also go ahead and import this module into our existing app module. And you'll also see in the Console it executes It's a dry run of the command before you click generate so you'll know if there are any issues before you actually run this command. When we click generate, it sets up the shared module as Expected in our App Directory. But right now it's empty, so let's go ahead and add some components to it. One of my favorite things about the Console tool is that it will automatically detect this module, so now we can add components to it easily just by clicking that module in the UI. Typing out the path to a module from the command line is pretty tedious and error prone, so this UI just makes your life a lot easier in that regard. Then just for fun we'll go ahead and set some random optional fields and you can see the command below gets really long. The CLI command is probably like 200 characters which is not something that you wanna be typing out by hand. If we go ahead and click generate, you'll see that component gets added to our shared module with all the various options that we selected. Good. The Console can also run your npm scripts. If you look over here on the right, I'm creating my own custom script that just says say hello, And we'll just have it echo my name back. Then if you watch over on the left side, as soon as I create it, it shows up in my package JSON scripts here in the Angular console. Then we can just go ahead and click Run and it echoes my name back as expected. Now there's one more thing in the Console I wanna show you that I think is Extremely useful, but will become even more useful in the future as more third party schematics are created. One of the new features in Angular 6 was the ability to use ng add, which allows developers to add 3rd party libraries to their existing project without any setup. If you click on the puzzle piece, you'll a registry of a whole bunch of different third party schematics such as NGRX, NativeScript, Kendo UI, and a bunch of others. What I really like about this is that everything is centralized in a single place, so I don't have to go searching on Google for different schematics offered by different third parties. So a simple example of using ng add would be if you want to add ngrx store to your app. You simply click on the schematic, run it, and you'll see our actual code gets updated with A store module in the app module plus installs all of the n g r x dependencies. A growing area in the Angular ecosystem is the use of third party schematics which are essentially mods for the Angular CLI. A good example would be NativeScript if you're building a native mobile app. You can generate components that are suitable for iOS and Android. So let's go ahead and add the NativeScript schematics to our project. You'll notice that updates our package JSON with a couple of new scripts that we can run from the console, but it also gives us a whole another set of generators specifically for NativeScript. If you click on the code icon, you'll see we now have schematics for the Angular CLI plus NativeScript. And overall, they look similar, but they do different things. So let's go ahead and generate a component for NativeScript. You'll notice a handful of different options based on the platform that you're targeting. And when you generate the component if you look at the code you'll notice some slight differences such as the tns extension and also a component that has a native widget instead of just Plain HTML. I'm gonna go ahead and wrap things up there. I'm sure they'll be adding additional features to the console in the future, but it's already a great productivity booster in its current state so you'll probably see me using it on future videos. If you're building an Angular Firebase app and looking to get that app into production as soon as possible, consider signing up for a Pro membership at angularfirebase.com. You'll get access to full courses and advanced content designed to help you build and ship your app faster. Thanks for watching, and I'll talk to you soon.
        