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));
我正在 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));