html - Angular2 rc5 和 Electron 錯誤 - 無法解析使用中的元件

我正在學習如何將 Angular2 與 Electron 一起使用。目前我使用的是最新的 Angular rc5 和最新版本的 Electron。我決定使用官方的 Angular 教程（英雄之旅）。直到我接觸到路由時，我沒有遇到重大問題。為了讓路由工作，我必須做一些小改動，例如在 index.html 中，為了支援 Electron，我不得不做一些修改。我也在使用 webpack 和 angular2-materialize。

我的問題是當我點擊其中一個英雄時，會顯示標題中提到的錯誤，這裡有一張圖片：錯誤圖片

這是這個特定元件（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();
 }
 } 

英雄詳情.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>

謝謝

答案＃1

你在 route 的組件選項中應該使用沒有 '（單引號）的組件名稱。因為你已經在 app.routing.ts（路由配置）中導入了 HeroDetailComponent。

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

我注意到你在請求模板時使用的是 file 協議，這意味着你還沒有將應用程序部署到伺服器上。請將你的應用程序部署到伺服器（輕量級伺服器也可以），這樣模板就會通過 http 協議而不是 file 協議來請求。