web-dev-qa-db-fra.com

Angular 2: Module introuvable: Erreur: impossible de résoudre

J'ai une application simple créée avec Angular-CLI, je voulais refactoriser et déplacer le code app.component.ts dans un fichier de composant distinct et j'ai commencé à obtenir une erreur désagréable:

Module introuvable: Erreur: impossible de résoudre sur './sb/sb.component.html' (mon SBComponent). Sous le

C'est ce que j'ai:

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  {


}

nouveau composant:

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  {



}

Toute aide serait grandement appréciée!

angularangular2-templateangular2-modules
11
joeCarpenter

Si votre composant se trouve dans le même répertoire, vous devez également pointer votre templateUrl vers le même dossier. Voici comment vous pouvez le faire:

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

Ce problème est très bien connu, lorsque nous utilisons des chemins relatifs aux composants pour les fichiers html et css externes. Le problème du chemin absolu et du chemin relatif peut être résolu simplement en ajoutant des métadonnées ModuleId dans le composant.

Maintenant, que fait ModuleId? ModuleId contient l'URL absolue de la classe de composants [lorsque le fichier de module est réellement chargé]

Ce ModuleId La valeur est utilisée par le Angular et le composant metadata_resolver pour évaluer le chemin d'accès complet du composant avant la construction du composant

C'est très simple à utiliser. Ajoutez simplement une entrée supplémentaire dans @Component décoratif. Un exemple de code complet est ci-dessous.

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

}
6
Jaydip Jadhav

Essayez de donner un chemin relatif au lieu d'un chemin absolu.

Il corrigera la solution

comme: templateUrl = '../employee/employee.html' dans votre component.ts

2
Sarath potlacheruvu

Mon problème était le même que celui interrogé ici, ma solution était très différente

code qui posait problème:

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

ici en changeant:

styleUrls : ['']

pour ça:

styles : ['']

m'a aidé à supprimer le module not found error, a pensé que quelqu'un pourrait obtenir cette erreur en raison de cette erreur stupide, c'est pourquoi j'ai partagé ma solution

0
Ravi Khatri