Angular2 rc5 和 Electron 错误 - 无法解析组件使用

Question

我正在学习如何使用 angular2 和 electron.Currently 我正在使用最新的 angular rc5 和最新版本的 electron.I 决定使用官方 angular教程（英雄游）。我没有遇到大问题，直到我到达 routing.I 必须对路由进行一些小的更改才能工作，例如在 index.html 中而不是使用我必须使用的电子支持。我也在使用 webpack 和 angular2-实现。

我的问题是当我点击其中一个英雄时它显示标题中所述的错误，这是一张图片： error image

这是这个特定组件的代码 (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>

`

打字稿（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>

谢谢

Answer 1

您的组件名称应该在 route 的组件选项中没有 '（单引号）。因为您已经在 app.routing.ts（rotue 配置）中导入了 HeroDetailComponent。

{
   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.

Angular2 rc5 和 Electron 错误 - 无法解析组件使用

Angular2 rc5 and Electron Error - Cannot resolve component using

html

typescript

electron

angular