CODEWITHSUNDEEP
angular
Helen Reeves
Helen Reeves

Reputation: 469

Module not found: Compiler error when using @Input Property - Angular 6

Have generated parent and child components (at same folder level) - using ng generate component...

Am getting following compiler error:

./src/app/parent/parent.component.ts Module not found: Error: Can't resolve './<app-child [childMessage]="parentMessage"></app-child>' in 'c:\myapp\src\app\parent'

child.component.ts:

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Input() childMessage: string;
  constructor() { }

  ngOnInit() {
  }
}

parent.component.ts: import { Component, OnInit } from '@angular/core'; 

@Component({
  selector: 'app-parent',
  templateUrl: '<app-child [childMessage]="parentMessage"></app-child>',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  parentMessage = "hello from parent";
  constructor() { }

  ngOnInit() {
  }
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ParentComponent } from './parent/parent.component';
import { ChildComponent } from './child/child.component';

@NgModule({
  declarations: [
    AppComponent,
    ParentComponent,
    ChildComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 0

Views: 613

Answers (2)

Krishna Rathore
Krishna Rathore

Reputation: 9687

Replace templateUrl to template

parent.component.ts

@Component({ 
    selector: 'app-parent', 
    template: `<app-child [childMessage]="parentMessage"></app-child>`, 
    styleUrls: ['./parent.component.css'] }) 
export class ParentComponent implements OnInit { 
    parentMessage = "hello from parent";
     constructor() { } 
     ngOnInit() { }
 }

Upvotes: 0

Amit
Amit

Reputation: 1491

Just replace templateurl with template, since you are directly using Html

@Component({
  selector: 'app-parent',
  template: `<app-child [childMessage]="parentMessage"></app-child>`,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  parentMessage = "hello from parent";
  constructor() { }

  ngOnInit() {
  }
}

Upvotes: 1

Related Questions