Ng-table: Problème étrange lors de l'utilisation de Webpack 2

Créé le 17 janv. 2017 · 11Commentaires · Source: esvit/ng-table

En essayant de mettre à niveau vers Webpack 2, ma construction échoue avec l'erreur suivante :

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

Importation de la bibliothèque (échec) :

import * as ngTable from 'ng-table'

Bundle requis (succès):

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

configuration webpack :

'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
  }
}

Source

faceleg

Commentaire le plus utile

Yo, j'ai pu résoudre ce problème en changeant la façon dont j'importe ng-table dans mon projet. L'importation directement à partir du bundle l'a corrigé pour moi:

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

radius le 25 mai 2017

👍9

Tous les 11 commentaires

@faceleg avez-vous pu résoudre ce problème ? Je mets à niveau une application AngularJS 1.5 vers Webpack 2 et je vois un GET http://app.finderbox.dev/app/ng-table/pager.html 404 (Not Found) dans le journal du navigateur.

richtmat le 27 janv. 2017

👍3

@richtmat non, j'ai abandonné et j'utilise Webpack 1. Très intéressé par une solution cependant

faceleg le 2 févr. 2017

Je pense que cela pourrait en fait être lié à ngtemplate-loader lors de la spécification relativeTo . Cependant, je ne reçois aucune erreur de ne pas trouver http://app.finderbox.dev/... . Peut être lié : webpack-contrib/html-loader#91. J'utilise [email protected] et [email protected] .

Sur votre test pour .html , essayez de supprimer relativeTo et d'exécuter Webpack. Pour moi, il compile bien et les modèles ng-table sont ajoutés au cache. Ouvrez votre paquet et vérifiez-le.

Comme nous aurons toujours besoin d'un préfixe, je m'amuse à avoir un bloc de chargement/test pour mon application et un bloc séparé pour node_modules.

mheppner le 23 févr. 2017

@mheppner malheureusement, pour moi ça ne change rien (ici et https://github.com/esvit/ng-table/issues/969).

La seule différence est que les modèles locaux sont également erronés. L'URL se terminant par .dev est mon URL de développement local, vous ne pouvez évidemment pas y aller.

Comme je l'ai dit dans https://github.com/esvit/ng-table/issues/969 , j'ai mis le contenu du modèle du bundle dans mes fichiers. Les modèles sont mis dans le cache comme ceci : $templateCache.put('ng-table/pager.html', html); . J'ai toujours du mal à savoir si c'est un problème de ng-table ou de webpack...

richtmat le 27 févr. 2017

👍5

Up, même erreur ici

LuisUrrutia le 3 mai 2017

Yo, j'ai pu résoudre ce problème en changeant la façon dont j'importe ng-table dans mon projet. L'importation directement à partir du bundle l'a corrigé pour moi:

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

radius le 25 mai 2017

👍9

Fonctionne très bien : importez 'of-table/bundles/of-table' ;

fedorovsky le 7 juin 2017

🎉4

Même problème ici. Lors de l'importation comme

import { ngTableModule } from 'ng-table';

alors l'en-tête et le pied de page ne sont pas regroupés, ce qui entraîne un HTTP 404.

Modification de l'importation vers

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

résout le problème d'en-tête/pied de page mais il manque un petit problème : les indicateurs de tri ^ et v ne sont pas affichés. Le tri a lieu mais il n'y a aucune indication visuelle.

Des idées?

sargue le 7 sept. 2017

👍1

@sargue C'est avec quelques mois de retard, mais j'ai moi-même rencontré le même problème avec le tri ^ et v ne s'affichant pas.

Ajouter

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

jheimbouch le 23 janv. 2018

🎉1 👍1

Merci @jheimbouch , je ne peux pas l'essayer car je ne travaille plus sur ce projet. Mais merci quand même, je peux être utile à quelqu'un d'autre.

sargue le 24 janv. 2018

👍1

J'ai pu compiler correctement les fichiers HTML avec Webpack en mettant ce qui suit dans mon webpack.config.js :

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

Cela nécessite également les packages NPM ngtemplate-loader et html-loader . Tous les détails : https://github.com/esvit/ng-table/issues/969#issuecomment -703458126