Angular无法找到templateUrl [英] Angular cannot find templateUrl

问题描述

我正在尝试在angular js 2中使用以下代码加载HTML文件. 该文件位于products文件夹下，而我尝试加载的html文件也位于同一文件夹中.仍然无法正常工作.

I am trying to load Html files using the following code in angular js 2. This file is available under products folder and the html file that i am trying to load is also in the same folder. Still it is not working.

import {Component} from 'angular2/core';

@Component({
    templateUrl:'./products/app.component.pen.html'
})

export class PenComponent
{

}

正在从下面的AppComponent加载上面的文件.

The above file is getting loaded from the below AppComponent.

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";
import {PenComponent} from "./products/app.component.pen";
import {BookComponent} from "./products/app.component.book";  

@Component({
    selector: 'my-app',
    template: `
            <header>
                <ul>
                <li>
                <a [routerLink]="['Pen']">Pen</a></li>

                <li>
                <a [routerLink]="['Book']">Book</a></li>
                </ul>

            </header>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]

})

@RouteConfig([
    {path: '/pen', name: 'Pen', component: PenComponent, useAsDefault:true}
    {path: '/book', name: 'Book', component: BookComponent}


])


export class AppComponent {

}

推荐答案

对于styleUrls和templateUrls，您必须使用相对于项目根目录的路径(因此，请使用app/foo/bar/products/app.component.pen.html而不是./products/app.component.pen.html).

You have to use paths relative to the root of the project for styleUrls and templateUrls (so app/foo/bar/products/app.component.pen.html instead of ./products/app.component.pen.html).

要使用相对于组件文件的url，您的项目必须是commonjs模块(在tsconfig中设置"module":"commonjs")，并且必须在组件装饰器中包含module.id:

To use urls relative to the component file, your project must be a commonjs module (set "module":"commonjs" in tsconfig), and you have to include module.id in your component decorators:

@Component({ 
  selector: 'foo',
  moduleId: module.id // <== need this
  templateUrl: './foo.html'
})

这篇关于Angular无法找到templateUrl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！