Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 057db80

Browse files
section 2 - Wildcard Route added
section 2 - Wildcard Route added
1 parent 2b743cc commit 057db80

File tree

1 file changed

+77
-0
lines changed

1 file changed

+77
-0
lines changed

‎README.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -327,3 +327,80 @@ nav a.active {
327327
background-color: #CFD8DC;
328328
}
329329
```
330+
331+
2 Wildcard Route and Redirecting Routes (Dealing with unavailable-non-configured route [Page not found])
332+
=====================
333+
- User can type/enter any unavailable-non-configured route/URL and can get many erros in console, like `http://localhost:5000/try` **Error:** `(Cannot match any routes, URL segment 'try'...)`
334+
- To deal/handle any unwanted path or unavailable routes we must need to create a new component named `page not found component` OR `404 component` and `add 'wildcard **'` route
335+
- `Wildcard **` routes or any paths with parameters (employees/1 or routes/parameters) `must come last` in `app-routing.module.ts` router configuration as router tries to match the paths from top to bottom
336+
- In `app-routing.module.ts` route must be configured in order: `most specific at the tpo to list important/specific at the bottom`
337+
- **Default Route:** While using `wildcard **` routes we also need to provide `default route like '{ path: '', component:DepartmentListComponent}' OR '{ path: '', redirectTo:'departments', pathMatch:'full'}'`
338+
<br/> <br/>
339+
340+
Steps:
341+
- Create a new component for page not found: `ng g c wildcard-pagenotfound` with a instructional markup: `404 page not found!`
342+
- In `app-routing.module.ts` at the bottom/last add a new wildcard route: `{ path: '**', component: WildcardPagenotfoundComponent }`
343+
344+
> **Syntax & Example**: wildcard-pagenotfound.component.html
345+
```html
346+
<p>
347+
404 page not found! <br/>
348+
Path/URL not available!! <br/>
349+
<strong>Try Again!!!</strong>
350+
</p>
351+
352+
```
353+
354+
> **Syntax & Example**: app-routing.module.ts
355+
```ts
356+
import { NgModule } from '@angular/core';
357+
import { Routes, RouterModule } from '@angular/router';
358+
359+
import { DepartmentListComponent } from './components/department-list/department-list.component';
360+
import { EmployeeListComponent } from './components/employee-list/employee-list.component';
361+
import { HomeComponent } from './components/home/home.component';
362+
import { ProductListComponent } from './components/product-list/product-list.component';
363+
import { WildcardPagenotfoundComponent } from './components/wildcard-pagenotfound/wildcard-pagenotfound.component';
364+
365+
const routes: Routes = [
366+
// default path
367+
// { path: '', component:DepartmentListComponent},
368+
{ path: 'home', component: HomeComponent },
369+
{ path: '', redirectTo: 'home', pathMatch: 'full' },
370+
{ path: 'departments', component: DepartmentListComponent },
371+
{ path: 'employees', component: EmployeeListComponent },
372+
{ path: 'products', component: ProductListComponent },
373+
{ path: '**', component: WildcardPagenotfoundComponent }
374+
];
375+
376+
@NgModule({
377+
imports: [RouterModule.forRoot(routes)],
378+
exports: [RouterModule]
379+
})
380+
export class AppRoutingModule { }
381+
382+
// to store all routing component and avoid importing/writing duplicate list of components in app.routing.module / app.module.
383+
// create an array of all routing components export it then imports it in app.module.ts
384+
export const RoutingComponents = [
385+
DepartmentListComponent,
386+
EmployeeListComponent,
387+
HomeComponent,
388+
ProductListComponent,
389+
WildcardPagenotfoundComponent,
390+
]
391+
```
392+
393+
<p>
394+
<figure>
395+
&nbsp;&nbsp;&nbsp; <img src="./_images-angular-routing/2.1-wildcard-route.png" alt="Image - Output - wildcard-route / Page not found!" title="Image - Output - wildcard-route / Page not found! width="1000" border="2" />
396+
<figcaption>&nbsp;&nbsp;&nbsp; Image - Output - wildcard-route / Page not found!</figcaption>
397+
</figure>
398+
</p>
399+
400+
<p>
401+
<figure>
402+
&nbsp;&nbsp;&nbsp; <img src="./_images-angular-routing/2.2-wildcard-route.png" alt="Image - Output - wildcard-route / Page not found!" title="Image - Output - wildcard-route / Page not found! width="1000" border="2" />
403+
<figcaption>&nbsp;&nbsp;&nbsp; Image - Output - wildcard-route / Page not found!</figcaption>
404+
</figure>
405+
</p>
406+

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /