首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Wepback导入html模板未加载

Wepback导入html模板未加载
EN

Stack Overflow用户
提问于 2018-07-18 18:38:21
回答 2查看 1.4K关注 0票数 3

我有一个用AngularJS做的巨石项目,使用的是Webpack,但我收到一个错误消息:Unexpected token < main.html.,当我的一个控制器中有下面这行代码时,就会出现这个错误:

代码语言:javascript
复制
 import templateUrl from './main.html';

据我所知,在我看来,Webpack没有正确绑定我的HTML模板。<符号来自main.html模板,已成功找到,但未解析。然后我考虑使用html-loader,并以这种方式使用它:

代码语言:javascript
复制
 import templateUrl from 'html-loader!./main.html';

令我大吃一惊的是,这并没有解决问题。

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

代码语言:javascript
复制
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 - Not found错误。

EN

回答 2

Stack Overflow用户

发布于 2018-07-20 22:49:40

这从根本上是从一个不同的角度解决问题,不使用templateUrl属性来加载指令的模板,但我已经使用了这种angularjs & taking配置,效果很好;它还通过内联模板来节省HTTP请求。

代码语言:javascript
复制
// webpack.config.js

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

然后,在指令文件中:

代码语言:javascript
复制
import templateString from './wherever.template.html'

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

export default directiveFunc

使用以下命令安装raw-loader加载器:

代码语言:javascript
复制
$ npm install raw-loader --save-dev
票数 4
EN

Stack Overflow用户

发布于 2018-07-20 22:43:45

您可能希望使用angular2-template-loader,而不是通用的。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51399886

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档