Mencoba memutakhirkan ke webpack 2, build saya gagal dengan kesalahan berikut:
ERROR in ./~/ng-table/src/browser/pager.html Module build failed
Mengimpor perpustakaan (gagal):
import * as ngTable from 'ng-table'
Memerlukan bundel (berhasil):
require('ng-table/bundles/ng-table.js')
konfigurasi paket web:
'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 apakah Anda bisa menyelesaikan masalah itu? Saya memutakhirkan aplikasi AngularJS 1.5 ke Webpack 2 dan melihat GET http://app.finderbox.dev/app/ng-table/pager.html 404 (Not Found)
di log browser.
@richtmat tidak, saya menyerah dan telah menggunakan webpack 1. Sangat tertarik dengan solusi
Saya pikir ini mungkin sebenarnya terkait dengan ngtemplate-loader
saat menentukan relativeTo
. Saya tidak mendapatkan kesalahan apa pun tentang tidak menemukan http://app.finderbox.dev/...
. Mungkin terkait: webpack-contrib/html-loader#91. Saya menggunakan [email protected]
dan [email protected]
.
Pada test
Anda untuk .html
, coba hapus relativeTo
dan jalankan Webpack. Bagi saya, ini dapat dikompilasi dengan baik, dan templat tabel-ng ditambahkan ke cache. Buka bundel Anda dan periksa.
Karena kita masih memerlukan awalan, saya mengacaukan dengan memiliki blok pemuat/pengujian untuk aplikasi saya dan blok terpisah untuk node_modules.
@mheppner sayangnya, bagi saya itu tidak mengubah apa pun (di sini dan https://github.com/esvit/ng-table/issues/969).
Satu-satunya perbedaan adalah bahwa templat lokal juga salah. Url yang berakhiran .dev
adalah url pengembangan lokal saya, Anda jelas tidak dapat pergi ke sana.
Seperti yang saya katakan di https://github.com/esvit/ng-table/issues/969 , saya meletakkan konten templat bundel di file saya. Template dimasukkan ke dalam cache seperti ini: $templateCache.put('ng-table/pager.html', html);
. Saya masih berjuang untuk mencari tahu apakah ini masalah ng-table atau webpack ...
Naik, kesalahan yang sama di sini
Yo, saya dapat menyelesaikan ini dengan mengubah cara saya mengimpor tabel-ng ke dalam proyek saya. Mengimpor langsung dari bundel memperbaikinya untuk saya:
import 'ng-table/bundles/ng-table';
Berfungsi dengan baik: import 'of-table/bundles/of-table';
Masalah yang sama di sini. Saat mengimpor suka
import { ngTableModule } from 'ng-table';
maka header dan footer tidak dibundel sehingga menghasilkan HTTP 404.
Ubah impor menjadi
import 'ng-table/bundles/ng-table';
memecahkan masalah header/footer tetapi ada kesalahan yang hilang: indikator penyortiran ^ dan v tidak ditampilkan. Penyortiran terjadi tetapi tidak ada indikasi visual.
Ada ide?
@sargue Ini terlambat beberapa bulan, tetapi saya sendiri mengalami masalah yang sama dengan pengurutan ^ dan v tidak muncul.
Menambahkan
import 'ng-table/bundles/ng-table.css';
:)
Terima kasih @jheimbouch , saya tidak bisa mencobanya karena saya tidak lagi mengerjakan proyek itu. Tapi terima kasih, saya mungkin berguna untuk orang lain.
Saya bisa mendapatkan kompilasi file HTML dengan benar dengan Webpack dengan meletakkan yang berikut ini di webpack.config.js saya:
module: {
rules: [
// ...
{ test: /ng-table\/.*\.html$/, use: ['ngtemplate-loader?requireAngular&relativeTo=/src/browser/&prefix=ng-table/', 'html-loader'] }
]
}
Ini juga membutuhkan paket NPM ngtemplate-loader
dan html-loader
. Detail lengkap: https://github.com/esvit/ng-table/issues/969#issuecomment -703458126
Komentar yang paling membantu
Yo, saya dapat menyelesaikan ini dengan mengubah cara saya mengimpor tabel-ng ke dalam proyek saya. Mengimpor langsung dari bundel memperbaikinya untuk saya:
import 'ng-table/bundles/ng-table';