Angular route with multiple parameters

Question

I have a page that will be open by another application with parameterized URL.

Ex: sitename.com/language/myapplication?param1=xxx&param2=xxx

In my component .ts I have:

this.param1= this.route.snapshot.queryParamMap.get('param1');
this.param1= this.route.snapshot.queryParamMap.get('param2');

this.router.navigate(['/myapplication'],
  {
    queryParams: {
      param1: this.param1, param2: this.param1
    }
  });

I am using routing module as well:

const routes: Routes = [
  { path: '', redirectTo: '/myapplication', pathMatch: 'full' },
  { path: 'myapplication', component: myComponent },
  { path: '**', component: PageNotFoundComponent }
];

When I open the URL directly with the parameters it works fine.

Problem 1:

I have multi language on it, i18n, so when I change language via dropdown, the parameters disappear and it redirects to mysite.com/language/myapplication but I need something like sitename.com/fr/myapplication?param1=xxx&param2=xxx

Problem 2:

I want to force "page not found" in every scenario except when I have the URL with the parameters

Problem 3:

How can I transform those parameters from optional to required?

Answer 1

Use route parameter instead of query string.

In the routing module:

const routes: Routes = [
  { path: '', redirectTo: '/myapplication', pathMatch: 'full' },
  { path: 'myapplication/:param1/:param2', component: myComponent },
  { path: '**', component: PageNotFoundComponent }
];

And in my-component.ts

this.param1= this.route.snapshot.paramMap.get('param1');
this.param2= this.route.snapshot.paramMap.get('param2');

If you need transform those parameters to optional add these lines to the routing module:

{ path: 'myapplication/:param1/:param2', component: myComponent },
{ path: 'myapplication/:param1', component: myComponent },
{ path: 'myapplication', component: myComponent },