如何通過保留'templateurl'來編譯角度2 webpack如同

Webpack通過在dist文件夾中生成'js'來編譯'typescript'文件。我發現的WebPack正在改變這一切 'templateurl' 像這樣的 '樣板'：如何通過保留'templateurl'來編譯角度2 webpack如同

我的打字稿組件：

@Component({ 
selector: 'app', 
encapsulation: ViewEncapsulation.None, 
templateUrl: 'app.html', // <---------------------- 
directives: [HeaderComponent, SideBar], 
})

下面自動生成的編譯JS組件

App = __decorate([ 
     core_1.Component({ 
      selector: 'app', 
      encapsulation: core_1.ViewEncapsulation.None, 
      template: __webpack_require__(718),// <---------- 
      directives: [header_component_1.HeaderComponent, sidebar_component_1.SideBar], 
     }), 
     __metadata('design:paramtypes', [(typeof (_a = typeof app_service_1.AppState !== 'undefined' && app_service_1.AppState) === 'function' && _a) || Object]) 
    ], App);

我想要什麼要做的只是在生成的文件中繼續使用'templateUrl'。

我使用asp.net mvc，我有很多CSHTML文件，我想繼續使用它。我想改變webpack編譯'ts'的方式，並忽略'取得html內容'的想法。所以我期待：

App = __decorate([ 
     core_1.Component({ 
      selector: 'app', 
      encapsulation: core_1.ViewEncapsulation.None, 
      templateUrl: 'app.html', // <---------------------- 
      directives: [header_component_1.HeaderComponent, sidebar_component_1.SideBar], 
     }), 
     __metadata('design:paramtypes', [(typeof (_a = typeof app_service_1.AppState !== 'undefined' && app_service_1.AppState) === 'function' && _a) || Object]) 
    ], App);

我試圖像這樣手動更改自動生成的文件。它的工作原理。我想保留templateUrl。

來源

2016-07-20 bunjeeb

Webpack沒有這樣做。如果這樣的事情完成了，你可能有一個裝載程序可以做到這一點。

您可能正在使用具有預配置webpack配置的入門工具包。我最好的選擇是你正在使用angular2-webpack-starter。

在angular2-的WebPack起動有一個叫做所使用改變文字串（即：路徑HTML），以Component.templateUrl轉換爲Component.templateangular2模板裝載機插件安裝到一個需要聲明。

此過程內嵌了所有html和樣式的，因此它不僅適用於html模板，還適用於styleUrls樣式。

要刪除此功能，在您的WebPack配置文件中的變化如下：

module: { 
    loaders: [ 
     { 
     test: /\.ts$/, 
     loaders: ['awesome-typescript-loader', 'angular2-template-loader'], 
     exclude: [/\.(spec|e2e)\.ts$/] 
     } 
    ] 
    }

要這樣：

module: { 
    loaders: [ 
     { 
     test: /\.ts$/, 
     loaders: ['awesome-typescript-loader'], 
     exclude: [/\.(spec|e2e)\.ts$/] 
     } 
    ] 
    }

也就是說，消除執行內聯裝載機（angular2模板裝載機）

如果你想得到更深一層，這裏是的代碼部分angular2-template-loader：

var newSource = source.replace(templateUrlRegex, function (match, url) { 
       // replace: templateUrl: './path/to/template.html' 
       // with: template: require('./path/to/template.html') 
       return "template:" + replaceStringsWithRequires(url); 
       }) 
       .replace(stylesRegex, function (match, urls) { 
       // replace: stylesUrl: ['./foo.css', "./baz.css", "./index.component.css"] 
       // with: styles: [require('./foo.css'), require("./baz.css"), require("./index.component.css")] 
       return "styles:" + replaceStringsWithRequires(urls); 
       }); 

    // Support for tests 
    if (this.callback) { 
    this.callback(null, newSource, sourcemap) 
    } else { 
    return newSource; 
    } 
};

您可以在評論中看到，這正是您所遇到的問題。您還可以查看source code

應當指出的是，內聯的選擇退出會導致性能的下降。您的應用將不得不執行更多的http請求，並且您的HTML標記（模板）將保持原始格式。換句話說，您編寫的HTML代碼將無法獲得webpack提供的優化。我不建議選擇退出此裝載機

來源

2016-07-20 09:41:32

如何通過保留'templateurl'來編譯角度2 webpack如同

回答

相關問題