通過webapack在生產中找不到角templateurl

我在打字稿中有一個角度爲1.5的應用程序組件。我正在使用webpack作爲構建工具。我有以下成分 -通過webapack在生產中找不到角templateurl

import {Component} from "../../common/decorators" 

const app = angular.module('app'); 
@Component(app, { 
    selector: 'navComponent', 
    controllerAs: 'ctrl', 
    styleUrls: './nav.style.scss', 
    templateUrl: './nav.template.html' 
}) 
class navComponent { 
static $inject = ['$scope', '$attrs', '$element']; 

constructor(private $element, $scope: ng.IScope, $attrs) { 

} 
}

和裝飾是

export const Component = function(module: ng.IModule, options: { 
    selector:string, 
    controllerAs?: string, 
    styleUrls?: string, 
    template?: string, 
    templateUrl?: string 
}) { 
    return (controller: Function) => { 
    module.component(options.selector, angular.extend(options, { controller: controller })); 
} 
}

它工作正常，在本地機器上，但這樣做的WebPack生成後，它在生產中不工作與bundle.js

這裏我正在使用的加載程序。

loaders: [ 
     { 
      test: /\.html$/, 
      loader: 'html-loader', 
     }

以下是錯誤消息：

錯誤：[$編譯：tpload]未能加載模板：/components/nav/nav.template.html（HTTP狀態：404未找到）

來源

2016-09-21 Jhankar

您可以嘗試嵌入您的模板：

... 
template: require('./nav.template.html') 
...

如果您要使用單獨的模板文件，你可以使用CopyWebpackPlugin。但是，當您部署應用程序時，您會爲每個文件獲得一個額外的請求。

來源

2016-09-21 19:53:30

感謝您的回覆。有用。我想知道爲什麼網址不起作用？此外，使用webpack處理html文件的最佳做法是什麼。單獨調用一個單獨的文件或模塊內部。 – Jhankar

Url因爲webpack dev服務器沒有工作，例如不會在'虛擬'目錄中創建文件，所以角色無法獲取它。關於最佳實踐 - 無法回答...我更喜歡使用'require'，並且webpack爲我的應用程序生成一個大的js文件。它沒有任何模板html的請求，只能從API獲取JSON –

通過webapack在生產中找不到角templateurl

回答

相關問題