typescript Angular2 组件未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41515306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 04:08:42 来源:igfitidea点击:
Angular2 Component is not defined
提问by Alexandr Belov
I am building up an Angular2 app, but my files aren't compiled correctly.
我正在构建一个 Angular2 应用程序，但我的文件没有正确编译。
Found some similar issues, but no solution worked to me.
发现了一些类似的问题，但没有解决方案对我有用。
I am getting Error in console:
我在控制台中收到错误：
(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
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
发布.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
索引.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
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'; }
Folders structure
文件夹结构
回答by Aravind
You are wrong with the path name. Look at the below code.
你的路径名错了。看看下面的代码。
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'; }
Also replace these in all the import statements where ever ReleasesComponentand ReleasesServiceis needed.
还要在需要ReleasesComponent和ReleasesService 的所有导入语句中替换这些。
Alternatively, you can also use
或者，您也可以使用
import { ReleasesComponent } from './../app/releases/releases.component';
import { ReleasesService } from './../app/releases/releases.service';
回答by TechDo
Seems NgModule reference is missing. Import NgModule and FormModue in app.module.ts
似乎缺少 NgModule 参考。在 app.module.ts 中导入 NgModule 和 FormModue
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
