Ng-table: Problema extraño al usar webpack 2

Creado en 17 ene. 2017 · 11Comentarios · Fuente: esvit/ng-table

Al intentar actualizar a webpack 2, mi compilación falla con el siguiente error:

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

Importación de biblioteca (falla):

import * as ngTable from 'ng-table'

Paquete requerido (éxito):

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

configuración del paquete 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
  }
}

Fuente

faceleg

Comentario más útil

Yo, pude resolver esto cambiando la forma en que importo ng-table en mi proyecto. Importar directamente desde el paquete lo arregló para mí:

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

radius en 25 may. 2017

👍9

Todos 11 comentarios

@faceleg , ¿has podido resolver ese problema? Estoy actualizando una aplicación AngularJS 1.5 a Webpack 2 y veo GET http://app.finderbox.dev/app/ng-table/pager.html 404 (Not Found) en el registro del navegador.

richtmat en 27 ene. 2017

👍3

@richtmat no, me di por vencido y he estado usando webpack 1. Sin embargo, estoy muy interesado en una solución

faceleg en 2 feb. 2017

Creo que esto podría estar relacionado con ngtemplate-loader al especificar relativeTo . Sin embargo, no recibo ningún error sobre no encontrar http://app.finderbox.dev/... . Podría estar relacionado: webpack-contrib/html-loader#91. Estoy usando [email protected] y [email protected] .

En su test por .html , intente eliminar relativeTo y ejecute Webpack. Para mí, se compila bien y las plantillas ng-table se agregan al caché. Abre tu paquete y échale un vistazo.

Dado que aún necesitaremos un prefijo, estoy jugando con tener un bloque de carga/prueba para mi aplicación y un bloque separado para node_modules.

mheppner en 23 feb. 2017

@mheppner desafortunadamente, para mí no cambia nada (aquí y https://github.com/esvit/ng-table/issues/969).

La única diferencia es que las plantillas locales también son incorrectas. La URL que termina en .dev es mi URL de desarrollo local, obviamente no puedes ir allí.

Como dije en https://github.com/esvit/ng-table/issues/969 , puse el contenido de la plantilla del paquete en mis archivos. Las plantillas se colocan en el caché de esta manera: $templateCache.put('ng-table/pager.html', html); . Todavía me cuesta averiguar si es un problema de ng-table o webpack...

richtmat en 27 feb. 2017

👍5

Arriba, el mismo error aquí

LuisUrrutia en 3 may. 2017

Yo, pude resolver esto cambiando la forma en que importo ng-table en mi proyecto. Importar directamente desde el paquete lo arregló para mí:

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

radius en 25 may. 2017

👍9

Funciona muy bien: import 'of-table/bundles/of-table';

fedorovsky en 7 jun. 2017

🎉4

Mismo problema aquí. Al importar como

import { ngTableModule } from 'ng-table';

entonces el encabezado y el pie de página no se agrupan, lo que da como resultado un HTTP 404.

Cambiar la importación a

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

resuelve el problema del encabezado/pie de página, pero falta un problema técnico: los indicadores de clasificación ^ y v no se muestran. La clasificación ocurre pero no hay indicación visual.

¿Algunas ideas?

sargue en 7 sept. 2017

👍1

@sargue Esto tiene unos meses de retraso, pero yo mismo me encontré con el mismo problema con la clasificación ^ y v que no se muestran.

Agregar

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

jheimbouch en 23 ene. 2018

🎉1 👍1

Gracias @jheimbouch , no puedo probarlo porque ya no estoy trabajando en ese proyecto. Pero gracias de todos modos, puedo ser útil para alguien más.

sargue en 24 ene. 2018

👍1

Pude hacer que los archivos HTML se compilaran correctamente con Webpack colocando lo siguiente en mi webpack.config.js:

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

Esto también requiere los paquetes NPM ngtemplate-loader y html-loader . Detalles completos: https://github.com/esvit/ng-table/issues/969#issuecomment -703458126