Question

我有一个使用Webpack由AngularJS制作的整体项目，但是我收到一条错误消息：Unexpected token < main.html.当我的一个控制器中包含以下代码行时，就会发生此错误：

 import templateUrl from './main.html';

据我了解，Webpack无法正确捆绑我的HTML模板。 <符号来自main.html模板，可以成功找到它，但未解析。然后，我考虑使用html-loader并以这种方式使用它：

 import templateUrl from 'html-loader!./main.html';

令我惊讶的是，这并不能解决问题。

我正在使用Webpack版本"webpack": "^3.4.1",，这是我的配置：

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ContextReplacementPlugin = 
require('webpack/lib/ContextReplacementPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const nodeEnv = process.env.NODE_ENV || 'development';
const isProd = nodeEnv === 'production';

const styles = [
 'css-loader?importLoaders=1',
 'postcss-loader',
 'sass-loader'
];

module.exports = {
 entry: {
    'root-application': 'src/root-application/root-application.js',
},
output: {
    publicPath: '/dist/',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
},
module: {
    rules: [
        {
            test: /\.scss$/,
            use: !isProd
                ? [
                    'style-loader',
                    ...styles
                ]
                : ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: styles
                }),
            exclude: /(node_modules)/
        },
        {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            use: ['url-loader?limit=100000']
        },
        {
            test: /\.html$/,
            use: [
                'ngtemplate-loader',
                'html-loader'
            ],
            exclude: /(index)/
        },
        {
            test: /\.js?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
        },
        {
            test: /\.tsx?$/,
            loader: 'ts-loader',
        },
    ],
},
node: {
    fs: 'empty'
},
resolve: {
    modules: [
        __dirname,
        'node_modules',
    ],
},
plugins: [
    new CleanWebpackPlugin(['dist']),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'common-dependencies',
    }),
    new ContextReplacementPlugin(
        /(.+)?angular(\\|\/)core(.+)?/,
        path.resolve(__dirname, '../src')
    )
],
devtool: 'source-map',
externals: [],
devServer: {
    historyApiFallback: true
 }
};

我已经检查了关于Unexpected token <的其他主题，我确定在“网络”标签中没有404-找不到错误。

Answer 1

从根本上解决问题的方法是，不使用templateUrl属性来加载指令的模板，但是我使用了angularjs和webpack的配置效果很好；通过内联模板，它还保存了HTTP请求。

// webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      // Load raw HTML files for inlining our templates
      { test: /\.(html)$/, loader: "raw-loader" },
      // ... other rules, config, etc.
    ]
  }
}

然后，在指令文件中：

import templateString from './wherever.template.html'

function directiveFunc() {
  return {
    // template, rather than templateUrl   
    template: templateString,
    // ...
  }
}

export default directiveFunc

通过以下方式安装raw-loader加载程序：

$ npm install raw-loader --save-dev

Answer 2

您可能要使用angular2-template-loader而不是通用的。

Wepback导入HTML模板未加载

2 个答案: