1 00:00:00,210 --> 00:00:05,820 In this lecture, we are going to redirect users if they land on a page that doesn't exist. 2 00:00:06,180 --> 00:00:09,510 Angular does not automatically handle invalid accounts. 3 00:00:09,810 --> 00:00:14,070 Let's look at what happens when we typed gibberish inside the address bar. 4 00:00:16,560 --> 00:00:18,840 We are not redirected to another route. 5 00:00:19,050 --> 00:00:25,800 Instead, the route or outlet directive will not render anything under the control panel of the developer 6 00:00:25,800 --> 00:00:26,280 tools. 7 00:00:26,490 --> 00:00:28,620 An error will be thrown by the router. 8 00:00:28,950 --> 00:00:32,640 It'll tell us the path does not match any routes in our app. 9 00:00:33,180 --> 00:00:37,230 We can handle unknown paths by creating a wildcard patch. 10 00:00:37,500 --> 00:00:41,640 It's a path for capturing invalid paths inputted by the user. 11 00:00:41,970 --> 00:00:45,060 Let's open the app routing module in our file. 12 00:00:47,570 --> 00:00:54,350 Inside our roots array, we will register a new routes, a wildcard path can be registered by setting 13 00:00:54,350 --> 00:00:57,590 the path property to a set of double stars. 14 00:01:00,150 --> 00:01:07,140 By adding a wildcard route, we won't have to register a route for every possible combination of characters 15 00:01:07,440 --> 00:01:09,960 that would be time consuming and inefficient. 16 00:01:10,290 --> 00:01:14,790 Rather, we can register a single route to capture unknown paths. 17 00:01:15,090 --> 00:01:19,560 If a user visits this page, let's render a component first. 18 00:01:19,650 --> 00:01:22,950 We should generate a component in the command line. 19 00:01:22,980 --> 00:01:28,260 We will run the following command N.G. G component not found. 20 00:01:30,670 --> 00:01:33,910 Next, we will update the template for this component. 21 00:01:34,210 --> 00:01:40,810 You can find the static template for this component in the fall form HTML file inside the Templates 22 00:01:40,810 --> 00:01:41,500 directory. 23 00:01:44,110 --> 00:01:48,520 The page content can be found under a comment that says main content. 24 00:01:48,910 --> 00:01:52,240 We are going to copy the div tags below this comment. 25 00:01:54,760 --> 00:02:01,660 Afterward, openly not found template file, we will replace the current template with the static template. 26 00:02:04,120 --> 00:02:11,100 Lastly, we can update our routing configuration to load this components back in the app routing module, 27 00:02:11,110 --> 00:02:13,210 import the not found components. 28 00:02:15,710 --> 00:02:20,900 For the wild card path, set the component property to the component we imported. 29 00:02:23,330 --> 00:02:26,690 Now, let's test our wild card roots in the browser. 30 00:02:26,810 --> 00:02:30,170 Try browsing to a page that doesn't exist in our app. 31 00:02:32,710 --> 00:02:39,640 After browsing to an unknown page will be shown the contents of the not known component during the navigation 32 00:02:39,640 --> 00:02:40,300 process. 33 00:02:40,510 --> 00:02:44,740 Angular will run the path against the roots registered in our app. 34 00:02:45,100 --> 00:02:49,750 The moment it finds a match, it'll render the component related to the path. 35 00:02:50,140 --> 00:02:54,470 There is one problem you may encounter it when working with wildcard paths. 36 00:02:54,940 --> 00:02:58,300 Let's click on the Manage link as we click on this link. 37 00:02:58,450 --> 00:03:00,730 The not found component gets rendered. 38 00:03:01,060 --> 00:03:04,960 This behavior is a common problem you may run into as a beginner. 39 00:03:05,410 --> 00:03:11,470 The reason the router renders the not found component has to do with the order of roots registered in 40 00:03:11,470 --> 00:03:12,040 our app. 41 00:03:12,430 --> 00:03:17,260 Angular chooses to render components on a first come, first served basis. 42 00:03:17,560 --> 00:03:20,050 Let's go back to the app routing module. 43 00:03:22,520 --> 00:03:29,030 In this array, we are adding the wildcard path at the bottom of the array if we move this path to the 44 00:03:29,030 --> 00:03:29,480 top. 45 00:03:29,720 --> 00:03:32,780 The router will always render the not found components. 46 00:03:33,110 --> 00:03:36,890 The path from the browser will be matched with this wildcard route. 47 00:03:37,280 --> 00:03:39,740 Angular will not check the other paths. 48 00:03:40,010 --> 00:03:42,230 The first match will have priority. 49 00:03:42,530 --> 00:03:47,510 We should always register wildcard paths as the last route in our app. 50 00:03:48,020 --> 00:03:51,320 So why does the manage page not get rendered? 51 00:03:51,620 --> 00:03:54,130 Do you understand why this behavior occurs? 52 00:03:54,170 --> 00:03:55,940 Let's open the app module. 53 00:03:58,440 --> 00:04:03,450 The app module is the root module of our app inside the imports option. 54 00:04:03,570 --> 00:04:08,220 We're importing the video module after importing the app routing module. 55 00:04:08,640 --> 00:04:13,380 The video module is responsible for importing the video routing module. 56 00:04:13,860 --> 00:04:20,370 The roots registered by the video routing module will be registered after the app routing module has 57 00:04:20,370 --> 00:04:21,870 registered its roots. 58 00:04:22,170 --> 00:04:29,340 Therefore, the wild card path will intercept all requests made to the routs registered under this module. 59 00:04:29,910 --> 00:04:35,550 We can fix our routes by moving the app routing module to the end of Imports Array. 60 00:04:38,120 --> 00:04:42,230 By rearranging our imports, we can resolve the issue with our app. 61 00:04:42,530 --> 00:04:44,750 Let's check out the app in the browser. 62 00:04:47,380 --> 00:04:53,380 Unlike before, the managed component gets rendered whenever you encounter issues like this. 63 00:04:53,500 --> 00:04:56,350 You should look at the order of imports in your app. 64 00:04:56,680 --> 00:05:00,850 The order of imports makes a huge difference in the next lecture. 65 00:05:01,000 --> 00:05:05,530 We will look at an alternative solution to handling 404 errors.