CODEWITHSUNDEEP
htmlangulartypescriptelectron
scroobius
scroobius

Reputation: 722

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">
   <h4>{{hero.name}}</h4>
  </div>
 </div>
 </div>

`

typescript(dashboard.component.ts):

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

 @Component({
 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',hero.id];
  this.router.navigate(link);   
 }
 }

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

     @NgModule({
     imports: [
     BrowserModule,
     FormsModule,
     routing,
     ],
     declarations: [
        AppComponent,HeroDetailComponent,MaterializeDirective,HeroesComponent,DashboardComponent
     ],
    providers: [HeroService],
    bootstrap: [ AppComponent ],
      })
    export class AppModule { }

index.html:

<html>
<head>
    <base href="">
    <title>First App</title>
    <!--<link href="http://fonts.googleapis.com/icon?family=Material+Icons" 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">
</head>
<body>
    <myapp></myapp>
  <script src="../build/common.js"></script>
  <script src="../build/angular2.js"></script>
  <script src="../build/app.js"></script>
</body>

main.ts:

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

app.routing.ts:

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',
    component:'HeroDetailComponent'

}

];

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

app.component.ts:

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

@Component({
selector: 'myapp',
template: `
<nav>
<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>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
`
})

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

@Component({
selector: 'my-hero-detail',
templateUrl: './hero-detail.component.html' 
})

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

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

hero-detail.component.html

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

Thank You

Upvotes: 2

Views: 254

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

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.

Upvotes: 1

Related Questions