Router events triggered unexpectedly when a component is rendered

[ruoxin-mx51]

The router events will be trigger when a component is rendered.

Given a component

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-apple',
  templateUrl: './apple.component.html',
  styleUrls: ['./apple.component.css'],
})
export class AppleComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.subscribe((event) => {
      console.log(event);
    });
  }
}

and its test

import { AppleComponent } from './apple.component';
import { render, screen } from '@testing-library/angular'
import { RouterTestingModule } from '@angular/router/testing';

describe('AppleComponent', () => {
  it('should have "apple works!"', async () => {
    await render(AppleComponent, {
      declarations: [AppleComponent],
      imports: [RouterTestingModule]
    })
    expect(screen.getByText('apple works!'));
  });
});

Now run the test then you can see the router events (which won't show up with Angular TestBed or when running the app)

Is this an intentional behaviour? (FYI I believe this behaviour was introduced in version 11.0.3: #286)

[timdeschryver]

This is an intended behavior to reflect a "running" application.

I would suspect the running app to behave the same way though, maybe it isn't because event would already be processed? I'll have to investigate this, perhaps it would be better to invoke the initialNavigation() method before the component is created.

[ruoxin-mx51]

Thanks for reply. I have tested it in a running app but didn't see this behaviour. This is the repo: https://github.com/ruoxin-mx51/ng14-apple-banana

[timdeschryver]

Thanks @ruoxin-mx51, this will get fixed soon.

[github-actions]

🎉 This issue has been resolved in version 13.0.0-beta.2 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 13.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀