feat(external-router)!: rework to use canMatchFn

[damienwebdev]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/graycoreio/daffodil/blob/develop/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

Fixes: #1855
Fixes: #1672

What is the current behavior?

Currently, developers have to use DaffExternalRouterExistenceGuard which requires:

• Extraneous wildcard routing configuration

{
    path: '**',
    canActivate: [DaffExternalRouterExistenceGuard],
    children: [],
  },

• Extraneous routing actions when the wildcard is reached. If you enable your Angular routing debug log, you would see:

Navigate (id:1)
NavigateCancel (id:1)
Navigate (id:2)
Navigated (id:2)

when navigating to any route that requires use of this guard alongside daffPath data.

• Complicated "insertion strategies" to inform Angular's routing configuration of the dynamic routes.

DaffExternalRouterModule.forRoot({
      failedResolutionPath: 'error',
      notFoundResolutionPath: 'not-found',
    }, [
      {
        type: 'CATEGORY',
        insertionStrategy: daffInsertDataPathStrategy,
        route: {},
      },
      {
        type: 'PRODUCT',
        insertionStrategy: daffInsertDataPathStrategy,
        route: {},
      },
    ]),

• Complicated dynamic route configuration

{
        matcher: daffDataPathUrlMatcher,
        data: {
          daffExternalRouteType: 'PRODUCT',
        },
        component: ProductComponent
},

What is the new behavior?

The new behavior leverages the canMatch guards created in Angular 14. You can configure routes as follows (without any complex looking configuration):

import { ApplicationConfig } from '@angular/core';
...
import { provideExternalRouter } from '@daffodil/external-router';

export const appConfig: ApplicationConfig = {
	providers: [
		provideRouter(routes),
		provideClientHydration(),
		provideExternalRouter(),
	],
};

export const routes: Routes = [
	{
		path: '',
		pathMatch: 'full',
		component: HomeComponent,
	},
	{
		path: '**',
		component: TestComponent,
		canMatch: [daffExternalMatcherTypeGuard('TEST_TYPE')],
	},
	{
		path: '**',
		component: OtherTypeComponent,
		canMatch: [daffExternalMatcherTypeGuard('OTHER_TYPE')],
	},
];

Which is much more syntactically direct. It also fixes the original issue as the debug log looks like:

Navigate (id:1)
Navigated (id:1)

Does this PR introduce a breaking change?

[x] Yes
[ ] No

Users should:

1. Remove their configuration like:

DaffExternalRouterModule.forRoot({
      failedResolutionPath: 'error',
      notFoundResolutionPath: 'not-found',
    }, [
      {
        type: 'CATEGORY',
        insertionStrategy: daffInsertDataPathStrategy,
        route: {},
      },
      {
        type: 'PRODUCT',
        insertionStrategy: daffInsertDataPathStrategy,
        route: {},
      },
    ]),

in favor of

provideExternalRouter({ failedResolutionPath: 'error' }),

2. Update Route configuration from:

{
        matcher: daffDataPathUrlMatcher,
        data: {
          daffExternalRouteType: 'PRODUCT',
        },
        component: ProductComponent
},

to:

{
    path: '**',
    component: OtherTypeComponent,
    canMatch: [daffExternalMatcherTypeGuard('PRODUCT')],
},

Other information

[griest024]

I love this! So much better