Angular 2未能加载navbar.html

下面是使用模板时我的组件的代码：“”代码工作正常，但使用模板URL时出现错误

应用程序组件

import { navbarComponent } from './HomeValley/navbar';
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello</h1>
            <navbar></navbar>`
})
export class AppComponent { }

Navbar .ts
import { Component } from '@angular/core';
@Component({
    selector:'navbar',
    templateUrl:'app/../navbar.html'
})

export class navbarComponent{}

app.module.ts
import { navbarComponent } from './HomeValley/navbar';
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent,navbarComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import{navbarComponent}来自'/HomeValley/navbar'；
从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`你好
`
})
导出类AppComponent{}
导航栏
从'@angular/core'导入{Component}；
@组成部分({
选择器：'navbar'，
templateUrl:'app/./navbar.html'
})
导出类navbarComponent{}
app.module.ts
从“./HomeValley/navbar”导入{navbarComponent}；
从“@angular/core”导入{NgModule}；
从“@angular/platform browser”导入{BrowserModule}；
从“./app.component”导入{AppComponent}；
@NGD模块({
导入：[BrowserModule]，
声明：[AppComponent，navbarComponent]，
引导：[AppComponent]
})
导出类AppModule{}

---

问题在于navbar.html的url

navbar.ts应为：

import { Component } from '@angular/core';
@Component({
    selector:'navbar',
    templateUrl:'./navbar.html'
})

import { Component } from '@angular/core';
@Component({
    selector:'navbar',
    templateUrl:'./HomeValley/navbar.html'
})

这意味着在

navbar.ts

旁边有

navbar.html

更新

您还可以尝试使用完整路径：

navbar.ts应为：

import { Component } from '@angular/core';
@Component({
    selector:'navbar',
    templateUrl:'./navbar.html'
})

import { Component } from '@angular/core';
@Component({
    selector:'navbar',
    templateUrl:'./HomeValley/navbar.html'
})

下面是我用一个工作示例制作的plunker：

Navbar.ts 或者，如下所示：-

---

实际上，您的代码很好，但文件名不符合约定。 文件名应该是-

导航栏。组件.ts如果导航栏组件是您的组件

同样，遵循html和css文件的约定（即Navbar.component.html和Navbar.component.css）

下面是代码的工作示例

从'@angular/core'导入{Component}；
@组成部分({
选择器：'navbar'，
模板：'Hi'
})
导出类navbarComponent{}

有关更多详细信息，请参见：

Edit1：我发现的另一个问题是，使用绝对路径

---

查看此问题了解更多更新信息：

您的

navbar.ts

与您的

navbar.html

位于同一文件夹中？是的，两个文件位于同一文件夹中您的错误表明您使用的是如下绝对url:

templateUrl:'navbar.html'

或

templateUrl:'/navbar.html'

，把那个点放在斜线前你能在plunkr上做这个吗？不我没用plunkr试试这个，它可能会帮助你。事实上，我是堆栈溢出新手，你能告诉我如何显示你的结构是你的navbarComponent在里面-HomeValley folder>navbar folder是的，它在Home valley folder里面，navbar.html也在Home valley folder里面更新答案，试试这个。你能为我提供angular 2最终完整版本模板的链接，并更新所有内容吗？@AliMirza如果有任何更新，请告诉我question@AliMirza你是否尝试过我的解决方案，它对我有效。你检查过我的模板吗？是的，我检查过你的模板可能是我的项目有问题，现在我创建了一个新项目，它工作正常

import { navbarComponent } from './HomeValley/navbar/navbar';

 Get an IDE- Visual Studio Code

    1) Install node.js from https://nodejs.org/en/

   Open command Prompt  and run commands 
  -----------------------------------------------
    2) check `node -v` and `npm -v` in command prompt
    3) Install angular cli as `npm install -g @angular/cli@latest` in command prompt
    4) check ng -v 
    5) Generate, New project(Refer documenttation below) by typing- ng new Myapp  
    5) then, npm install 
    6) ng serve --o 

    Refer, this link:- https://github.com/angular/angular-cli  for commands.

import { Component } from '@angular/core';
@Component({
    selector:'navbar',
    template:'<h1>Hi</h1>'
})

export class navbarComponent{}