Hello, everyone, and welcome back.
In this lesson, we are going to build from scratch our very own angular module, it's going to be the
courses module.
In order to do that, let's head over here to the terminal and let's stop the angular CLIA for a moment.
Now we are going to scaffold a new module by running the following command and generate module, and
then we are going to give it the name courses.
The module will be automatically named courses module.
Let's run this command and have a look here at the file that was generated.
So as you can see, this file is on the courses subfolder.
So if we open it up, we are going to see that.
We have here a couple of new files, the definition of the module and a test.
Let's not jump into the courses module and have a look here at its declaration.
So, as usual, we are using here the engie module decorator and so far we have not added any components,
directive's pipes or services here to our module.
So our declarations property is empty.
We have already imported here the common module.
The command module is going to contain the common directives, such as, for example, ENGY for NGF,
etc. Any feature module that you will ever write will need the Commons module for sure.
We did not include it here in our application module, but it's there.
It's a transitive dependency to the browser module, the browser module, as its dependency on the imports
property contains already the command module.
So that's why we didn't have to add it here in our application root module.
Our application route module is going to depend on the courses module, so let's import it's here at
the level of the imports property.
So now we need to start adding components and directives to the courses module.
Let's start by moving the cursor component and declare it as part of this module.
The first thing that we are going to do is we are going to move here, the cursor component folder into
the courses folder.
Now that we have done that, we are going to head over here to the courses module and in its declarations
we are going to have here the core squared component.
Now, this component is going to be part of the courses module.
This means that we no longer have to add it here in the declarations of our root module, it will be
implicitly added due to the dependency here with the courses module.
Let's do that for a couple more components and directives.
We want to move inside here to the courses folder, the course image component, and we are going to
remove it here from the module.
We are going to add it here at the level of the courses module.
Now let's do something similar, but for services instead of components.
So we are going to take here the courses service and we are also going to move it here inside the courses
folder.
Now, the courses services here, part of the courses module, we only have to declare it here in the
provider's part of our module.
Let's have it here.
Let's declare here the courses service and let's also remove it here from the application root module.
So no longer we will need to declare it here.
This is also going to be included here as part of the courses module.
Let's now quickly fix a couple of compilation errors that were caused by our refactoring.
We're going to remove here a couple of imports from our application module as the courses service and
the components are no longer needed in this file.
Let's not try to use the courses module without any further modification and see if it's working.
We are going to head over here to the terminal and we're going to start our development server with
NPM start.
At this point, you should still get here a couple of compilation errors caused by the refactoring.
So let's first fix those.
We are going to switch here to our application component and we're going to remove here this import
to the courses service.
Let's quickly reimported with the correct path.
No, let's rebuild the application and let's have a look here at the error messages that we might still
have.
So we can see we have here another issue at the level of the coursework component.
Let's switch into this file.
So as we can see, we have here a couple of imports that are not correct.
Let's quickly re-import here the course model class and let's also re-import here the courses service.
Now we are getting here and error, which is caused by the highlighted directive.
Let's move that also inside the module as it's tightly linked to the other Korshak components that we
have been building so far.
So we are going to drag and drop it here inside the courses folder.
Let's head over here to the application module and remove here these few directives that we have been
using.
We are going to remove them from the imports and we are going to move these DIKLA.
Patients here say the courses module, so here on the declaration's property, let's also define here
the highlighted directive and the end unless directive that we have built before during the course.
Now, let's have a look here at the highlighted directive.
It seems that we have here a small issue at the level of the imports.
Let's report here the courses service.
And with these, we should have here a training application with no completion errors.
But take a look.
We apparently have here an angular, fatal bootstrap error.
Let's have a look here at the message.
Let's review it.
Can't point to course, since it's not a non property, of course, care.
And furthermore, if course care is an English component, then verify that it's part of this module.
So it looks like the application root component that we are defining here at the level of our application
module is not aware of the content of the courses module.
So this module here, the application module is not recognizing here the course care, the custom element.
Now let's switch here into the module and see why would that be the case.
So the problem here is that we are declaring here the components that are part of this module, but
we are not informing the angular module system of what subset of these components is visible outside
this module.
And this is because sometimes components are meant to be kept private one module, as they are private
implementation details of a given part of our application.
So in order to define the public API of our module, we are going to need to fill in the exports property.
And here we are going to define what is visible for other parts of the application that import this
module.
Let's start by defining here the core scarred component and see what happens.
So our application is still going to crash.
But take a look now.
It's not the core component that is giving the air.
It's the course image component.
We also need to add it here at the level of our exports clause.
If we now re lower the application, we are going to see that this time around we don't have any error
in the console and our courses module is being correctly imported in our application root module.
And with this we have completed the implementation of our first angular feature module.
This module, the course module could potentially be published independently of the application and
be reused in other applications where we will have access to the same components and directives.
With this feature module in place, let's not talk about some other angular advanced features.
Let's talk about pipes a bit more.
We have already talked about the angular built in pipes that are very useful for formatting data.
Let's not take this one step further.
We are going to be building our own custom pipe.