Error in Angular App on Initial Load Only

Question

I am writing a boilerplate Angular app on StackBlitz and I am getting an error on initial load, but the app loads fine when I make any change in the editor.

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

The app is HERE. Main component, which seems to be throwing looks like this, I don't see any missing parameters (I don't think this is worth more than skimming, just pasted for reference):

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

}

What's causing the error, how do I fix it?

Edit: Looks like changing the main component code (like adding a space, anything) causes the app to temporarily "fix itself" - might be a StackBlitz issue.

score 1 · Accepted Answer · answered Jul 10 '18 at 10:01

1

Route mapping is already mentioned in app-routing.module.ts, so there is no need to inject Router inside constructor of MainComponent and should be removed. You can find working example : https://stackblitz.com/edit/angular-route-resolves-start-fpuzaq

answered Jul 10 '18 at 10:01

Pradip Sukale

76
4

You are awesome, I just kind of assumed it was a stackblitz issue. – VSO Jul 10 '18 at 13:07

score 0 · Answer 2 · answered Jul 11 '18 at 23:46

Looks like what I was doing wasn't strictly wrong - the angular application just wasn't clearing itself properly on StackBlitz, to do that, it needs this code in the main.ts file:

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));

Error in Angular App on Initial Load Only

2 Answers2