未找到模块：使用 @Input 属性时出现编译器错误 - Angular 6答案

【问题标题】：Module not found: Compiler error when using @Input Property - Angular 6未找到模块：使用 @Input 属性时出现编译器错误 - Angular 6
【发布时间】：2019-01-25 15:20:38
【问题描述】：

已生成父子组件（在同一文件夹级别） - 使用 ng generate component...

我得到以下编译器错误：

./src/app/parent/parent.component.ts Module not found: Error: Can't resolve './' 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：从'@angular/core'导入{组件，OnInit}；

@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 { }

【问题讨论】：

在parent.component.ts 中将templateUrl 替换为template

标签： angular

【解决方案1】：

只需将 templateurl 替换为模板，因为您直接使用 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() {
  }
}

【讨论】：

【解决方案2】：

将templateUrl 替换为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() { }
 }

【讨论】：