Angular 2: модуль не найден: ошибка: не удается разрешить

У меня есть простое приложение, созданное с помощью Angular -CLI, я хотел реорганизовать и переместить код app.component.ts в отдельный файл компонента и начал получать неприятную ошибку:

Модуль не найден: Ошибка: не удается разрешить "./sb/sb.component.html" ( мой SBComponent). Под

Это то, что у меня есть:

app.module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { SBComponent  } from './sb/sb.component'

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

app.component:

import { Component } from '@angular/core';
import { NgModule,ElementRef, ViewChild, AfterViewInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {


}

новый компонент:

import { Component, OnInit } from '@angular/core';
import { NgModule,ElementRef, ViewChild, AfterViewInit, AfterContentInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'


@Component({

    selector: 'app-sb',
    templateUrl: './sb/sb.component.html'
})
export class SBComponent  {



}

Любая помощь будет принята с благодарностью!

Ответы

Ответ 1

Если ваш компонент находится внутри одного и того же каталога, вам нужно указать ваш templateUrl в ту же папку. Вот как вы можете это сделать:

@Component({
    selector: 'app-sb',
    templateUrl: './sb.component.html'
})

Ответ 2

Эта проблема хорошо известна, когда мы используем относительные пути компонентов для внешних файлов HTML и CSS. Проблему абсолютного и относительного пути можно решить, просто добавив метаданные ModuleId в компонент.

Что делает ModuleId? ModuleId содержит абсолютный URL-адрес класса компонента [когда файл модуля действительно загружен]

Это значение ModuleId

Это очень просто в использовании. Просто добавьте еще одну запись в @Component декоративная. Полный пример кода приведен ниже.

 @Component({
  moduleId: module.id,    // fully resolved filename; defined at module load time
  selector: 'app-sb',
  templateUrl: 'sb.component.html' //Observe this.
})
export class SBComponent  {

}

Ответ 3

Попробуйте указать относительный путь вместо абсолютного.

Это исправит решение

например: templateUrl = '../employee/employee.html' в ваших component.ts

Ответ 4

Моя проблема была такой же, как и здесь, мое решение было совсем другим

код, который вызывал проблему:

@Component({
    selector : 'app-header',
    templateUrl : './header.component.html',
    styleUrls : ['']
})

здесь, изменив:

styleUrls : ['']

на это:

styles : ['']

помог мне удалить модуль not found, думал, что кто-то может получить эту ошибку из-за этой глупой ошибки, поэтому поделился моим решением