尝试升级到 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
}
}
@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-loader
和html-loader
。 完整详情: https ://github.com/esvit/ng-table/issues/969#issuecomment -703458126
最有用的评论
哟,我可以通过更改将 ng-table 导入项目的方式来解决这个问题。 直接从包中导入为我修复了它:
import 'ng-table/bundles/ng-table';