代码之家 › 专栏 › 技术社区 › VSO

仅在初始荷载下角向应用的误差

stackblitz angular

0

VSO · 技术社区 · 6 年前

我在stackblitz上编写了一个样板的角度应用程序,在初始加载时得到了一个错误,但是当我在编辑器中进行任何更改时,该应用程序加载良好。

错误 /turbo_模块/@angular/compiler@6.0.7/bundles/compiler.umd.js (301:17)无法解析主组件的所有参数:(?)是的。正在评估main.ts引导应用程序

应用程序是 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']);
  }

}

错误的原因是什么,我该如何修复?

编辑:看起来更改主组件代码(比如添加一个空格,任何东西)会导致应用程序临时“自我修复”——这可能是stackblitz的问题。

2 回复 | 直到 6 年前

1

Pradip Sukale 6 年前

app-routing.module.ts中已经提到路由映射,因此不需要在主组件的构造函数中注入路由器,应该删除。您可以找到工作示例: https://stackblitz.com/edit/angular-route-resolves-start-fpuzaq

2

0

VSO 6 年前

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