"Navigation triggered outside Angular zone" warning in unit tests

[cexbrayat]

I'm submitting a...

[x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

Using the last Angular 6.1.7 which introduced a warning if a navigation is triggered outside a zone (see 010e35d),
a simple unit test calling router.navigate yields the warning (resulting in hundreds of warnings in the console).

Expected behavior

The warning should not be emitted in unit tests.
It's currently possible to remove it by using zone.run or using NoopNgZone, but this is cumbersome. A way to disable it in unit tests would be great.

Minimal reproduction of the problem with instructions

Build a minimal app with the CLI

ng new router-warning --routing

Then replace the default unit test with:

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { Router } from '@angular/router';

import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', async(() => {
    const router = TestBed.get(Router) as Router;
    router.navigateByUrl('/');
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

Run ng test, and the following warning should appear:

WARN: 'Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?'

Environment

Angular version: 6.1.7 or 7.0.0-beta.5

Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.11.3
- Platform:  Mac

cc @trotyl

[trotyl]

Relates to #24181 (#24185), caused by NgZone.isInAngularZone() implementation.

CC @JiaLiPassion, any suggestion on checking whether it's Angular zone?

[vasiliy0s]

The same for us. But our tests watches console.warn logging and this issue was sensitive for tests fail.

[JiaLiPassion]

@trotyl, yeah, several other issues have the same problems, in test, NgZone.isInAngularZone() will be false, we may need a TestNgZone to work with ComponentFixture.autoDetectChanges

[webben-de]

+1

[iotshaman]

+1

[orjandesmet]

I'd say you don't need to navigate in unit tests.
You should spy on those methods and assert that they have been called.

[dhhyi]

I'd say you don't need to navigate in unit tests.

For unit tests, yes. But the same framework can also be used for integration tests where you should be able to instantiate routing and do navigation.

[samuelt1]

I am getting this in my actual code. Not just in the tests.
this.router.navigate([this.returnUrl])

[ItzhakBokris]

Workaround:

constructor(private ngZone: NgZone, private router: Router) {}

public navigate(commands: any[]): void {
    this.ngZone.run(() => this.router.navigate(commands)).then();
}

[CharlyRipp]

In unit test:

it('should just work', async(() => {
    fixture.ngZone.run(() => {
        router.navigate(['path1']);
        fixture.detectChanges();
        fixture.whenStable().then(() => {
            expect({stuff}).toHaveBeenCalled();
        });
    });
}));

[AliakbarSu]

You also need to wrap router.initialNavigation();

fixture.ngZone.run(() => {
      router.initialNavigation();
});

[calebeaires]

Workround proposed by @ItzhakBokris worked, but it must not be a permanent solution. Waiting to angular team!

this.ngZone.run(() => this.router.navigate(['home'])).then();

[quirogamauricio]

I'm getting this warning not in a test, but in the actual application, when navigating from a component to another. I'm doing a sort of hack to be able to navigate using the router, from links present in a table that's generated with DataTables. Basically I'm temporarily adding a property to the window object, which holds a function that calls a component's method that uses the router. I'm not sure if the warning is actually correctly displayed or if this is a bug. Also I'd appreciate if someone could provide a better way to trigger navigation from dynamically generated content.

[trotyl]

@quirogamauricio It's the expected warning, when perform navigation outside Angular zone than no change detection will be triggered. You do can perform navigation from anywhere of the JavaScript engine, but just need to ensure it inside Angular zone.

[rajugvsn]

I guess It is because latest angular CLI creates routing in a separate module
app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

so to run navigation with in Angular zone it is required to implement work around -

constructor(private ngZone: NgZone, private router: Router) {}

public navigate(commands: any[]): void {
    this.ngZone.run(() => this.router.navigate(commands)).then();
}

Alternatively if you define routing with in app module, it works fine.
app.routing.ts

import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
    //add app routes here
];

export const routing = RouterModule.forRoot(appRoutes);

[DDieudonne]

Works perfectly for me @calebeaires thanks !!

[hollygood]

I also received the same warning by using ngrx/effects:

@Effect({ dispatch: false })
redirectToLogin$: Observable<Action> = this.actions$.pipe(
  ofType<RedirectToLogin>(AuthActionTypes.REDIRECT_TO_LOGIN),
    tap(() => {
      this.router.navigate(['/signin']);
     })
  );

[dianjuar]

To avoid the callback hell in the @CharlyRipp suggestion you can use I used await

await fixture.ngZone.run(async () => {
    await router.navigate(['/home']);
});

// Put your asserts here
expect(true).toBeTruthy();

[fpellanda]

I suggest as workaround to run navigate in fixture.ngZone with a spy:

    // run navigate in ngZone
    beforeEach(() => {
      const originalNavigate = TestBed.get(Router).navigate;
      spyOn(TestBed.get(Router), 'navigate').and.callFake((...options) => {
        fixture.ngZone.run(() => {
          originalNavigate.apply(TestBed.get(Router), options);
        });
      });
    });

[anlexN]

import { Location } from '@angular/common';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { Router, Routes } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroesComponent } from './heroes/heroes.component';
import { MessagesComponent } from './messages/messages.component';

describe('AppComponent', () => {
  const routes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'heroes', component: HeroesComponent },
    { path: 'detail/:id', component: HeroDetailComponent }
  ];

  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let compiled: HTMLElement;
  let router: Router;
  let location: Location;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        HeroesComponent,
        HeroDetailComponent,
        MessagesComponent,
        DashboardComponent
      ],
      imports: [FormsModule, RouterTestingModule.withRoutes(routes)]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(AppComponent);
        component = fixture.debugElement.componentInstance;
        compiled = fixture.debugElement.nativeElement;
        router = TestBed.get(Router);
        location = TestBed.get(Location);

        fixture.detectChanges();

        fixture.ngZone.run(() => {
          router.initialNavigation();
        });
      });
  }));

  it('should create the component', () => {
    expect(component).toBeTruthy();
  });

  it('should render title in a h1 tag', () => {
    fixture.detectChanges();
    expect(compiled.querySelector('h1').textContent).toContain(
      'Tour of Heroes'
    );
  });

  it('should get 4 RouterLinks', () => {
    expect(router.config.length).toEqual(4);
  });

  it('should redirect to /dashboard when navigate to ""', async(() => {
    fixture.ngZone.run(() => {
      fixture.whenStable().then(() => {
        router.navigate(['']).then(() => {
          expect(location.path()).toEqual('/dashboard');
        });
      });
    });
  }));

  it('should navigate to /heroes', async(() => {
    fixture.ngZone.run(() => {
      fixture.whenStable().then(() => {
        router.navigate(['/heroes']).then(() => {
          expect(location.path()).toEqual('/heroes');
        });
      });
    });
  }));
});

That's all , thank you! No errors, No warnings. very good! 😄

[TravisLRiffle]

@anlexN This worked for me! Thanks!!

[ChrisMBarr]

If you need to run tests in IE11 Proxy does not exist and will give the error:

ReferenceError: 'Proxy' is undefined
error properties: Object({ number: -2146823279 })

However, we can install a polyfill for this this by running npm i proxy-polyfill --save-dev

So here's the full solution to do this cross-browser:

import 'proxy-polyfill/proxy.min.js';

declare const ProxyPolyfill: ProxyConstructor;

/**
 * Wrapper of Angular router (only for testing purpose)
 * Meant to run all router operations within Angular zone
 *  * Keep change detection enabled
 *  * Avoids flooded console with warnings
 *    https://github.com/angular/angular/issues/25837#issuecomment-445796236
 *
 * @see Router
 */
export function wrapRouterInNgZone(router: Router, ngZone: NgZone): Router {
    return new ProxyPolyfill(router, {
        get(target: Router, p: PropertyKey): unknown {
            //@ts-ignore Element implicitly has an 'any' type because type 'Router' has no index signature.ts(7017)
            const invokedProperty = target[p];
            if (typeof invokedProperty !== 'function') {
                return invokedProperty;
            }

            return (...args: Array<unknown>): unknown => {
                return ngZone.run(() => invokedProperty.apply(target, args));
            };
        }
    });
}

Please note that we have to import from the minified version since they stupidly include some ES6 syntax in the un-minified version (which kinda defeats the purpose of the polyfill in the first place!) There's an open issue about it here

[renegare]

any luck with this bug/inconvenience being resolved?

FWIW I'm using this helper as a workaround:

const ngZoneRun = async (fixture, cb) => {
  return new Promise((resolve, reject) => {
    try {
      fixture.ngZone.run(async () => {
        try {
          resolve(await cb());
        } catch (error) {
          reject(error);
        }
      });
    } catch (error) {
      reject(error);
    }
  });
};

Disclaimer: new to TS and angular.

Idea: a wrapper that runs fixture.ngZone.run and also returns a Promise that will resolve to what your callback (cb) returns/resolves.

[msorens]

@piotrl Thank you for your workaround code! Just one more piece would be useful in my environment. I have a few tests that use variations of this:

spyOn(router, 'navigate');
// do stuff here
expect(router.navigate).toHaveBeenCalledWith([], {queryParams: { }});

But with your wrapRouterInNgZone in place that now yields this error:

   Error: <toHaveBeenCalledWith> : Expected a spy, but got Function.

Any thoughts on how to rewrite the above expectation to pass?

[alainkaiser]

Any news on this one?

[kygoh]

I tried this workaround to avoid the warning:

  it('should navigate "" to "/app"', async() => {
    const success = await fixture.ngZone.run(() => router.navigateByUrl(''));
    expect(success).toBeTruthy();
    expect(location.path()).toBe('/app');
  });

[whimzyLive]

I usually do this,

      const originalNavigate = TestBed.inject(Router).navigate;
      spyOn(TestBed.inject(Router), 'navigate').and.callFake((...options) => {
        new NgZone({}).run(() => {
          originalNavigate.apply(TestBed.inject(Router), options);
        });
      });

this ensures that navigation is performed inside ngZone.
thanks to @fpellanda

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