Ошибка в угловом приложении только при начальной загрузке

Question

Я пишу шаблонное приложение Angular для StackBlitz и получаю сообщение об ошибке при начальной загрузке, но приложение загружается нормально, когда я делаю какие-либо изменения в редакторе.

Ошибка в /turbo_modules/@angular/compiler@6.0.7/bundles/compiler.umd.js (301:17) Не удается разрешить все параметры для MainComponent: (?). Оценка main.ts Загрузка приложения

Приложение ЗДЕСЬ. Основной компонент, который, кажется, выдает, выглядит следующим образом: я не вижу пропущенных параметров (я не думаю, что это стоит больше, чем скимминг, просто вставьте для справки):

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

@Component({
  selector: 'main-component',
  template: `
    <ul>

      <li>
        <a [ngClass] = "{ active: (activeLink === 'Home') }" 
           (click) = "goHome()">
          HOME
        </a>
      </li>

      <li>
        <a [ngClass] = "{ active: (activeLink === 'News') }"
           (click) = "goToNews()">
          NEWS
        </a>
      </li>

    </ul>
    <br>
    <router-outlet></router-outlet>
  `,
  styleUrls:  ['main.component.css']
})

export class MainComponent{

  constructor(private router: Router) {}

  public activeLink = 'Home'; //default

  public goToNews() {
    this.activeLink = 'News';
    this.router.navigate(['/news']);
  }

  public goHome() {
    this.activeLink = 'Home'; 
    this.router.navigate(['/home']);
  }

}

Что является причиной ошибки, как я могу это исправить?

Редактировать: похоже, что изменение кода основного компонента (например, добавление пробела, чего угодно) приводит к тому, что приложение временно "исправляет себя" - это может быть проблемой StackBlitz.

Answer 1

Сопоставление маршрутов уже упоминалось в app-routing.module.ts, поэтому нет необходимости вводить Router внутри конструктора MainComponent и его следует удалить. Вы можете найти рабочий пример: https://stackblitz.com/edit/angular-route-resolves-start-fpuzaq

Answer 2

Похоже, то, что я делал, было не совсем неправильно - угловое приложение просто не очищало себя должным образом в StackBlitz, для этого ему нужен этот код в main.ts файл:

import './polyfills';

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
  // Ensure Angular destroys itself on hot reloads.
  if (window['ngRef']) {
    window['ngRef'].destroy();
  }
  window['ngRef'] = ref;

  // Otherise, log the boot error
}).catch(err => console.error(err));