Angular 6，无法将组件导入到routing.module

Question

这是我的文件结构：

我的app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SearchFormComponent } from './components/search-form/search-form.component';
import { QueryDisplayComponent } from './components/query-display/query-display.component';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent,
    SearchFormComponent,
    QueryDisplayComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  exports:[],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

''app.component.html

<div style="text-align:center">
  <h1>
    Places Search
  </h1>
</div>


<router-outlet></router-outlet>

在点击路线时试图显示的组件

import { Component, OnInit } from '@angular/core';
// import { Place } from '../../place'
import { GetReqPlaces } from '../../services/get-req-places.service'
import { Router } from '@angular/router'


@Component({
  selector: 'app-search-form',
  templateUrl: './search-form.component.html',
  styleUrls: ['./search-form.component.css']
})
export class SearchFormComponent implements OnInit {

  constructor(private getPlaces: GetReqPlaces, private router: Router) { }

  westLong: number;
  eastLong: number;
  northLat: number;
  southLat: number;

  // log(x){console.log(x)}
  onSubmit(form){

  this.westLong = form.value.wLong; // 
  this.eastLong = form.value.eLong; // 
  this.northLat = form.value.nLat; // 
  this.southLat = form.value.sLat; // 
    console.log(this.getPlaces.getPlaces(this.westLong,this.southLat,this.eastLong,this.northLat))
  }

}

''路由模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent} from './app.component'
import { SearchFormComponent} from '../components/search-form.component'


const routes: Routes = [

  { path: 'search', component: SearchFormComponent },


];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

VScode中的错误代码如下：

“消息”：“找不到模块'../ components / search-form.component'。”

和

“ src / app / app-routing.module.ts（4,36）中出现错误：错误TS2307：找不到模块'../ components / search-form.component'。”

当我尝试为该应用提供服务时，在角度cli中。

我有点机智，无法导入AppComponent，但是为什么路由器模块不能识别SearchFormComponent？在这之后的4个小时，我感觉就像触手可及，但是我感觉自己陷入了一个黑洞。谢谢您的帮助和耐心，这是Angular的新手，并喜欢它...尽管这篇文章可能表示哈哈。我很想克服这一难题，并开始在后端工作。

Answer 1

尝试

import { SearchFormComponent} from './components/search-form.component'

不是../，它是./，因为components文件夹和路由文件位于相同级别的文件夹结构中

Answer 2

由于路由模块位于应用程序模块的同一文件夹中，因此您可以这样导入

  

从'./components/search-form/search-form.component'导入{SearchFormComponent}