Angular 应用仅在初始加载时出错

Error in Angular App on Initial Load Only

我正在 StackBlitz 上编写样板 Angular 应用程序,我在初始加载时遇到错误,但当我在编辑器中进行任何更改时应用程序加载正常。

Error in /turbo_modules/@angular/compiler@6.0.7/bundles/compiler.umd.js (301:17) Can't resolve all parameters for MainComponent: (?). Evaluating main.ts Booting application

该应用程序是 HERE。主要组件,好像是抛出的样子,我没看到有什么遗漏的参数(我觉得这不比略读更有价值,只是粘贴以供参考):

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']);
  }

}

导致错误的原因是什么,我该如何解决?

编辑:看起来更改主要组件代码(如添加 space,任何东西)会导致应用暂时 "fix itself" - 可能是 StackBlitz 问题。

路由映射已经在app-routing.module.ts中提到,所以没有必要在MainComponent的构造函数中注入Router,应该被移除。您可以找到工作示例:https://stackblitz.com/edit/angular-route-resolves-start-fpuzaq

看起来我所做的并没有完全错误 - angular 应用程序只是没有在 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));