[Angular2 Router] Configuring a Home Route and Fallback Route - Learn An Essential Routing Concept
In this tutorial we are going to learn how to configure the Angular 2 router to cover some commonly used routing scenarios: what if the user goes to the root of the application manually ? Probably you would want some sort of home page to be displayed. Also another very common scenario is: what should be the behaviour of the application when an unknown url is accessed? We are already know that in the server everything is getting redirected to the index.html file, so how do we handle this on the client?
We are going to answer those questions by learning how to configure the angular 2 router to have both an index or home route, and a fallback route. We are also going to learn an essential concept about routing configuration.
app.routes.ts:
import {RouterModule} from "@angular/router"; import {NotFoundComponent} from "./shared-components/not-found/not-found.component"; const indexRoute = {path: '', loadChildren: 'app/home/home.module'}; const fallbackRoute = {path: '**', component: NotFoundComponent}; const routes = [ {path: 'home', loadChildren: 'app/home/home.module', name: 'Home'}, {path: 'heros', loadChildren: 'app/heros/heros.module', name: 'Heros'}, {path: 'contact', loadChildren: 'app/contact/contact.module', name: 'Contact'}, indexRoute, fallbackRoute ]; export default RouterModule.forRoot(routes);
Notice here, the order does matter, if put fallbackRoute to the first place, it will error out.
相关文章
- Drag an item to dhtmlxGrid and add a column
- Consumer closed input channel or an error occurred. events=0x8 channel is unrecoverably broken and will be disposed(待解决)
- QT-找开工程后,最上方提示the code model could not parse an included file, which might lead to incorrect code completion and highlighting, for example.
- Graphical vi-vim Cheat Sheet and Tutorial
- [Typescript] Extends and override an existing interface
- [Functional Programming] Discard the High and Low Values From an Array of Numbers with Ramda
- [Algorithms] Divide and Recurse Over an Array with Merge Sort in JavaScript
- [RxJS] RefCount: automatically starting and stopping an execution
- [TypeScript] Using Lodash in TypeScript with Typings and SystemJS
- [Angular 2] Rendering an Observable Date with the Async and Date Pipes
- [Ionic] Build and Run an Ionic App from Scratch
- [Kotlin] Primitive Types and String
- [Javascript] Create an Image with JavaScript Using Fetch and URL.createObjectURL
- [React] Create and import React components with Markdown using MDXC
- [RxJS] RefCount: automatically starting and stopping an execution
- 【14.94%】【codeforces 611E】New Year and Three Musketeers
- 【codeforces 760C】Pavel and barbecue
- 成功解决TypeError: can only insert Interval objects and NA into an IntervalArr
- 想法随写:推动与拉动 and 百思得解 and 学会扭转被动局面 and 大胆假设小心求证
- Android12安装报错:Targeting S+ (version 31 and above) requires that an explicit value for android:export
- Installation of NVIDIA Drivers in RHEL/CentOS and Fedora
- 针对高级持续威胁攻击的EDR评估——An Empirical Assessment of Endpoint Detection and Response Systems against Advanced Persistent Threats Attack Vectors,从攻击用例看,感觉这个评估叫APT攻击远远不够!!!内含crowdstrike内存扫描的做法,进程注入数据采集
- leetcode 38. Count and Say