CODEWITHSUNDEEP
angulardirectiveangular2-directivesfile-not-found
Striker
Striker

Reputation: 61

directive don't exist in current component

I'm new to angular 2, I saw some videos and implement this but I am facing some problems. I have created a new component navbar and imported it in app.component.ts file. While adding meta data @Component directive not found error occurred.

Error: Argument of type '{ selector: string; template: string; directive: (typeof NavbarComponent)[]; }' is not assignable to parameter of type 'Component'.
  Object literal may only specify known properties, and 'directive' does not exist in type 'Component'.

app.component.ts Code:

import { Component } from '@angular/core';
import { NavbarComponent } from './navbar.component';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
  directive: [NavbarComponent]
})
export class AppComponent  { name = 'Angular'; }

navbar.component.ts]

app.component.ts]

Upvotes: 2

Views: 1477

Answers (2)

Striker
Striker

Reputation: 61

We have to import in app.model.ts file

import { NavbarComponent} from './navbar.component';

and

declarations: [ AppComponent,NavbarComponent ],

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { NavbarComponent} from './navbar.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent,NavbarComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

and in app.component.ts just call selector 

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


@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
                <p>Hello once again</p>
                <navbar></navbar>

  `
})
export class AppComponent  { name = 'Angular'; }

Upvotes: 1

Patrick Kasprzyk
Patrick Kasprzyk

Reputation: 1

As the error says 'directive' does not exist in type 'Component'.

The component argument does not take a parameter of type directive. If you would like to see your newly created navbar in your app.component.html just remove the directive from app.component.ts and add the navbar selector in you app.component.html (make sure to have some html in your navbar template to make sure it is working).

<nabar><\navbar>

Upvotes: 0

Related Questions