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

【问题标题】：Angular 2: Module not found: Error: Can't resolveAngular 2：找不到模块：错误：无法解决
【发布时间】：2017-03-04 05:21:32
【问题描述】：

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



}

任何帮助将不胜感激！

【问题讨论】：

sb.component.html 存在于 sb 文件夹中？如果它们都在同一个文件夹中，那么试试这个./sb.component.html
是的，它存在于 sb 文件夹中，app.ts 存在于该文件夹之外。
在SBComponent里面把templateUrl改成templateUrl: './sb.component.html'
谢谢你！那行得通！我投了一票，这算作回答吗？
@eagleEye 很高兴它有帮助:)

标签： angular angular2-template angular2-modules

【解决方案1】：

如果您的组件在同一个目录中，那么您也需要将您的templateUrl 指向同一个文件夹。以下是你可以做到的：

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

【讨论】：

【解决方案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  {

}

【讨论】：

这对我有用：@Component({ moduleId:module.id, selector: 'my-demo', templateUrl: './input-text-validation.html' })

【解决方案3】：

我的问题和这里的问题一样，我的解决方案完全不同

导致问题的代码：

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

这里通过改变：

styleUrls : ['']

到这里：

styles : ['']

帮我删除模块未找到错误，以为有人可能会因为这个愚蠢的错误而得到这个错误，这就是为什么分享我的解决方案

【讨论】：

我使用的是内嵌模板，因此还必须将 templateUrl 更改为 template -- 感谢您的回答；很快就找到了

【解决方案4】：

尝试给出相对路径而不是绝对路径。

它将修复解决方案。

喜欢：templateUrl = '../employee/employee.html' 在你的component.ts

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案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 {
  }

}

【讨论】：