Question

我有一个使用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  {



}

非常感谢任何帮助！

Answer 1

如果您的组件位于同一目录中，则您还需要将templateUrl指向同一文件夹。以下是如何做到这一点：

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

Answer 2

对于这个问题，这个答案可能会迟到，但这适用于实际面临此问题的其他用户。我们应该对这个问题给出正确答案。

当我们使用外部html和css文件的组件相对路径时，这个问题是众所周知的。只需在组件中添加元数据ModuleId即可解决绝对路径和相对路径的问题。

现在ModuleId做了什么？ ModuleId包含组件类的绝对URL [实际加载模块文件时]

Angular反射过程和metadata_resolver组件使用此 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  {

}

Answer 3

尝试提供相对路径，而不是绝对路径。

它将修复解决方案

like：component.ts中的templateUrl ='../employee/employee.html'

Answer 4

我的问题与这里的问题相同，我的解决方案却大不相同

引起问题的代码：

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

在此处进行更改：

styleUrls : ['']

对此：

styles : ['']

帮助我删除了模块未找到的错误，以为有人可能由于这个愚蠢的错误而得到此错误，这就是为什么共享我的解决方案

Answer 5

好的，上述解决方案非常好，必须使用它来解决问题。但是，如果您设置了模板属性，则可以显示相同的错误消息。当我使用ng g c创建组件时遇到了问题，然后它具有templateUrl，但是我在templateUrl内编写了一些测试html，认为它是template。希望对您有帮助

Angular 2：找不到模块：错误：无法解决

5 个答案: