使用HTML文件的模板路径的角度

试图更好地理解@component选择器和模板来路由我的路径到一个html文件。我试图简单地指向html文件时出现错误，即使它看起来有我在我的index.ts文件中需要的内容。我得到的错误是：使用HTML文件的模板路径的角度

在所涉及的文件看，我不知道什么是错的。这里是我的user.component.ts：

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'users', 
    template: require('./components/userMgmt/inviteUser.html') 
}) 
export class userComponent {}

然后从应用程序的根我index.ts：

import {NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import 'jquery'; 
import 'bootstrap'; 
import 'font-awesome/css/font-awesome.css'; 

import {routing, RootComponent} from './routes'; 
import {AppComponent} from './containers/app'; 
import {HeaderComponent} from './components/header'; 
import {userComponent} from './components/userMgmt/user.component'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    routing 
    ], 
    declarations: [ 
    RootComponent, 
    AppComponent, 
    HeaderComponent, 
    userComponent 
    ], 
    bootstrap: [RootComponent] 
}) 
export class AppModule {}

最后，我index.ts从我的/ src目录的根目录：

import 'core-js/client/shim'; 
import 'zone.js/dist/zone'; 

import '@angular/common'; 
import 'rxjs'; 

import './index.scss'; 

import {enableProdMode} from '@angular/core'; 
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 
import {AppModule} from './app'; 


declare var process: any; 
if (process.env.NODE_ENV === 'production') { 
    enableProdMode(); 
} else { 
    Error['stackTraceLimit'] = Infinity; // tslint:disable-line:no-string-literal 
    require('zone.js/dist/long-stack-trace-zone'); // tslint:disable-line:no-var-requires 
} 

platformBrowserDynamic().bootstrapModule(AppModule);

我在哪里错了？我没有看到任何问题。我没有正确使用模板？似乎我应该能够注入HTML或添加一个路径到HTML文件，不是？

根据第一个答案，它修复了它的一部分，但不明白为什么现在它不了解路径。控制台不再输出错误，但该页面不会在浏览器中加载。以下是错误：

这里是我的文件结构的屏幕截图：

来源

2017-06-13 Mark

看你的组件文件夹和代码。我觉得HTML组件的路径不正确。试试这个代码，看看。

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'users', 
    templateUrl: './inviteUser.html' 
}) 
export class userComponent {}

来源

2017-06-13 20:37:07

谢谢，这帮助了，但不是在我的控制台中的其他错误，现在开发工具说，它无法找到。查看更新后问题中的最后2个屏幕截图，查看我所指的内容。 – Mark

所以看来，如果我添加为绝对URL，它解决了罚款。因此，这︰templateUrl：'app/components/userMgmt/inviteUser.html'工作，但只是一个相对的URL没有。想法？ – Mark

我正在寻找可能的场景。你正在使用哪个版本的Angular？您是否使用angular-cli来设置项目？我强烈地感到，配置有问题但不确定。 –

添加的moduleId在@Component

@Component({ 
     selector: 'users', 
     moduleId: module.id, 
     templateUrl: './inviteUser.html' 
})

来源

2017-06-14 05:02:22

使用HTML文件的模板路径的角度

回答

相关问题