1
00:00:00,120 --> 00:00:04,500
In this lecture, we're going to address the error we received in the browser.

2
00:00:04,710 --> 00:00:08,220
Unfortunately, the browser doesn't tell us much about the error.

3
00:00:08,460 --> 00:00:12,120
If we want more information, we need to refer to the terminal.

4
00:00:14,610 --> 00:00:19,050
The terminal will output helpful information about the air we're receiving.

5
00:00:19,350 --> 00:00:24,000
It says the following app off model is not a known element.

6
00:00:24,510 --> 00:00:29,880
In addition to a message, we will be told the file name and line number that triggered the error.

7
00:00:30,270 --> 00:00:33,600
The error is occurring inside the app template file.

8
00:00:33,960 --> 00:00:38,970
It's unable to load the authentication modal component to understand why.

9
00:00:39,000 --> 00:00:40,740
Let's talk about modules again.

10
00:00:42,480 --> 00:00:49,980
We talked about how JavaScript modules work in one file, we export some code in another file, we can

11
00:00:49,980 --> 00:00:51,330
import the same code.

12
00:00:51,570 --> 00:00:53,010
It becomes accessible.

13
00:00:53,280 --> 00:00:56,820
However, there are some rules to how this logic works.

14
00:00:57,300 --> 00:01:02,010
In this example, the B file is not exporting the Foo Variable.

15
00:01:02,280 --> 00:01:05,880
As a result, we will get an error in the file.

16
00:01:06,180 --> 00:01:10,860
We must explicitly export variables, functions and objects.

17
00:01:11,160 --> 00:01:14,670
It doesn't matter if the variable is defined inside the file.

18
00:01:14,880 --> 00:01:18,690
If it's not exported, it won't be accessible in other files.

19
00:01:19,290 --> 00:01:22,170
This same idea applies to angular modules.

20
00:01:22,440 --> 00:01:29,490
Always remember angular as module system is just a fancier, more robust system of Java Scripts module

21
00:01:29,490 --> 00:01:30,030
system.

22
00:01:30,420 --> 00:01:36,510
The problem we're experiencing occurs for the same reason we would receive an error from this example.

23
00:01:37,450 --> 00:01:39,900
I am viewing the user module file.

24
00:01:40,200 --> 00:01:44,580
Inside this file, we're declaring the authentication modal component.

25
00:01:44,940 --> 00:01:49,800
This component will be accessible from other components declared in the same module.

26
00:01:50,220 --> 00:01:53,910
The navigation component is not declared inside this module.

27
00:01:54,210 --> 00:01:57,960
Therefore, it cannot use the authentication mode or components.

28
00:01:58,260 --> 00:02:02,760
Luckily, we are importing the user module into the app module.

29
00:02:05,310 --> 00:02:11,370
If we export the authentication modal component, the navigation component should be able to render

30
00:02:11,370 --> 00:02:13,390
it in the user module.

31
00:02:13,410 --> 00:02:16,440
We're going to add a new option called exports.

32
00:02:18,920 --> 00:02:26,060
The exports option is an array of components, DirecTV's pipes and services exported from the module.

33
00:02:26,390 --> 00:02:29,630
We are going to add the authentication modal component.

34
00:02:32,100 --> 00:02:35,970
After adding this component, the error in that terminal should go away.

35
00:02:36,300 --> 00:02:39,390
Let's verify if the app is working in the browser.

36
00:02:42,040 --> 00:02:43,510
The app is back to normal.

37
00:02:43,840 --> 00:02:48,520
We won't be able to see the modal component because it is hidden with CSIS.

38
00:02:48,850 --> 00:02:53,560
Let's use the angular developer tools to verify the components appearance.

39
00:02:56,110 --> 00:03:00,280
Rightfully so, the component gets listed with the other components.

40
00:03:00,550 --> 00:03:04,120
We've fixed the problem by exporting the components.

41
00:03:04,480 --> 00:03:09,880
This is very important to understand if a component is declared in another module.

42
00:03:10,060 --> 00:03:15,790
We must export it if we want to use it inside components declared outside of the module.

43
00:03:16,120 --> 00:03:20,050
Otherwise, we will get a nasty error in the next lecture.

44
00:03:20,230 --> 00:03:24,010
We are going to work on toggling the visibility of the modal.