Angular2コンポーネントが定義されていません

Angular2アプリをビルドしていますが、ファイルが正しくコンパイルされていません。Angular2コンポーネントが定義されていません

類似の問題がいくつか見つかりましたが、解決策はありませんでした。

私は、コンソールにエラーを取得しています：

(index):19 Error: (SystemJS) ReleasesComponent is not defined 
ReferenceError: ReleasesComponent is not defined 
    at eval (http://localhost:3000/app/app.component.js:21:26) 
    at Object.eval (http://localhost:3000/app/app.component.js:27:2) 
    at eval (http://localhost:3000/app/app.component.js:30:4) 
    at eval (http://localhost:3000/app/app.component.js:31:3) 
    at eval (<anonymous>) 
    at Object.eval (http://localhost:3000/app/app.module.js:15:23) 
    at eval (http://localhost:3000/app/app.module.js:48:4) 
    at eval (http://localhost:3000/app/app.module.js:49:3) 
    at eval (<anonymous>) 
Evaluating http://localhost:3000/app/app.component.js 
Evaluating http://localhost:3000/app/app.module.js 
Evaluating http://localhost:3000/app/main.js 
Error loading http://localhost:3000/app/main.js 
    at eval (http://localhost:3000/app/app.component.js:21:26) 
    at Object.eval (http://localhost:3000/app/app.component.js:27:2) 
    at eval (http://localhost:3000/app/app.component.js:30:4) 
    at eval (http://localhost:3000/app/app.component.js:31:3) 
    at eval (<anonymous>) 
    at Object.eval (http://localhost:3000/app/app.module.js:15:23) 
    at eval (http://localhost:3000/app/app.module.js:48:4) 
    at eval (http://localhost:3000/app/app.module.js:49:3) 
    at eval (<anonymous>) 
Evaluating http://localhost:3000/app/app.component.js 
Evaluating http://localhost:3000/app/app.module.js 
Evaluating http://localhost:3000/app/main.js 
Error loading http://localhost:3000/app/main.js

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule, JsonpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { HomeComponent } from './home/home.component'; 
import { ReleasesComponent } from './releases/releases.component'; 
import { DistroComponent } from './distro/distro.component'; 
import { ContactsComponent } from './contacts/contacts.component'; 
import { routing } from './app.routes'; 


@NgModule({ 
    imports:  [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    JsonpModule, 
    routing 
    ], 

    declarations: [ 
    AppComponent, 
    HomeComponent, 
    ReleasesComponent, 
    DistroComponent, 
    ContactsComponent 
    ], 

    bootstrap: [ AppComponent ] 
}) 
export class AppModule { }

releases.component.ts

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

@Component({ 
    selector: 'releases', 
    templateUrl: 'app/releases/releases.component.html', 
    providers: [ReleasesService] 
}) 

export class ReleasesComponent implements OnInit { 
releases: Observable<Array<string>>; 

constructor(private releasesService: ReleasesService) { 
} 

ngOnInit() { 
    this.releases = this.releasesService.getReleases(); 
} 
}

tsconfig.json

{ 
"compilerOptions": { 
"target": "es5", 
"module": "commonjs", 
"moduleResolution": "node", 
"sourceMap": true, 
"emitDecoratorMetadata": true, 
"experimentalDecorators": true, 
"lib": [ "es2015", "dom" ], 
"noImplicitAny": true, 
"suppressImplicitAnyIndexErrors": true 
} 
}

index.htmlを

<!DOCTYPE html> 
<html> 
<head> 
<base href="/"> 
<title>PR PR PR</title> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="app/assets/flex.css"> 
<link rel="stylesheet" href="app/assets/styles.css"> 

<!-- Polyfill(s) for older browsers --> 
<script src="node_modules/core-js/client/shim.min.js"></script> 

<script src="node_modules/zone.js/dist/zone.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 

<script src="systemjs.config.js"></script> 
<script> 
    System.import('app').catch(function(err){ console.error(err); }); 
</script> 
</head> 

<body> 
<my-app>Loading AppComponent content here ...</my-app> 
</body> 
</html>

app.component.ts

import { Component } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { ReleasesComponent } from './releases/releases.component'; 
import { ReleasesService } from './releases/releases.service'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    directives: [ReleasesComponent], 
    providers: [Http, ReleasesService] 
}) 
export class AppComponent { name = 'My name'; }

フォルダ構造

出典

2017-01-06 Alexandr Belov

私が作ったplunkerを使用することができ、それが実際には正常に動作します。あなたのベースに何か間違っていませんか？ 'のようにはなりませんか？ Plunker link：https://plnkr.co/edit/GUuSShrsQPi3TSboFPZi?p=preview –

あなたの 'app.component.ts'ファイルを共有できますか？ – yurzui

@yurzuiの質問がapp.component.tsで更新されました –

パス名が間違っています。以下のコードを見てください。

import { Component } from '@angular/core'; 
import { Http } from '@angular/http'; 
//modified the below lines 
import { ReleasesComponent } from './app/releases/releases.component'; 
import { ReleasesService } from './app/releases/releases.service'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    directives: [ReleasesComponent], 
    providers: [Http, ReleasesService] 
}) 
export class AppComponent { name = 'My name'; }

また、これまでReleasesComponentとReleasesServiceが必要とされているすべてのimport文でこれらを交換してください。

また、また、あなたの `releases`コンポーネントで

import { ReleasesComponent } from './../app/releases/releases.component'; 
import { ReleasesService } from './../app/releases/releases.service';

出典

2017-01-07 21:51:13 Aravind

私は自分のフォルダ構造で質問を更新しました。これらのパスは間違っています。私が使ったパスで「兄弟」フォルダが正しく定義されているからです。 –

Angular2コンポーネントが定義されていません

答えて

関連する問題