Angular 2：模块未找到：错误：无法解析

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  {



}

非常感谢任何帮助！

- joeCarpenter

---

sb.component.html exist inside sb folder ? if they are both in the same folder then try this ./sb.component.html - Idrees Khan

是的，它存在于 sb 文件夹中，app.ts 存在于该文件夹之外。 - joeCarpenter

在 SBComponent 中将 templateUrl 改为 templateUrl: './sb.component.html'。 - Idrees Khan

不..那只是重要的注释..要算作已回答，有人应该将其添加为答案，并且 @eagleEye 需要接受它。 - Suraj Rao

@eagleEye 很高兴能够帮到您 :) - Idrees Khan

Answer 1

如果你的组件与文件在同一目录下，那么你需要将templateUrl指向同一个文件夹。以下是实现方法：

如下：

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

- Idrees Khan

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  {

}

- Jaydip Jadhav

---

这是我用过的代码：@Component({ moduleId:module.id, selector: 'my-demo', templateUrl: './input-text-validation.html' }) - Hari Gillala

Answer 3

我遇到的问题与此处所问的问题相同，我的解决方案却完全不同。

导致问题的代码：

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

在此处更改:

styleUrls : ['']

转换为：

styles : ['']

我帮助解决了“模块未找到”错误，认为有人可能会因为这个愚蠢的错误而遇到此错误，所以分享了我的解决方案。

- Ravi Khatri

---

我正在使用内联模板，因此不得不将 templateUrl 更改为 template -- 感谢您的答案；我很快就找到了这个。 - Schalton

在我的情况下，这个问题还伴随着其他问题一起发生。我已经在这里发布了答案：https://dev59.com/HZvga4cB1Zd3GeqP-f4n#74994465 - Arsen Khachaturyan

Answer 4

尝试使用相对路径而不是绝对路径。

这将修复解决方案。

例如：在component.ts中使用 templateUrl = '../employee/employee.html'

- Sarath potlacheruvu

Answer 5

好的，以上解决方案都非常优秀，一定要使用它们来查看是否可以修复您的问题。但是，如果您已经设置了Template属性，则可能会显示相同的错误消息。我在使用ng g c创建组件时遇到了这个问题，然后它有templateUrl，但我正在templateUrl内部编写某些测试html，认为它是模板。希望这能帮到你。

- Muniro

Answer 6

一个React开发者向我展示了一些东西。 进入你的tsconfig.json文件，在你拥有所有JSON选项和代码的外部花括号{}内，添加以下内容：

"include": [
    "src/app"
]
//if all your components files are in app, you can do this so as to make importation easy. You can just call the component. It should work for you.

从这里开始，您可以轻松地使用导入而不需要太多的斜杠 / 和点。就像在我的代码中一样，

import { Component, OnInit, Input, Injectable, NgModule } from '@angular/core';
import { products } from "product";
//instead of import { products } from ".../../product"; which will still import but might show error.
import { FormsModule } from '@angular/forms';




@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss'],
  providers:  [
    FormsModule
  ]
})



export class ProductListComponent implements OnInit {

 products = products;


onNotify() {
  window.alert("You will be notified when the product goes on discount")
}

share() {
  window.alert('The Product Has Been Added To Your Cart')
}


  constructor() {

   }

  ngOnInit(): void {
  }

}

- Whizfactor

Answer 7

对我来说，将styleUrls : ['']改为

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

将 styles: [''] 放入其中解决此问题。

- Mateusz Wąsik