Ng-table: 使用 webpack 2 时出现的奇怪问题

创建于 2017-01-17  ·  11评论  ·  资料来源: esvit/ng-table

尝试升级到 webpack 2,我的构建失败并出现以下错误:

ERROR in ./~/ng-table/src/browser/pager.html Module build failed

导入库(失败):

import * as ngTable from 'ng-table'

需要捆绑(成功):

require('ng-table/bundles/ng-table.js')

网络包配置:

'use strict';

const webpack = require('webpack');
const NgAnnotatePlugin = require('ng-annotate-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const argv = require('yargs').argv;
const path = require('path');

module.exports = {
  watch: false,
  bail: true,
  cache: true,
  devtool: 'source-map',
  entry: './typescript/app/app.ts',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'build/main.bundle.js',
    sourceMapFilename: '[name]-[chunkhash].map'
  },
  resolve: {
    extensions: [
      '.webpack.js',
      '.web.js',
      '.ts',
      '.js'
    ],
    alias: {
      Raven: path.resolve(__dirname, 'node_modules/raven-js/src/raven.js')
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
    }),
    new NgAnnotatePlugin({
      add: true
    }),
    new ExtractTextPlugin('build/[name].css'),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      inject: false,
      hash: true,
      cache: false,
      template: 'ejs-loader!./typescript/index.html',
      locals: {
        environment: ENVIRONMENT,
        production: process.env.PRODUCTION,
        cdnDomain: CDN_DOMAIN,
        backendUrl: BACKEND_URL,
        releaseVersion: RELEASE_VERSION
      }
    }),
    new webpack.SourceMapDevToolPlugin({
      filename: '[file].map', // if no value is provided the sourcemap is inlined
      test: /\.(ts|js)($|\?)/i // process .js and .ts files only
    })
  ],
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader'
      },
      {
        test: /\.p?css$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: [
            'css-loader',
            'postcss-loader'
          ]
        })
      },
      {
        test: /\.html$/,
        exclude: /index.html$/,
        use: [
          {
            loader: 'ngtemplate-loader',
            options: {
              relativeTo: path.resolve(__dirname, 'typescript')
            }
          },
          {
            loader: 'html-loader'
          }
        ]
      }
    ]
  },
  devServer: {
    historyApiFallback: true
  }
}

最有用的评论

哟,我可以通过更改将 ng-table 导入项目的方式来解决这个问题。 直接从包中导入为我修复了它:

import 'ng-table/bundles/ng-table';

所有11条评论

@faceleg你能解决这个问题吗? 我正在将 AngularJS 1.5 应用程序升级到 Webpack 2,并在浏览器日志中看到GET http://app.finderbox.dev/app/ng-table/pager.html 404 (Not Found)

@richtmat不,我放弃了,一直在使用 webpack 1。不过对解决方案非常感兴趣

我认为这实际上可能与指定relativeTo ngtemplate-loader $ 有关。 不过,我没有收到任何关于找不到http://app.finderbox.dev/...的错误。 可能相关:webpack-contrib/html-loader#91。 我正在使用[email protected][email protected]

test.html上,尝试删除relativeTo并运行 Webpack。 对我来说,它编译得很好,并且 ng-table 模板被添加到缓存中。 破解打开你的包并检查它。

因为我们仍然需要一个前缀,所以我正在为我的应用程序设置一个加载器/测试块和一个单独的 node_modules 块。

@mheppner不幸的是,对我来说它并没有改变任何事情(这里和 https://github.com/esvit/ng-table/issues/969)。

唯一的区别是本地模板也是错误的。 .dev结尾的 url 是我的本地开发 url,你显然不能去那里。

正如我在https://github.com/esvit/ng-table/issues/969中所说,我将包的模板内容放在我的文件中。 模板像这样被放入缓存中: $templateCache.put('ng-table/pager.html', html); 。 我仍然很难确定它是 ng-table 还是 webpack 问题......

顶,同样的错误

哟,我可以通过更改将 ng-table 导入项目的方式来解决这个问题。 直接从包中导入为我修复了它:

import 'ng-table/bundles/ng-table';

效果很好:导入'of-table/bundles/of-table';

同样的问题在这里。 导入时喜欢

import { ngTableModule } from 'ng-table';

那么页眉和页脚没有捆绑导致 HTTP 404。

将导入更改为

import 'ng-table/bundles/ng-table';

解决了页眉/页脚问题,但缺少一个小故障:未显示 ^ 和 v 排序指示符。 排序发生,但没有视觉指示。

有任何想法吗?

@sargue这已经晚了几个月,但我自己也遇到了排序^和v没有显示的同样问题。

添加

import 'ng-table/bundles/ng-table.css';

:)

谢谢@jheimbouch ,我无法尝试,因为我不再从事该项目。 但无论如何,谢谢,我可能对其他人有用。

通过将以下内容放入我的 webpack.config.js 中,我能够使用 Webpack 正确编译 HTML 文件:

    module: {
      rules: [
        // ...
        { test: /ng-table\/.*\.html$/, use: ['ngtemplate-loader?requireAngular&relativeTo=/src/browser/&prefix=ng-table/', 'html-loader'] }
      ]
    }

这也需要 NPM 包ngtemplate-loaderhtml-loader 。 完整详情: https ://github.com/esvit/ng-table/issues/969#issuecomment -703458126

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

penchiang picture penchiang  ·  5评论

richtmat picture richtmat  ·  7评论

raul1991 picture raul1991  ·  6评论

ivyfae picture ivyfae  ·  12评论

andreicristianpetcu picture andreicristianpetcu  ·  6评论