Angular root injector Video Lecture | Angular 2 tutorial - Front-End Programming

this is part 36 of angular 2 tutorial in
this video we'll discuss the angular
root injector in our previous video we
discussed in angular 2 we have one root
injector at the application level plus
an injector at every component level to
register our service with the routine
jacta we use the providers property of
@anjghie module decorator and to
register our service with an injector at
a specific component level we use the
providers property of add component
decorator of that specific component
class this is the same project that we
have been working with so far in this
video series at the moment within our
application we have just one module
which is the root application module and
that is present in this file app dot
module dot ES and here is the class and
this class is decorated with at ng
module decorator and then we're using
the providers property of this decorator
to register our user preferences service
with this route injector now the bottom
line to keep in mind here is at the
moment within our application we have
just one module the root module which is
in app dot module dot TS in a real world
application it is very common to have
more than one module for example if we
are building an HR management system in
addition to the root application module
we may have employee module Department
module admin module reporting module etc
at the moment if you look at our
application using the providers property
of @ng module decorator of the root
application module to register our user
preferences service with the root
injector now we can use the attendee
module decorator of any of these feature
modules also to register our service
with a root injector let's actually
prove that at the moment within our
application we don't have any feature
modules so let's create a simple test
module and then use that test modules at
ng module decorator to register our
service with this root injector
first let's remove user preferences
service registration from the root
application module by removing this user
preference service from the providers
property let's see what changes and then
reload of web page now we know the
application will fail that's because the
angular injectors does not know about
our user preferences service so the
application fails with that famous error
no provider for user preferences service
and here is that error now let's create
a test module so we can use that test
modules at ng module decorator to
register by user preferences service
with the angular root injector so let's
right click on the app folder and add a
new type script file and let's me more
module file test dot module dot tears
and here is the code to create a module
if you look at these three lines of code
they are very similar to how we create a
component we first create a class and
then we import ng module from angular
core and then to turn this class into an
angular module we decorate it with at ng
module decorator if you recollect the
steps for creating a component they are
very similar you create a class instead
of importing ng module you import
component from angular core and decorate
that class with add component decorator
to turn that class into an angular
component so as you can see angular
provides consistent set of patterns for
creating components modules directives
and pipes next let's use the providers
property of attention module decorator
of this test module to register of a
user preferences service with the
angular root injector so first let's
import user preferences service and then
we pass an object to at ng module
decorator and then set the providers
property like this and to the array we
pass our service which is user
preferences service so let's save all
these changes and reload this webpage
notice the application is still not
working and if you look at the error
message is the same error no provider
for user preferences service that's
because at the moment we have just
created our test module but we are not
using it anywhere so to use it let's
import it in our root application module
so this is a root module just like how
we have imported other angular system
modules like browser module forms module
we need to import our test module so
let's include the required import
statement and then just like how we have
made this Angliss system modules part of
inputs array we also need to make our
test module part of this imports array
so let's include our test module right
here and then save these changes and
reload the web page again our home
component is working we don't have any
errors in the console now let's navigate
to the Employee List component and even
this is working as expected so this
proves that we can use any module
provider property to register a service
with the angular root injector that
module can be a root module or any of
the future modules thank you for
listening and have a great day