Outlet is not Activated error

[jfarnsworth95]

Which @angular/* package(s) are the source of the bug?

router

Is this a regression?

Yes

Description

When using the Router.navigateByUrl() method, we get an the error: "Error: Outlet is not activated".
Originally, our code worked in Angular 10, and this problem is only happening after we upgraded to Angular 13.
Each individual page will load without issue, if I were to just navigate directly to it, it's just when we update the outlet with a new page that the error occurs.

I've added code snippets from the project below in the "Anything Else" section.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Error: Outlet is not activated
    at ce.detach (main.fd9238bfe654cff8.js:1:5317956)
    at Ra.detachAndStoreRouteSubtree (main.fd9238bfe654cff8.js:1:5314074)
    at Ra.deactivateRouteAndItsChildren (main.fd9238bfe654cff8.js:1:5313763)
    at Ra.deactivateRouteAndOutlet (main.fd9238bfe654cff8.js:1:5314369)
    at Ra.deactivateRouteAndItsChildren (main.fd9238bfe654cff8.js:1:5313802)
    at Ra.deactivateRoutes (main.fd9238bfe654cff8.js:1:5313608)
    at main.fd9238bfe654cff8.js:1:5313268
    at Array.forEach (<anonymous>)
    at Ra.deactivateChildRoutes (main.fd9238bfe654cff8.js:1:5313225)
    at Ra.deactivateRoutes (main.fd9238bfe654cff8.js:1:5313511)
    at main.fd9238bfe654cff8.js:1:5313268
    at Array.forEach (<anonymous>)
    at Ra.deactivateChildRoutes (main.fd9238bfe654cff8.js:1:5313225)
    at Ra.deactivateRoutes (main.fd9238bfe654cff8.js:1:5313562)
    at main.fd9238bfe654cff8.js:1:5313268
    at Array.forEach (<anonymous>)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.3.5
Node: 12.22.5
Package Manager: npm 8.8.0
OS: linux x64

Angular: 13.3.6
... animations, cdk, common, compiler, core, forms, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.5
@angular-devkit/build-angular   13.3.5
@angular-devkit/core            13.3.5
@angular-devkit/schematics      13.3.5
@angular/cli                    13.3.5
@angular/compiler-cli           13.3.8
@angular/flex-layout            13.0.0-beta.38
@angular/language-service       13.3.8
@schematics/angular             13.3.5
rxjs                            6.6.0
typescript                      4.6.4

Anything else?

Here's snippets of the relevant code:

Main html page that has the router outlet:

<mat-card class="tab-container">
    <nav mat-tab-nav-bar class="tab-nav">
        <a mat-tab-link *ngFor="let tab of tabs"
           (click)="handleTabClick(tab)"
           [active]="isTabActive(tab.label)"
           [disabled]="tab.disabled">
            {{tab.label}}
        </a>
    </nav>

    <div class="tab-content">
        <router-outlet name="tab-content"></router-outlet>
    </div>
</mat-card>

handleTabClick method from the TS file related to the above HTML:

handleTabClick(tab) {
        let tabUrl = '/' + tab.path;
        if (tab.hasId && !_.isEmpty(this.paramId)) {
            tabUrl += '/' + this.paramId;
        }
        this.route.navigateByUrl(tabUrl)
            .then(isLoaded => {
                if (isLoaded) {
                    this.activeTab = tab;
                }
            })
            .catch(error => {
                console.error('An Error Occurred During Navigation in TabContainer: ', error);
            });
    }

Routes list from the app.module.ts:

const appRoutes: Routes = [
    {
        path      : '',
        redirectTo: '/projects',
        pathMatch: 'full'
    },
    {
        path: 'view',
        loadChildren: () => import('./main/actual-view/actual-view.module')
            .then(module => module.ActualViewModule)
    },
...
]

The next list of routes from the ActualViewModule referenced above:

const routes = [
    {
        path: '',
        component: ActualViewComponent,
        children: [
            // If no tabs, redirect to 'Projects'
            {
                path: '',
                redirectTo: 'projects',
                pathMatch: 'full'
            },
            // Route for 'Task Table' tab
            {
                path: 'tasks/:projectId',
                canDeactivate: [HasChangesGuard],
                loadChildren: () => import('../tab-views/tasks-tab/tasks-tab.module')
                    .then(module => module.TasksTabModule)
            },
            ...
            ]}

Final route from TasksTabModule listed above:

const routes = [
    {
        path: '',
        component: TasksTabComponent,
        outlet: 'tab-content'
    }
];

So the problem comes from being on "/view/details/1111" and updating the outlet with the page from "/view/tasks/1111"

[atscott]

Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.

If the problem still exists in your application, please open a new issue and follow the instructions in the issue template.

[atscott]

Based on the error stack, it looks quite likely this is due to a documented breaking change in v13

When storing and retrieving a DetachedRouteHandle, the Router traverses the Route children in order to correctly allow storing a parent route when there are several possible child Route configs that can be stored. This allows a RouteReuseStrategy to store a parent Route and a child, while preserving the ability to change the child route while restoring the parent. Some implementations of RouteReuseStrategy will need to be updated to correctly store and retrieve the DetachedRouteHandle of descendants as well as the stored parent ActivatedRouteSnapshot.Previously, the Router would only store the parent, making it impossible to change descendant paths when a parent stored was retrieved. See Issue #20114
--

[jfarnsworth95]

Thank you for the pointer @atscott, when I implement a version of RouteReuseStrategy that doesn't store anything, I see that navigation works as intended.
That said, after searching around online and on the linked git forums for the past few days, I can't find how I'm supposed to structure the Reuse Strategy in order to work with tabs replacing the outlet.

It seems from Issue #20114, that @Carlosamouco had the exact problem I'm having. Do you happen to know of a stackblitz made when checking this out, that features how to address this problem? So far I've had no luck finding one, and I'm unclear on how to update the store and retrieve implementations to make this work.

[atscott]

@jfarnsworth95 I don't know exactly what you're trying to achieve, but I do know that oftentimes implementations of RouteReuseStrategy will try to determine store/retrieve functionality based on path or data. For empty path children, this can be problematic. Using the routeConfig on the ActivatedRouteSnapshot as the differentiating factor usually solves the problem.

[jfarnsworth95]

Yep, that's all I needed to get it working, thank you so much @atscott .
In case anyone ends up looking this and needs a pointer:

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        return (route.routeConfig.path? route.routeConfig.path : "") !== ""
    }

Since I have a lot of empty paths with children, telling the shouldDetach method to ignore empty path routes fixed the issue. At least in my case.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}