Angular routing with a prefix and a parameter in the route

Question

Angular routing with a prefix and a parameter in the route

I am currently working on implementing the user profile page. While it would be easy to use the

/profile/user123 path by simply updating:

app-routing.module

{
  path: 'profile',
  loadChildren: () => import('./modules/profile/profile.module').then(m => m.ProfileModule)
},

profile-routing.module

{
  path: ':username',
  component: ProfileComponent
},

my aim is to create a more unique URL structure like /@user123.

Despite my efforts, I haven't been successful in achieving this using the following approach:

app-routing.module

{
  path: '@:username',
  loadChildren: () => import('./modules/profile/profile.module').then(m => m.ProfileModule)
},

profile-routing.module

{
  path: '',
  component: ProfileComponent
},

Unfortunately, this method did not work as expected.

One potential solution that comes to mind is utilizing a Guard to check for the '@' prefix and redirecting to the /not-found page if it's not present.

Do you have any suggestions on how to achieve this routing in a more "Angular" way?

angular typescript routes router prefix

Answer 1

Answer №1

To achieve the desired outcome, utilize a custom route matcher.

app-routing.module.ts

    {
      path: 'profile',
      loadChildren: () => import('./modules/profile/profile.module').then(m => m.ProfileModule)
    },

In profile-routing.module.ts, define a route with a custom URL-matching function as follows:

    {
      matcher: (url) => {
        // Define regex pattern accordingly
        if (url.length === 1 && url[0].path.match(/^@[\w]+$/gm)) {
          return {
            consumed: url,
            posParams: {
              username: new UrlSegment(url[0].path.substr(1), {}) // <--- Create UrlSegment by removing @ from url path
            }
          };
        }
    
        return null;
      },
      component: ProfileComponent
    }

In profile.component.ts, access the username parameter as demonstrated below:

    username$!: Observable<string | null>;
    constructor(private activatedRoute: ActivatedRoute) { }

    ngOnInit(): void {
      this.username$ = this.activatedRoute.paramMap
        .pipe(
          map((params: ParamMap) => params.get('username'))
        );
    }

In profile.component.html, display the username using the following code:

    <p>
        Profile: {{username$ | async}}
    </p>

To see the result, navigate to the URL /profile/@user123 and observe user123 as the username in ProfileComponent

Answer 2

To achieve the desired outcome, utilize a custom route matcher.

app-routing.module.ts

    {
      path: 'profile',
      loadChildren: () => import('./modules/profile/profile.module').then(m => m.ProfileModule)
    },

In profile-routing.module.ts, define a route with a custom URL-matching function as follows:

    {
      matcher: (url) => {
        // Define regex pattern accordingly
        if (url.length === 1 && url[0].path.match(/^@[\w]+$/gm)) {
          return {
            consumed: url,
            posParams: {
              username: new UrlSegment(url[0].path.substr(1), {}) // <--- Create UrlSegment by removing @ from url path
            }
          };
        }
    
        return null;
      },
      component: ProfileComponent
    }

In profile.component.ts, access the username parameter as demonstrated below:

    username$!: Observable<string | null>;
    constructor(private activatedRoute: ActivatedRoute) { }

    ngOnInit(): void {
      this.username$ = this.activatedRoute.paramMap
        .pipe(
          map((params: ParamMap) => params.get('username'))
        );
    }

In profile.component.html, display the username using the following code:

    <p>
        Profile: {{username$ | async}}
    </p>

To see the result, navigate to the URL /profile/@user123 and observe user123 as the username in ProfileComponent

Answer 3

Answer №2

The response given by Siddhant is remarkable, however, I preferred using /@user123 over /profile/@user123, so I made some adjustments.

app-routing.module.ts

{
  matcher: (url) => {
    if (url.length === 1 && url[0].path.match(/^@[\w.\-]+$/gm)) { // <--- included a hyphen and a dot to widen the scope
      return {
        consumed: url,
        posParams: {
          username: new UrlSegment(url[0].path.substr(1), {}) // <--- modified to remove @ from url path
        }
      };
    }
    return null;
  },
  loadChildren: () => import('./modules/profile/profile.module').then(m => m.ProfileModule)
},

profile.routing.module.ts

{
  path: '',
  component: ProfileComponent
},

profile.component.ts

ngOnInit(): void {
  this.activatedRoute.paramMap.subscribe(paramMap => {
    this.userService.getUser(paramMap.get('username')).subscribe(res => {
      if (res) {
        this.user = res;
      } else {
        this.router.navigate([Utils.ARTICLE_NOT_FOUND_URL]);
      }
    });
  });
}

Answer 4

The response given by Siddhant is remarkable, however, I preferred using /@user123 over /profile/@user123, so I made some adjustments.

app-routing.module.ts

{
  matcher: (url) => {
    if (url.length === 1 && url[0].path.match(/^@[\w.\-]+$/gm)) { // <--- included a hyphen and a dot to widen the scope
      return {
        consumed: url,
        posParams: {
          username: new UrlSegment(url[0].path.substr(1), {}) // <--- modified to remove @ from url path
        }
      };
    }
    return null;
  },
  loadChildren: () => import('./modules/profile/profile.module').then(m => m.ProfileModule)
},

profile.routing.module.ts

{
  path: '',
  component: ProfileComponent
},

profile.component.ts

ngOnInit(): void {
  this.activatedRoute.paramMap.subscribe(paramMap => {
    this.userService.getUser(paramMap.get('username')).subscribe(res => {
      if (res) {
        this.user = res;
      } else {
        this.router.navigate([Utils.ARTICLE_NOT_FOUND_URL]);
      }
    });
  });
}

Answer 5

Answer №3

After encountering an issue with utilizing the @user123/edit path in my project, I found a workaround that solved the problem. Here is the updated solution:

app-routing.module.ts

 {
    matcher: (url) => {
      console.log(url);
      if (url[0].path.match(/^@[\w.\-]+$/gm)) { <-- removed check for url length
        return {
          consumed: url.slice(0, 1), <-- modify to only consume @user123 and return the rest of the URL (/edit)
          posParams: {
            username: new UrlSegment(url[0].path.substr(1), {}) // <--- creating UrlSegment by removing @ from the url path
          }
        };
      }
      return null;
    },
    loadChildren: () => import('./modules/profile/profile.module').then(m => m.ProfileModule)
  },

profile.routing.module.ts

{
    path: '',
    component: ProfileComponent
  },
  {
    path: 'edit',
    component: EditProfileComponent
  },

Answer 6

After encountering an issue with utilizing the @user123/edit path in my project, I found a workaround that solved the problem. Here is the updated solution:

app-routing.module.ts

 {
    matcher: (url) => {
      console.log(url);
      if (url[0].path.match(/^@[\w.\-]+$/gm)) { <-- removed check for url length
        return {
          consumed: url.slice(0, 1), <-- modify to only consume @user123 and return the rest of the URL (/edit)
          posParams: {
            username: new UrlSegment(url[0].path.substr(1), {}) // <--- creating UrlSegment by removing @ from the url path
          }
        };
      }
      return null;
    },
    loadChildren: () => import('./modules/profile/profile.module').then(m => m.ProfileModule)
  },

profile.routing.module.ts

{
    path: '',
    component: ProfileComponent
  },
  {
    path: 'edit',
    component: EditProfileComponent
  },

Angular routing with a prefix and a parameter in the route

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to showcase images at random in Angular?

Finding the value of an item within a JSON sub-array based on the most recent date that falls within a specified timeframe

Can ES6 class getters, setters, and private properties be utilized in TypeScript with an interface?

Should services be directly referenced in HTML templates when using Angular 2?

The data type 'Observable<any>' cannot be assigned to the type 'StoresSummaryResults'. The property 'Data' is not present in the 'Observable<any>' type

Tips for adjusting collisions between models using three.js and oimo.js

Challenges with Angular 2 navigation paths

What is the best method for sharing templates and logic in VUE?

Angular's counterpart to IWebProxy

When using mongoose.save(), the data is not stored successfully

Tips for successfully passing an Observable identifier to mergeMap

Utilizing optional chaining with function parameters

Guide to making a Typescript interface by combining elements from two separate interfaces without utilizing inheritance

Steps for enabling a function to return an undefined type

The animation in ThreeJs encounters context issues within Angular 2

What is the best way to utilize "exports" in package.json for TypeScript and nested submodules?

Cross-Platform: Varied functionalities in disabled input fields (avoiding any direct replication)

Passing data between a component and a service in Angular 6

Encountering TS1240 Error When Implementing TypeScript Property Decorators in Code Execution

Is it possible for node modules to access and utilize protractor parameters?