如何在 Angular 1.x 和 webpack 中使用模板答案

【问题标题】：How to use templates with angular 1.x and webpack如何在 Angular 1.x 和 webpack 中使用模板
【发布时间】：2016-08-05 03:29:43
【问题描述】：

我正在尝试将 webpack 与我的 Angular 应用程序一起使用，但每当我尝试将 html 加载到模板时，我都会遇到错误。这是我目前得到的：

模块解析失败：C:\Users\Fabian\Dropbox\FixMyCity\FixMyCity\src\FixMyCity.Web\App\settings\settings.html 意外令牌 (1:0)
您可能需要适当的加载程序来处理此文件类型。

这让我觉得我没有合适的 html 加载器，但我已经用 raw-loader 和 html-load 尝试过，但它们都不适合我。

这是我目前的webpack.config.js

module.exports = {
    entry: './App/app.js',
    output: {
        filename: './wwwroot/app-bundle.js'
    },
    loaders: [

            { test: /\.html$/, loader: 'html' },
            { test: /\.css$/, loader: 'style!css' },
    ]
};

app.js

var app = angular.module('app', ['auth0', 'angular-storage', 'angular-jwt', 'ngRoute'])
.config(['$routeProvider', 'authProvider', 'jwtInterceptorProvider', '$httpProvider', configFunction])


function configFunction($routeProvider, authProvider, jwtInterceptorProvider, $httpProvider) {
    // Configure routes for your application
    $routeProvider
      .when('/', {
          controller: 'HomeCtrl',
          template: require('./home/home.html'),
          requiresLogin: true
      })
}

【问题讨论】：

您是否使用npm 安装了html-loader？

标签： angularjs webpack

【解决方案1】：

您必须从 npm 安装 html-loader，然后您必须在属性加载器中放入值 'html-loader'。

像这样：

module.exports = {
entry: './App/app.js',
output: {
    filename: './wwwroot/app-bundle.js'
},
loaders: [

        { test: /\.html$/, loader: 'html-loader' },
        { test: /\.css$/, loader: 'style!css' },
]};

【讨论】：