Угловой 6, Невозможно импортировать компонент в routing.module - PullRequest
Новая
       23

Угловой 6, Невозможно импортировать компонент в routing.module

0 голосов
/ 23 февраля 2019

Это моя файловая структура:

Image of Folder Structure...

Мой 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:

«message»: «Не удается найти модуль» ../components/search-form.component'."

и

"ОШИБКА в src /app / app-routing.module.ts (4,36): ошибка TS2307: не удается найти модуль '../components/search-form.component'."

в угловом окне, когда я пытаюсь служитьприложение.

Я в своем уме, я могу импортировать AppComponent, но почему модуль маршрутизатора не распознает SearchFormComponent?Через 4 часа я чувствую, что это на кончике моих пальцев, но я чувствую, что вырыл себя в черную дыру.Спасибо за вашу помощь и терпение, новичок в Angular и любовь к нему ... несмотря на то, что этот пост может представлять хаха.Я хотел бы преодолеть этот удар и начать работать над бэкэндом.

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Поскольку модуль маршрутизации находится в одной папке модуля приложения, вы можете импортировать его следующим образом:

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

0 голосов
/ 23 февраля 2019

try

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

Не ../, это ./, поскольку папка компонентов и файл маршрутизации находятся на том же уровне структуры папок

...