feat: fix paths for nested routes, add page not found route

brandonroberts · May 4, 2020 · 9a4a216 · 9a4a216
1 parent f043e92
commit 9a4a216
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 24 deletions.
diff --git a/projects/router/src/lib/route.component.ts b/projects/router/src/lib/route.component.ts
@@ -27,7 +27,6 @@ import { RouterComponent } from "./router.component";
 })
 export class RouteComponent implements OnInit {
   private destroy$ = new Subject();
-  @ViewChild("outlet", { read: ElementRef, static: true }) outlet: ElementRef;
   @Input() path: string;
   @Input() component: Type<any>;
   @Input() loadComponent: LoadComponent;
@@ -46,7 +45,7 @@ export class RouteComponent implements OnInit {
   ngOnInit(): void {
     // account for root level routes, don't add the basePath
     const path = this.router.parentRouterComponent
-      ? this.router.basePath + this.path
+      ? this.router.parentRouterComponent.basePath + this.path
       : this.path;
 
     this.route = this.router.registerRoute({
@@ -74,14 +73,14 @@ export class RouteComponent implements OnInit {
         })
       );
 
-    const routeParams$ = this._routeParams$
-      .pipe(
-        distinctUntilChanged(),
-        filter(() => !!this.rendered),
+    // const routeParams$ = this._routeParams$
+    //   .pipe(
+    //     distinctUntilChanged(),
+    //     filter(() => !!this.rendered),
         // tap(() => markDirty(this.rendered))
-      );
+      // );
 
-    merge(activeRoute$, routeParams$).pipe(
+    merge(activeRoute$).pipe(
       takeUntil(this.destroy$),
     ).subscribe();
   }

diff --git a/projects/router/src/lib/router.component.ts b/projects/router/src/lib/router.component.ts
@@ -83,13 +83,7 @@ export class RouterComponent {
       return matchedRoute;
     }
 
-    // check to see if a greedy match will find something
-    const secondaryMatch = pathToRegexp(`${route.path}(.*)`);
-    const secondaryMatchedRoute = secondaryMatch.exec(url);
-
-    if (secondaryMatchedRoute) {
-      return secondaryMatchedRoute;
-    }
+    return null;
   }
 
   setRoute(url: string, route: Route, matchedRoute: RegExpExecArray) {

diff --git a/projects/router/src/lib/router.service.ts b/projects/router/src/lib/router.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { PlatformLocation, LocationStrategy } from '@angular/common';
+import { PlatformLocation, Location } from '@angular/common';
 
 import { BehaviorSubject } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
@@ -19,25 +19,25 @@ export class Router {
   hash$ = this._hash$.pipe(distinctUntilChanged());
 
   constructor(
-    private location: LocationStrategy,
+    private location: Location,
     private platformLocation: PlatformLocation,
     private urlParser: UrlParser
   ) {
-    this.location.onPopState(() => {
+    this.location.subscribe(() => {
       this.nextState(this.getLocation());
     });
 
     this.nextState(this.getLocation());
   }
 
   go(url: string, queryParams: string = '') {
-    this.location.pushState(null, '', this.location.prepareExternalUrl(url), queryParams);
+    this.location.go(url, queryParams);
 
     this.nextState(this.getLocation());
   }
 
   replace(url: string, queryParams?: string) {
-    this.location.replaceState(null, '', this.location.prepareExternalUrl(url), queryParams);
+    this.location.replaceState(url, queryParams);
 
     this.nextState(this.getLocation());
   }

diff --git a/src/app/blog/blog/blog.component.ts b/src/app/blog/blog/blog.component.ts
@@ -21,7 +21,7 @@ import { CommonModule } from '@angular/common';
 export class BlogComponent {
   routes = [
     { path: '/posts/:postId', component: PostComponent },
-    { path: '/', component: PostsComponent }
+    { path: '', component: PostsComponent }
   ];
 }
 

diff --git a/src/app/core/components/layout/layout.component.ts b/src/app/core/components/layout/layout.component.ts
@@ -133,12 +133,12 @@ import { RedirectComponent } from '../redirect/redirect.component';
 })
 export class LayoutComponent {
   routes = [
-    { path: '/blog/posts/:postId', loadComponent: () => import('../../../blog/post/post.component').then(m => m.PostComponent) },
-    { path: '/blog', loadComponent: () => import('../../../blog/blog/posts.component').then(m => m.PostsComponent) },
+    { path: '/blog(.*)', loadComponent: () => import('src/app/blog/blog/blog.component').then(m => m.BlogComponent) },
     { path: '/404', component: PageNotFoundComponent },
     { path: '/talks', component: PageComponent },
     { path: '/about', component: PageComponent },
-    { path: '/', component: RedirectComponent }
+    { path: '/', component: RedirectComponent },
+    { path: '/(.*)', component: PageNotFoundComponent }
   ];
 
   isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)