Angular2 Component is not defined

Question

I am building up an Angular2 app, but my files aren't compiled correctly.

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

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

Folders structure

I've made plunker with your releases component and it actually works fine. Isn't there something wrong with your base? Shouldn't it look like `<base href="/src">? Plunker link: plnkr.co/edit/GUuSShrsQPi3TSboFPZi?p=preview — kind user
– kind user, Commented Jan 6, 2017 at 23:15
You are using an older version of angular2, directives are no longer present. github.com/angular/angular/commit/4a740f2 which version of angular2 are you using? — eko
– eko, Commented Jan 7, 2017 at 21:47

Aravind · Accepted Answer · 2017-01-07 21:51:13Z

3

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 ReleasesComponent and ReleasesService is needed.

Alternatively, you can also use

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

answered Jan 7, 2017 at 21:51

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexandr Belov Over a year ago

I updated the question with my Folders structure. These paths are wrong, I suppose, because "sibling" folders defined correctly with the paths I used.

TechDo · Accepted Answer · 2019-03-02 17:22:59Z

0

Seems NgModule reference is missing. Import NgModule and FormModue in app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

edited Mar 2, 2019 at 17:22

answered Mar 2, 2019 at 13:28

TechDo

18.7k3 gold badges55 silver badges64 bronze badges

2 Comments

pzaenger Over a year ago

First line in app.module.ts: import { NgModule } from '@angular/core';

TechDo Over a year ago

Please try adding FormsModule!

Collectives™ on Stack Overflow

Angular2 Component is not defined

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related