scroobius scroobius - 1 year ago 77
TypeScript Question

Angular2 rc5 and Electron Error - Cannot resolve component using

I learning how to use angular2 with electron.Currently i am using the the latest angular rc5 and the latest version of electron.I decided to use the official angular tutorial (Tour of heroes). I had no major problems till i got to routing.I had to make some little changes for routing to work eg in index.html instead of using for support with electron i had to use .I am also using webpack and angular2-materialize.

My problem is when i click one of the heroes it shows the error stated in the title, here is a picture :
error image

here is the code for this particular component (dashboard.component)

html (dashboard.component.html): `

<h3>Top Heroes</h3>
<div class="grid grid-pad">
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1- 4">
<div class="module hero">



import {Component, OnInit} from '@angular/core';
import {Hero} from './hero';
import {HeroService} from './hero.service';
import {Router} from '@angular/router';

selector: 'my-dashboard',
templateUrl: './dashboard.component.html'

export class DashboardComponent implements OnInit {

heroes: Hero[] = [];
constructor(private router: Router,private heroService: HeroService){}
ngOnInit(): void {
this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(1,5));

gotoDetail (hero: Hero): void
let link = ['/detail',];

app.module.ts :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import {MaterializeDirective} from "angular2-materialize";
import {HeroDetailComponent} from './hero-detail.component';
import {HeroService} from './hero.service';
import {HeroesComponent} from './heroes.component';
import {routing} from './app.routing';
import {DashboardComponent} from './dashboard.component';

imports: [
declarations: [
providers: [HeroService],
bootstrap: [ AppComponent ],
export class AppModule { }


<base href="">
<title>First App</title>
<!--<link href="" rel="stylesheet">-->
<link href="../icons/icon.css" rel="stylesheet">
<link href="../node_modules/materialize-css/dist/css/materialize.css" rel="stylesheet" />
<link href="../css/styles.css" rel="stylesheet">
<script src="../build/common.js"></script>
<script src="../build/angular2.js"></script>
<script src="../build/app.js"></script>


import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';


import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {HeroesComponent} from './heroes.component';
import {DashboardComponent} from './dashboard.component';
import {HeroDetailComponent} from './hero-detail.component';
const appRoutes: Routes = [
path: 'heroes',
component: HeroesComponent
path: 'dashboard',
component: DashboardComponent
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
path: 'detail/:id',



export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);


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

selector: 'myapp',
template: `
<div class="nav-wrapper">
<a href="#" class="brand-logo center">{{title}}</a>

<ul id="nav-mobile" class="left">

<li><a routerLink="/heroes">Heroes</a></li>
<li><a routerLink="/dashboard">Dashboard</a></li>

export class AppComponent {
title = 'Tour of Heroes';

hero-detail.component.ts :

import {Component, Input, OnInit} from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';
import {HeroService} from './hero.service';
import {Hero} from './hero';

selector: 'my-hero-detail',
templateUrl: './hero-detail.component.html'

export class HeroDetailComponent implements OnInit {
hero: Hero;
constructor(private heroService: HeroService, private route: ActivatedRoute)

ngOnInit(): void
this.route.params.forEach((params: Params) => {
let id = +params['id'];
.then(hero => this.hero = hero);
goBack(): void {


<div *ngIf="hero">
<h2>{{}} details!</h2>
<div><label>id: </label>{{}}</div>
<label>name: </label>
<input [(ngModel)]="" placeholder="name"/>
<button (click)="goBack()">Back</button>

Thank You

Answer Source

You should be have your component name without '(single quote) in component option of route. As you already have imported HeroDetailComponent there in app.routing.ts(rotue configuration).

   path: 'detail/:id',
   component: HeroDetailComponent //<-- removed quote from here

I observed that you are having file protocol while asking for template, it means you haven't hosted your application on server. Please host your application on server(lite server would also work), so that template would ask over http protocol instead of file.