Outlet is not Activated error

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 “<hostname>/view/details/1111” and updating the outlet with the page from “<hostname>/view/tasks/1111”

[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.

[angular-automatic-lock-bot[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.}