使用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文件的模板路徑的角度

回答

相關問題