Ng-table: Seltsames Problem bei der Verwendung von Webpack 2
Beim Versuch, auf Webpack 2 zu aktualisieren, schlägt mein Build mit dem folgenden Fehler fehl:
ERROR in ./~/ng-table/src/browser/pager.html Module build failed
Bibliothek importieren (fehlgeschlagen):
import * as ngTable from 'ng-table'
Bundle erforderlich (Erfolg):
require('ng-table/bundles/ng-table.js')
Webpack-Konfiguration:
'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
Alle 11 Kommentare
@faceleg konntest du das Problem lösen? Ich aktualisiere eine AngularJS 1.5-App auf Webpack 2 und sehe im Browserprotokoll ein GET http://app.finderbox.dev/app/ng-table/pager.html 404 (Not Found) .
richtmat
am 27. Jan. 2017
@richtmat nein, ich habe aufgegeben und Webpack 1 verwendet. Sehr interessiert an einer Lösung
faceleg
am 2. Feb. 2017
Ich denke, dies könnte tatsächlich mit ngtemplate-loader zusammenhängen, wenn relativeTo angegeben wird. Ich erhalte jedoch keine Fehlermeldungen, weil ich http://app.finderbox.dev/... nicht gefunden habe. Könnte verwandt sein: webpack-contrib/html-loader#91. Ich verwende [email protected] und [email protected] .
Versuchen Sie auf Ihrem test für .html relativeTo zu entfernen und Webpack auszuführen. Für mich lässt es sich gut kompilieren, und die ng-Table-Vorlagen werden dem Cache hinzugefügt. Knacken Sie Ihr Bündel auf und sehen Sie es sich an.
Da wir immer noch ein Präfix benötigen, spiele ich herum, indem ich einen Lade-/Testblock für meine App und einen separaten Block für node_modules habe.
mheppner
am 23. Feb. 2017
@mheppner bei mir ändert sich leider nichts (hier und https://github.com/esvit/ng-table/issues/969).
Der einzige Unterschied besteht darin, dass lokale Vorlagen ebenfalls falsch sind. Die URL, die auf .dev endet, ist meine lokale Entwicklungs-URL, Sie können natürlich nicht dorthin gehen.
Wie ich in https://github.com/esvit/ng-table/issues/969 gesagt habe, habe ich den Vorlageninhalt des Bundles in meine Dateien eingefügt. Die Vorlagen werden wie folgt in den Cache gestellt: $templateCache.put('ng-table/pager.html', html); . Ich habe immer noch Probleme herauszufinden, ob es sich um ein ng-Table- oder Webpack-Problem handelt ...
richtmat
am 27. Feb. 2017
Up, hier der gleiche Fehler
LuisUrrutia
am 3. Mai 2017
Yo, ich konnte dies lösen, indem ich änderte, wie ich ng-table in mein Projekt importiere. Das Importieren direkt aus dem Bundle hat es für mich behoben:
import 'ng-table/bundles/ng-table';
radius
am 25. Mai 2017
Funktioniert super: import 'of-table/bundles/of-table';
fedorovsky
am 7. Juni 2017
Hier das gleiche Problem. Beim Importieren wie
import { ngTableModule } from 'ng-table';
dann werden Kopf- und Fußzeile nicht gebündelt, was zu einem HTTP 404 führt.
Ändern des Imports in
import 'ng-table/bundles/ng-table';
löst das Kopf-/Fußzeilenproblem, aber es fehlt ein Fehler: Die Sortierindikatoren ^ und v werden nicht angezeigt. Es wird sortiert, aber es gibt keine visuelle Anzeige.
Irgendwelche Ideen?
sargue
am 7. Sept. 2017
@sargue Das ist ein paar Monate zu spät, aber ich selbst bin auf das gleiche Problem gestoßen, bei dem die Sortierung ^ und v nicht angezeigt wurde.
Addieren
import 'ng-table/bundles/ng-table.css';
:)
jheimbouch
am 23. Jan. 2018
Danke @jheimbouch , ich kann es nicht ausprobieren, weil ich nicht mehr an diesem Projekt arbeite. Aber trotzdem danke, ich könnte für jemand anderen nützlich sein.
sargue
am 24. Jan. 2018
Ich konnte die HTML-Dateien mit Webpack richtig kompilieren, indem ich Folgendes in meine webpack.config.js einfügte:
module: {
rules: [
// ...
{ test: /ng-table\/.*\.html$/, use: ['ngtemplate-loader?requireAngular&relativeTo=/src/browser/&prefix=ng-table/', 'html-loader'] }
]
}
Dies erfordert auch die NPM-Pakete ngtemplate-loader und html-loader . Vollständige Details: https://github.com/esvit/ng-table/issues/969#issuecomment -703458126
rmunn
am 5. Okt. 2020
Verwandte Themen
yujiayinshi
·
4Kommentare
muhlegg
·
29Kommentare
penchiang
·
5Kommentare
zeeshanhanif
·
5Kommentare
alienriquebm
·
6Kommentare
Hilfreichster Kommentar
Yo, ich konnte dies lösen, indem ich änderte, wie ich ng-table in mein Projekt importiere. Das Importieren direkt aus dem Bundle hat es für mich behoben:
import 'ng-table/bundles/ng-table';