In this lecture, we're going to address the error we received in the browser.
Unfortunately, the browser doesn't tell us much about the error.
If we want more information, we need to refer to the terminal.
The terminal will output helpful information about the air we're receiving.
It says the following app off model is not a known element.
In addition to a message, we will be told the file name and line number that triggered the error.
The error is occurring inside the app template file.
It's unable to load the authentication modal component to understand why.
Let's talk about modules again.
We talked about how JavaScript modules work in one file, we export some code in another file, we can
import the same code.
It becomes accessible.
However, there are some rules to how this logic works.
In this example, the B file is not exporting the Foo Variable.
As a result, we will get an error in the file.
We must explicitly export variables, functions and objects.
It doesn't matter if the variable is defined inside the file.
If it's not exported, it won't be accessible in other files.
This same idea applies to angular modules.
Always remember angular as module system is just a fancier, more robust system of Java Scripts module
system.
The problem we're experiencing occurs for the same reason we would receive an error from this example.
I am viewing the user module file.
Inside this file, we're declaring the authentication modal component.
This component will be accessible from other components declared in the same module.
The navigation component is not declared inside this module.
Therefore, it cannot use the authentication mode or components.
Luckily, we are importing the user module into the app module.
If we export the authentication modal component, the navigation component should be able to render
it in the user module.
We're going to add a new option called exports.
The exports option is an array of components, DirecTV's pipes and services exported from the module.
We are going to add the authentication modal component.
After adding this component, the error in that terminal should go away.
Let's verify if the app is working in the browser.
The app is back to normal.
We won't be able to see the modal component because it is hidden with CSIS.
Let's use the angular developer tools to verify the components appearance.
Rightfully so, the component gets listed with the other components.
We've fixed the problem by exporting the components.
This is very important to understand if a component is declared in another module.
We must export it if we want to use it inside components declared outside of the module.
Otherwise, we will get a nasty error in the next lecture.
We are going to work on toggling the visibility of the modal.