Learn how to make your import statements more manageable in Angular by using TypeScript path mapping. https://angularfirebase.com/lessons/shorten-typescript-imports-in-an-angular-project/

TS Path Mapping: https://www.typescriptlang.org/docs/handbook/module-resolution.html
2024-02-04T07:49:44.846Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
7bc5a0f8-9d38-433a-b63f-b85e167efb11
bbac859851e705d4fa8fdcf46104a49c620622352c305a1a29f3eda1b8415c11
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
I need to start this video off on a sad note.
On New Year's Day, I lost my father unexpectedly at the age of 50 7.
He lived a good full life but I just want to remind everybody to enjoy the time you have with your family because it can end before you know it.
I'd like to say thank you to everybody who supports this project and I look forward to bringing you a whole bunch of awesome resources in 2018.
To kick things off, I'm going to give you a quick Angular productivity booster to eliminate long relative paths that look like this to a single global namespace.
This means you can give all of your Each module is a specific namespace, and you never really have to worry about relative paths within your project.
To demonstrate this, I'm starting off in a brand new Angular 5 up, and I'm going to generate a couple of NG modules.
First one being core, second one being shared.
From there, I'm going to generate a service inside of the core module.
We'll just go ahead and call this the auth service.
Then I'm going to generate a component, but for no reason at all, I'm going to nest this deeply within the file structure of the project.
Let's go ahead and call it the deeply nested user login component.
Then if we look at the file structure on the left, you can see the actual component file itself is nested about 6 levels deep within our project.
This isn't really a problem unless we need to import this file in a different file that's nested higher up.
So let's try this by importing the service into the component.
Just a quick side tip here, whenever you import a file in TypeScript, start with empty parenthesis, then type out the path so you can use TypeScript autocomplete from your IDE and save yourself a few extra characters of typing.
At this point, we're going to have to traverse up the file structure.
So we do dot dot slash a whole bunch of times until we finally get to our core module.
Then we go in there and grab the auth service.
If you're an Angular developer, you probably get really annoyed if you have to do this frequently in a large complex file structure.
It also becomes a problem if you change the file location because you'll have to go back and rewrite each individual path that references this module.
And it's also a problem when the imports are reversed.
If we were to import the component in the service, we'd have to write out the entire deeply nested path.
Fortunately, TypeScript gives us an easy solution to eliminate this problem altogether.
Before I show you the actual solution, I wanna show you the end result.
So instead of the dot dot slash path that we have here, we're going to namespace the auth service so that we can reference it from anywhere in the project without dealing with the relative path.
In this case, it's our core module, so we'll namespace it with at core.
An added benefit is that the import statement looks exactly the same throughout your project, so you can easily do a find and replace if you change the name or location of the imported file.
We can follow the same pattern for our component, but this time we'll namespace it with shared instead of core.
The only thing you have to watch out for is named collisions, So you wouldn't wanna namespace anything with Angular or NGRX or any other common mono repo out there.
To make this possible, all we have to do is make some updates to our tsconfig in the root of our Angular app.
Inside of the compiler options object, We're going to first set a base URL, which will point to the source directory.
From there, we'll use TypeScript path mapping to give paths relative to this base URL, their own custom namespace.
The at symbol's completely optional, but I think it helps make it stand out from regular imports.
Each namespace will point to a directory within your project.
So in this case, we're just pointing to the core module, then we'll do the same exact thing with the shared module.
But Since we have that deeply nested in there, we'll use those deeply nested paths as well.
And while we're at it, another really useful path namespace is your Angular environment.
The environment paths are always really long so we can just give that its namespace and never have to worry about the relative path again.
And again, you wanna be careful of name collisions.
So if you wanna be extra careful, prefix everything with the name of your app.
That's it for my short imports video.
If this If this video helped you, please like and subscribe.
And if you're serious about building apps with this stack, consider becoming a pro member at angularfirebase calm.
You'll get a free copy of my book as well as exclusive access to my upcoming full stack Stripe payments demo.
Thanks for and I'll see you soon.

Speaker 0: I need to start this video off on a sad note. On New Year's Day, I lost my father unexpectedly at the age of 50 7. He lived a good full life but I just want to remind everybody to enjoy the time you have with your family because it can end before you know it. I'd like to say thank you to everybody who supports this project and I look forward to bringing you a whole bunch of awesome resources in 2018. To kick things off, I'm going to give you a quick Angular productivity booster to eliminate long relative paths that look like this to a single global namespace.

This means you can give all of your Each module is a specific namespace, and you never really have to worry about relative paths within your project. To demonstrate this, I'm starting off in a brand new Angular 5 up, and I'm going to generate a couple of NG modules. First one being core, second one being shared. From there, I'm going to generate a service inside of the core module. We'll just go ahead and call this the auth service.

Then I'm going to generate a component, but for no reason at all, I'm going to nest this deeply within the file structure of the project. Let's go ahead and call it the deeply nested user login component. Then if we look at the file structure on the left, you can see the actual component file itself is nested about 6 levels deep within our project. This isn't really a problem unless we need to import this file in a different file that's nested higher up. So let's try this by importing the service into the component.

Just a quick side tip here, whenever you import a file in TypeScript, start with empty parenthesis, then type out the path so you can use TypeScript autocomplete from your IDE and save yourself a few extra characters of typing. At this point, we're going to have to traverse up the file structure. So we do dot dot slash a whole bunch of times until we finally get to our core module. Then we go in there and grab the auth service. If you're an Angular developer, you probably get really annoyed if you have to do this frequently in a large complex file structure.

It also becomes a problem if you change the file location because you'll have to go back and rewrite each individual path that references this module. And it's also a problem when the imports are reversed. If we were to import the component in the service, we'd have to write out the entire deeply nested path. Fortunately, TypeScript gives us an easy solution to eliminate this problem altogether. Before I show you the actual solution, I wanna show you the end result.

So instead of the dot dot slash path that we have here, we're going to namespace the auth service so that we can reference it from anywhere in the project without dealing with the relative path. In this case, it's our core module, so we'll namespace it with at core. An added benefit is that the import statement looks exactly the same throughout your project, so you can easily do a find and replace if you change the name or location of the imported file. We can follow the same pattern for our component, but this time we'll namespace it with shared instead of core. The only thing you have to watch out for is named collisions, So you wouldn't wanna namespace anything with Angular or NGRX or any other common mono repo out there.

To make this possible, all we have to do is make some updates to our tsconfig in the root of our Angular app. Inside of the compiler options object, We're going to first set a base URL, which will point to the source directory. From there, we'll use TypeScript path mapping to give paths relative to this base URL, their own custom namespace. The at symbol's completely optional, but I think it helps make it stand out from regular imports. Each namespace will point to a directory within your project.

So in this case, we're just pointing to the core module, then we'll do the same exact thing with the shared module. But Since we have that deeply nested in there, we'll use those deeply nested paths as well. And while we're at it, another really useful path namespace is your Angular environment. The environment paths are always really long so we can just give that its namespace and never have to worry about the relative path again. And again, you wanna be careful of name collisions.

So if you wanna be extra careful, prefix everything with the name of your app. That's it for my short imports video. If this If this video helped you, please like and subscribe. And if you're serious about building apps with this stack, consider becoming a pro member at angularfirebase calm. You'll get a free copy of my book as well as exclusive access to my upcoming full stack Stripe payments demo.

Thanks for and I'll see you soon.
I need to start this video off on a sad note. On New Year's Day, I lost my father unexpectedly at the age of 50 7. He lived a good full life but I just want to remind everybody to enjoy the time you have with your family because it can end before you know it.
youtube
I'd like to say thank you to everybody who supports this project and I look forward to bringing you a whole bunch of awesome resources in 2018. To kick things off, I'm going to give you a quick Angular productivity booster to eliminate long relative paths that look like this to a single global namespace.
technology
This means you can give all of your Each module is a specific namespace, and you never really have to worry about relative paths within your project. To demonstrate this, I'm starting off in a brand new Angular 5 up, and I'm going to generate a couple of NG modules. First one being core, second one being shared.
From there, I'm going to generate a service inside of the core module. We'll just go ahead and call this the auth service. Then I'm going to generate a component, but for no reason at all, I'm going to nest this deeply within the file structure of the project. Let's go ahead and call it the deeply nested user login component.
software development
Then if we look at the file structure on the left, you can see the actual component file itself is nested about 6 levels deep within our project. This isn't really a problem unless we need to import this file in a different file that's nested higher up. So let's try this by importing the service into the component. Just a quick side tip here, whenever you import a file in TypeScript, start with empty parenthesis, then type out the path so you can use TypeScript autocomplete from your IDE and save yourself a few extra characters of typing. At this point, we're going to have to traverse up the file structure. So we do dot dot slash a whole bunch of times until we finally get to our core module. Then we go in there and grab the auth service. If you're an Angular developer, you probably get really annoyed if you have to do this frequently in a large complex file structure. It also becomes a problem if you change the file location because you'll have to go back and rewrite each individual path that references this module.
And it's also a problem when the imports are reversed. If we were to import the component in the service, we'd have to write out the entire deeply nested path. Fortunately, TypeScript gives us an easy solution to eliminate this problem altogether. Before I show you the actual solution, I wanna show you the end result.
shipping
So instead of the dot dot slash path that we have here, we're going to namespace the auth service so that we can reference it from anywhere in the project without dealing with the relative path. In this case, it's our core module, so we'll namespace it with at core. An added benefit is that the import statement looks exactly the same throughout your project, so you can easily do a find and replace if you change the name or location of the imported file. We can follow the same pattern for our component, but this time we'll namespace it with shared instead of core. The only thing you have to watch out for is named collisions, So you wouldn't wanna namespace anything with Angular or NGRX or any other common mono repo out there. To make this possible, all we have to do is make some updates to our tsconfig in the root of our Angular app. Inside of the compiler options object, We're going to first set a base URL, which will point to the source directory. From there, we'll use TypeScript path mapping to give paths relative to this base URL, their own custom namespace. The at symbol's completely optional, but I think it helps make it stand out from regular imports. Each namespace will point to a directory within your project. So in this case, we're just pointing to the core module, then we'll do the same exact thing with the shared module. But Since we have that deeply nested in there, we'll use those deeply nested paths as well. And while we're at it, another really useful path namespace is your Angular environment. The environment paths are always really long so we can just give that its namespace and never have to worry about the relative path again.
And again, you wanna be careful of name collisions. So if you wanna be extra careful, prefix everything with the name of your app. That's it for my short imports video. If this If this video helped you, please like and subscribe. And if you're serious about building apps with this stack, consider becoming a pro member at angularfirebase calm. You'll get a free copy of my book as well as exclusive access to my upcoming full stack Stripe payments demo.
youtube
software
Thanks for and I'll see you soon.
I need to start this video off on a sad note. On New Year's Day, I lost my father unexpectedly at the age of 50 7. He lived a good full life but I just want to remind everybody to enjoy the time you have with your family because it can end before you know it. I'd like to say thank you to everybody who supports this project and I look forward to bringing you a whole bunch of awesome resources in 2018. To kick things off, I'm going to give you a quick Angular productivity booster to eliminate long relative paths that look like this to a single global namespace. This means you can give all of your Each module is a specific namespace, and you never really have to worry about relative paths within your project. To demonstrate this, I'm starting off in a brand new Angular 5 up, and I'm going to generate a couple of NG modules. First one being core, second one being shared. From there, I'm going to generate a service inside of the core module. We'll just go ahead and call this the auth service. Then I'm going to generate a component, but for no reason at all, I'm going to nest this deeply within the file structure of the project. Let's go ahead and call it the deeply nested user login component. Then if we look at the file structure on the left, you can see the actual component file itself is nested about 6 levels deep within our project. This isn't really a problem unless we need to import this file in a different file that's nested higher up. So let's try this by importing the service into the component. Just a quick side tip here, whenever you import a file in TypeScript, start with empty parenthesis, then type out the path so you can use TypeScript autocomplete from your IDE and save yourself a few extra characters of typing. At this point, we're going to have to traverse up the file structure. So we do dot dot slash a whole bunch of times until we finally get to our core module. Then we go in there and grab the auth service. If you're an Angular developer, you probably get really annoyed if you have to do this frequently in a large complex file structure. It also becomes a problem if you change the file location because you'll have to go back and rewrite each individual path that references this module. And it's also a problem when the imports are reversed. If we were to import the component in the service, we'd have to write out the entire deeply nested path. Fortunately, TypeScript gives us an easy solution to eliminate this problem altogether. Before I show you the actual solution, I wanna show you the end result. So instead of the dot dot slash path that we have here, we're going to namespace the auth service so that we can reference it from anywhere in the project without dealing with the relative path. In this case, it's our core module, so we'll namespace it with at core. An added benefit is that the import statement looks exactly the same throughout your project, so you can easily do a find and replace if you change the name or location of the imported file. We can follow the same pattern for our component, but this time we'll namespace it with shared instead of core. The only thing you have to watch out for is named collisions, So you wouldn't wanna namespace anything with Angular or NGRX or any other common mono repo out there. To make this possible, all we have to do is make some updates to our tsconfig in the root of our Angular app. Inside of the compiler options object, We're going to first set a base URL, which will point to the source directory. From there, we'll use TypeScript path mapping to give paths relative to this base URL, their own custom namespace. The at symbol's completely optional, but I think it helps make it stand out from regular imports. Each namespace will point to a directory within your project. So in this case, we're just pointing to the core module, then we'll do the same exact thing with the shared module. But Since we have that deeply nested in there, we'll use those deeply nested paths as well. And while we're at it, another really useful path namespace is your Angular environment. The environment paths are always really long so we can just give that its namespace and never have to worry about the relative path again. And again, you wanna be careful of name collisions. So if you wanna be extra careful, prefix everything with the name of your app. That's it for my short imports video. If this If this video helped you, please like and subscribe. And if you're serious about building apps with this stack, consider becoming a pro member at angularfirebase calm. You'll get a free copy of my book as well as exclusive access to my upcoming full stack Stripe payments demo. Thanks for and I'll see you soon.
I
i
need
need
to
to
start
start
this
this
video
video
off
off
on
on
a
a
sad
sad
note.
note
On
on
New
new
Year's
year's
Day,
day
I
i
lost
lost
my
my
father
father
unexpectedly
unexpectedly
at
at
the
the
age
age
of
of
50
50
7.
7
He
he
lived
lived
a
a
good
good
full
full
life
life
but
but
I
i
just
just
want
want
to
to
remind
remind
everybody
everybody
to
to
enjoy
enjoy
the
the
time
time
you
you
have
have
with
with
your
your
family
family
because
because
it
it
can
can
end
end
before
before
you
you
know
know
it.
it
I'd
i'd
like
like
to
to
say
say
thank
thank
you
you
to
to
everybody
everybody
who
who
supports
supports
this
this
project
project
and
and
I
i
look
look
forward
forward
to
to
bringing
bringing
you
you
a
a
whole
whole
bunch
bunch
of
of
awesome
awesome
resources
resources
in
in
2018.
2018
To
to
kick
kick
things
things
off,
off
I'm
i'm
going
going
to
to
give
give
you
you
a
a
quick
quick
Angular
angular
productivity
productivity
booster
booster
to
to
eliminate
eliminate
long
long
relative
relative
paths
paths
that
that
look
look
like
like
this
this
to
to
a
a
single
single
global
global
namespace.
namespace
This
this
means
means
you
you
can
can
give
give
all
all
of
of
your
your
Each
each
module
module
is
is
a
a
specific
specific
namespace,
namespace
and
and
you
you
never
never
really
really
have
have
to
to
worry
worry
about
about
relative
relative
paths
paths
within
within
your
your
project.
project
To
to
demonstrate
demonstrate
this,
this
I'm
i'm
starting
starting
off
off
in
in
a
a
brand
brand
new
new
Angular
angular
5
5
up,
up
and
and
I'm
i'm
going
going
to
to
generate
generate
a
a
couple
couple
of
of
NG
ng
modules.
modules
First
first
one
one
being
being
core,
core
second
second
one
one
being
being
shared.
shared
From
from
there,
there
I'm
i'm
going
going
to
to
generate
generate
a
a
service
service
inside
inside
of
of
the
the
core
core
module.
module
We'll
we'll
just
just
go
go
ahead
ahead
and
and
call
call
this
this
the
the
auth
auth
service.
service
Then
then
I'm
i'm
going
going
to
to
generate
generate
a
a
component,
component
but
but
for
for
no
no
reason
reason
at
at
all,
all
I'm
i'm
going
going
to
to
nest
nest
this
this
deeply
deeply
within
within
the
the
file
file
structure
structure
of
of
the
the
project.
project
Let's
let's
go
go
ahead
ahead
and
and
call
call
it
it
the
the
deeply
deeply
nested
nested
user
user
login
login
component.
component
Then
then
if
if
we
we
look
look
at
at
the
the
file
file
structure
structure
on
on
the
the
left,
left
you
you
can
can
see
see
the
the
actual
actual
component
component
file
file
itself
itself
is
is
nested
nested
about
about
6
6
levels
levels
deep
deep
within
within
our
our
project.
project
This
this
isn't
isn't
really
really
a
a
problem
problem
unless
unless
we
we
need
need
to
to
import
import
this
this
file
file
in
in
a
a
different
different
file
file
that's
that's
nested
nested
higher
higher
up.
up
So
so
let's
let's
try
try
this
this
by
by
importing
importing
the
the
service
service
into
into
the
the
component.
component
Just
just
a
a
quick
quick
side
side
tip
tip
here,
here
whenever
whenever
you
you
import
import
a
a
file
file
in
in
TypeScript,
typescript
start
start
with
with
empty
empty
parenthesis,
parenthesis
then
then
type
type
out
out
the
the
path
path
so
so
you
you
can
can
use
use
TypeScript
typescript
autocomplete
autocomplete
from
from
your
your
IDE
ide
and
and
save
save
yourself
yourself
a
a
few
few
extra
extra
characters
characters
of
of
typing.
typing
At
at
this
this
point,
point
we're
we're
going
going
to
to
have
have
to
to
traverse
traverse
up
up
the
the
file
file
structure.
structure
So
so
we
we
do
do
dot
dot
dot
dot
slash
slash
a
a
whole
whole
bunch
bunch
of
of
times
times
until
until
we
we
finally
finally
get
get
to
to
our
our
core
core
module.
module
Then
then
we
we
go
go
in
in
there
there
and
and
grab
grab
the
the
auth
auth
service.
service
If
if
you're
you're
an
an
Angular
angular
developer,
developer
you
you
probably
probably
get
get
really
really
annoyed
annoyed
if
if
you
you
have
have
to
to
do
do
this
this
frequently
frequently
in
in
a
a
large
large
complex
complex
file
file
structure.
structure
It
it
also
also
becomes
becomes
a
a
problem
problem
if
if
you
you
change
change
the
the
file
file
location
location
because
because
you'll
you'll
have
have
to
to
go
go
back
back
and
and
rewrite
rewrite
each
each
individual
individual
path
path
that
that
references
references
this
this
module.
module
And
and
it's
it's
also
also
a
a
problem
problem
when
when
the
the
imports
imports
are
are
reversed.
reversed
If
if
we
we
were
were
to
to
import
import
the
the
component
component
in
in
the
the
service,
service
we'd
we'd
have
have
to
to
write
write
out
out
the
the
entire
entire
deeply
deeply
nested
nested
path.
path
Fortunately,
fortunately
TypeScript
typescript
gives
gives
us
us
an
an
easy
easy
solution
solution
to
to
eliminate
eliminate
this
this
problem
problem
altogether.
altogether
Before
before
I
i
show
show
you
you
the
the
actual
actual
solution,
solution
I
i
wanna
wanna
show
show
you
you
the
the
end
end
result.
result
So
so
instead
instead
of
of
the
the
dot
dot
dot
dot
slash
slash
path
path
that
that
we
we
have
have
here,
here
we're
we're
going
going
to
to
namespace
namespace
the
the
auth
auth
service
service
so
so
that
that
we
we
can
can
reference
reference
it
it
from
from
anywhere
anywhere
in
in
the
the
project
project
without
without
dealing
dealing
with
with
the
the
relative
relative
path.
path
In
in
this
this
case,
case
it's
it's
our
our
core
core
module,
module
so
so
we'll
we'll
namespace
namespace
it
it
with
with
at
at
core.
core
An
an
added
added
benefit
benefit
is
is
that
that
the
the
import
import
statement
statement
looks
looks
exactly
exactly
the
the
same
same
throughout
throughout
your
your
project,
project
so
so
you
you
can
can
easily
easily
do
do
a
a
find
find
and
and
replace
replace
if
if
you
you
change
change
the
the
name
name
or
or
location
location
of
of
the
the
imported
imported
file.
file
We
we
can
can
follow
follow
the
the
same
same
pattern
pattern
for
for
our
our
component,
component
but
but
this
this
time
time
we'll
we'll
namespace
namespace
it
it
with
with
shared
shared
instead
instead
of
of
core.
core
The
the
only
only
thing
thing
you
you
have
have
to
to
watch
watch
out
out
for
for
is
is
named
named
collisions,
collisions
So
so
you
you
wouldn't
wouldn't
wanna
wanna
namespace
namespace
anything
anything
with
with
Angular
angular
or
or
NGRX
ngrx
or
or
any
any
other
other
common
common
mono
mono
repo
repo
out
out
there.
there
To
to
make
make
this
this
possible,
possible
all
all
we
we
have
have
to
to
do
do
is
is
make
make
some
some
updates
updates
to
to
our
our
tsconfig
tsconfig
in
in
the
the
root
root
of
of
our
our
Angular
angular
app.
app
Inside
inside
of
of
the
the
compiler
compiler
options
options
object,
object
We're
we're
going
going
to
to
first
first
set
set
a
a
base
base
URL,
url
which
which
will
will
point
point
to
to
the
the
source
source
directory.
directory
From
from
there,
there
we'll
we'll
use
use
TypeScript
typescript
path
path
mapping
mapping
to
to
give
give
paths
paths
relative
relative
to
to
this
this
base
base
URL,
url
their
their
own
own
custom
custom
namespace.
namespace
The
the
at
at
symbol's
symbol's
completely
completely
optional,
optional
but
but
I
i
think
think
it
it
helps
helps
make
make
it
it
stand
stand
out
out
from
from
regular
regular
imports.
imports
Each
each
namespace
namespace
will
will
point
point
to
to
a
a
directory
directory
within
within
your
your
project.
project
So
so
in
in
this
this
case,
case
we're
we're
just
just
pointing
pointing
to
to
the
the
core
core
module,
module
then
then
we'll
we'll
do
do
the
the
same
same
exact
exact
thing
thing
with
with
the
the
shared
shared
module.
module
But
but
Since
since
we
we
have
have
that
that
deeply
deeply
nested
nested
in
in
there,
there
we'll
we'll
use
use
those
those
deeply
deeply
nested
nested
paths
paths
as
as
well.
well
And
and
while
while
we're
we're
at
at
it,
it
another
another
really
really
useful
useful
path
path
namespace
namespace
is
is
your
your
Angular
angular
environment.
environment
The
the
environment
environment
paths
paths
are
are
always
always
really
really
long
long
so
so
we
we
can
can
just
just
give
give
that
that
its
its
namespace
namespace
and
and
never
never
have
have
to
to
worry
worry
about
about
the
the
relative
relative
path
path
again.
again
And
and
again,
again
you
you
wanna
wanna
be
be
careful
careful
of
of
name
name
collisions.
collisions
So
so
if
if
you
you
wanna
wanna
be
be
extra
extra
careful,
careful
prefix
prefix
everything
everything
with
with
the
the
name
name
of
of
your
your
app.
app
That's
that's
it
it
for
for
my
my
short
short
imports
imports
video.
video
If
if
this
this
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you're
you're
serious
serious
about
about
building
building
apps
apps
with
with
this
this
stack,
stack
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase
angularfirebase
calm.
calm
You'll
you'll
get
get
a
a
free
free
copy
copy
of
of
my
my
book
book
as
as
well
well
as
as
exclusive
exclusive
access
access
to
to
my
my
upcoming
upcoming
full
full
stack
stack
Stripe
stripe
payments
payments
demo.
demo
Thanks
thanks
for
for
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The speaker discusses a recent loss of their father and thanks their support for the project. They then give a quick tutorial on creating a new Angular productivity booster, including creating a login component and importting a file into a file structure. They also explain how to use the authorization statement and the environment paths for import purposes. The speaker invites viewers to like and subscribe and provides a link to their book and Stripe payments demo.
Short Imports with TypeScript Path Mapping
I need to start this video off on a sad note. On New Year's Day, I lost my father unexpectedly at the age of 50 7. He lived a good full life but I just want to remind everybody to enjoy the time you have with your family because it can end before you know it. I'd like to say thank you to everybody who supports this project and I look forward to bringing you a whole bunch of awesome resources in 2018. To kick things off, I'm going to give you a quick Angular productivity booster to eliminate long relative paths that look like this to a single global namespace. This means you can give all of your Each module is a specific namespace, and you never really have to worry about relative paths within your project. To demonstrate this, I'm starting off in a brand new Angular 5 up, and I'm going to generate a couple of NG modules. First one being core, second one being shared. From there, I'm going to generate a service inside of the core module. We'll just go ahead and call this the auth service. Then I'm going to generate a component, but for no reason at all, I'm going to nest this deeply within the file structure of the project. Let's go ahead and call it the deeply nested user login component. Then if we look at the file structure on the left, you can see the actual component file itself is nested about 6 levels deep within our project. This isn't really a problem unless we need to import this file in a different file that's nested higher up. So let's try this by importing the service into the component. Just a quick side tip here, whenever you import a file in TypeScript, start with empty parenthesis, then type out the path so you can use TypeScript autocomplete from your IDE and save yourself a few extra characters of typing. At this point, we're going to have to traverse up the file structure. So we do dot dot slash a whole bunch of times until we finally get to our core module. Then we go in there and grab the auth service. If you're an Angular developer, you probably get really annoyed if you have to do this frequently in a large complex file structure. It also becomes a problem if you change the file location because you'll have to go back and rewrite each individual path that references this module. And it's also a problem when the imports are reversed. If we were to import the component in the service, we'd have to write out the entire deeply nested path. Fortunately, TypeScript gives us an easy solution to eliminate this problem altogether. Before I show you the actual solution, I wanna show you the end result. So instead of the dot dot slash path that we have here, we're going to namespace the auth service so that we can reference it from anywhere in the project without dealing with the relative path. In this case, it's our core module, so we'll namespace it with at core. An added benefit is that the import statement looks exactly the same throughout your project, so you can easily do a find and replace if you change the name or location of the imported file. We can follow the same pattern for our component, but this time we'll namespace it with shared instead of core. The only thing you have to watch out for is named collisions, So you wouldn't wanna namespace anything with Angular or NGRX or any other common mono repo out there. To make this possible, all we have to do is make some updates to our tsconfig in the root of our Angular app. Inside of the compiler options object, We're going to first set a base URL, which will point to the source directory. From there, we'll use TypeScript path mapping to give paths relative to this base URL, their own custom namespace. The at symbol's completely optional, but I think it helps make it stand out from regular imports. Each namespace will point to a directory within your project. So in this case, we're just pointing to the core module, then we'll do the same exact thing with the shared module. But Since we have that deeply nested in there, we'll use those deeply nested paths as well. And while we're at it, another really useful path namespace is your Angular environment. The environment paths are always really long so we can just give that its namespace and never have to worry about the relative path again. And again, you wanna be careful of name collisions. So if you wanna be extra careful, prefix everything with the name of your app. That's it for my short imports video. If this If this video helped you, please like and subscribe. And if you're serious about building apps with this stack, consider becoming a pro member at angularfirebase calm. You'll get a free copy of my book as well as exclusive access to my upcoming full stack Stripe payments demo. Thanks for and I'll see you soon.
The speaker discusses a recent loss of their father and thanks their support for the project. They then give a quick tutorial on creating a new Angular productivity booster, including creating a login component and importting a file into a file structure. They also explain how to use the authorization statement and the environment paths for import purposes. The speaker invites viewers to like and subscribe and provides a link to their book and Stripe payments demo.