Angular4 give has no exported member( Failed to compile)

Question

I am implementing one demo project in Angular4 and I am also new in this(Angular4). I have seen one link,Angular2 module has no exported member, But I am not able to solve this problem.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { VideoListComponent } from './training/video-list.component';  
import { HomeComponent } from './training/home.component';     
import { AddVideoComponent } from './training/add-video.component';
import { AboutusComponent } from './training/aboutus.component';


@NgModule({
  declarations: [
    AppComponent,
    VideoListComponent,
    HomeComponent,      
    AddVideoComponent,
    AboutusComponent        
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      {path: 'home', component:HomeComponent},     
      {path: 'videos', component:VideoListComponent},          
      {path :'newvideo',component:AddVideoComponent},
      {path: 'aboutus', component:AboutusComponent},
      {path: '', redirectTo:'home',pathMatch:'full'},
      {path: '**', redirectTo:'home',pathMatch:'full'}
    ])
  ],    
  bootstrap: [AppComponent]
})
export class AppModule { }

aboutus.component.ts

import { Component } from '@angular/core';
console.log('It works here');
@Component({
    moduleId: module.id,
    templateUrl: 'aboutus.html'
})

export class AboutusComponent {
    s: string = "Hello";
    constructor() {
        console.log(this.s)
    }
}

I want to add AboutusComponent than it is giving compile failed.

I am sharing my directory structure

It give me some error in browser(in below screen shot).

I want to add new module in angular4 Please share your idea.

score 0 · Accepted Answer · answered Oct 22 '17 at 07:44

0

You have missed the Component Selector in the AboutusComponent.

It should be

import { Component } from '@angular/core';
console.log('It works here');
@Component({
    selector: 'aboutus', // the selector is missing in your component
    moduleId: module.id,
    templateUrl: 'aboutus.html'
})

export class AboutusComponent {
    s: string = "Hello";
    constructor() {
        console.log(this.s)
    }
}

answered Oct 22 '17 at 07:44

Rahul Singh

16,265
5
49
74

AFAIK `selector` is optional property. The default is `ng-component` – yurzui Oct 22 '17 at 07:46
@yurzui i may be wrong on this but i have no clue id selector is optional , there is nothing else that catches my eye here in the images – Rahul Singh Oct 22 '17 at 07:58
@yurzui now thats something i couldn't spot bow down – Rahul Singh Oct 22 '17 at 08:03
@RahulSingh. I putted your code but same problem is comming. – Varun Sharma Oct 22 '17 at 08:24
@VSH Do you have a github repo to reproduce? – yurzui Oct 22 '17 at 08:26
can you reproduce this problem in a plunker or on Stackblitz – Rahul Singh Oct 22 '17 at 08:28
@RahulSingh. I will post on Stackbitz. I don't have account on it. It will take time for me. – Varun Sharma Oct 22 '17 at 08:29
@RahulSingh I am confused. But when I putted selector. Than It is working. I don't know. Confused!!!!. But my problem is solved. – Varun Sharma Oct 22 '17 at 08:40
@VSH great but i dont feel that the selector is optional , ny documentation on this will be great . i could get only this https://github.com/angular/angular/issues/1662 as a document – Rahul Singh Oct 22 '17 at 08:42
@yurzui any reference to if is optional will be great as i had asked few members on gitter and they are with the opinion that it is not optional – Rahul Singh Oct 22 '17 at 08:44
https://github.com/angular/angular/blob/master/packages/core/src/metadata/directives.ts#L112 – yurzui Oct 22 '17 at 08:46
https://stackblitz.com/edit/angular-mwrnwg?file=app%2Fhello.component.ts I removed selector from HelloComponent – yurzui Oct 22 '17 at 08:47
We usually can omit it if component is created dynamically Because in other cases we need to know the exact selector – yurzui Oct 22 '17 at 08:48
@yurzui but here the components are not created dynamically are they ? – Rahul Singh Oct 22 '17 at 08:49
But it doesn't mean that we have to specify selector – yurzui Oct 22 '17 at 08:51
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/157215/discussion-between-rahul-singh-and-yurzui). – Rahul Singh Oct 22 '17 at 08:52
I am researching. And I will reach you again with solution. – Varun Sharma Oct 22 '17 at 08:54

Angular4 give has no exported member( Failed to compile)

1 Answers1