Ng-table: वेबपैक 2 का उपयोग करते समय अजीब समस्या

को निर्मित 17 जन॰ 2017 · 11टिप्पणियाँ · स्रोत: esvit/ng-table

वेबपैक 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

सबसे उपयोगी टिप्पणी

यो, मैं अपनी परियोजना में एनजी-टेबल आयात करने के तरीके को बदलकर इसे हल करने में सक्षम था। बंडल से सीधे आयात करना मेरे लिए तय है:

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

radius 25 मई 2017

👍9

सभी 11 टिप्पणियाँ

@faceleg क्या आप उस मुद्दे को हल करने में सक्षम हैं? मैं एक AngularJS 1.5 ऐप को वेबपैक 2 में अपग्रेड कर रहा हूं और ब्राउज़र लॉग में GET http://app.finderbox.dev/app/ng-table/pager.html 404 (Not Found) देख रहा हूं।

richtmat 27 जन॰ 2017

👍3

@richtmat नहीं, मैंने छोड़ दिया और वेबपैक 1 का उपयोग कर रहा हूं। हालांकि समाधान में बहुत दिलचस्पी है

faceleg 2 फ़र॰ 2017

मुझे लगता है कि $ relativeTo निर्दिष्ट करते समय यह वास्तव में ngtemplate-loader से संबंधित हो सकता है। हालांकि मुझे http://app.finderbox.dev/... नहीं खोजने के बारे में कोई त्रुटि नहीं मिल रही है। संबंधित हो सकता है: webpack-contrib/html-loader#91. मैं [email protected] और [email protected] का उपयोग कर रहा हूं।

अपने test पर .html के लिए, relativeTo को हटाने और वेबपैक चलाने का प्रयास करें। मेरे लिए, यह ठीक संकलित करता है, और एनजी-टेबल टेम्पलेट कैश में जोड़े जाते हैं। अपने बंडल को क्रैक करें और उसकी जांच करें।

चूंकि हमें अभी भी एक उपसर्ग की आवश्यकता होगी, मैं अपने ऐप के लिए लोडर/टेस्ट ब्लॉक और नोड_मॉड्यूल्स के लिए एक अलग ब्लॉक के साथ गड़बड़ कर रहा हूं।

mheppner 23 फ़र॰ 2017

@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); । मैं अभी भी यह पता लगाने के लिए संघर्ष कर रहा हूं कि यह एनजी-टेबल या वेबपैक समस्या है या नहीं ...

richtmat 27 फ़र॰ 2017

👍5

ऊपर, यहाँ वही त्रुटि

LuisUrrutia 3 मई 2017

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

radius 25 मई 2017

👍9

बढ़िया काम करता है: 'टेबल/बंडल/ऑफ़-टेबल' आयात करें;

fedorovsky 7 जून 2017

🎉4

यहाँ वही समस्या। जैसे आयात करते समय

import { ngTableModule } from 'ng-table';

तो शीर्षलेख और पाद लेख को बंडल नहीं किया जाता है जिसके परिणामस्वरूप HTTP 404 होता है।

आयात को बदल रहा है

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

हेडर/फ़ुटर समस्या हल करता है लेकिन एक गड़बड़ गायब है: ^ और वी सॉर्टिंग संकेतक नहीं दिखाए जाते हैं। छँटाई होती है लेकिन कोई दृश्य संकेत नहीं है।

कोई विचार?

sargue 7 सित॰ 2017

👍1

@sargue यह कुछ महीने देर हो चुकी है, लेकिन मैं खुद को एक ही समस्या में सॉर्टिंग ^ और वी नहीं दिखा रहा हूं।

जोड़ें

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

jheimbouch 23 जन॰ 2018

🎉1 👍1

धन्यवाद @jheimbouch , मैं इसे आजमा नहीं सकता क्योंकि मैं अब उस प्रोजेक्ट पर काम नहीं कर रहा हूं। लेकिन वैसे भी धन्यवाद, मैं किसी और के लिए उपयोगी हो सकता हूं।

sargue 24 जन॰ 2018

👍1

मैं अपने webpack.config.js में निम्नलिखित डालकर वेबपैक के साथ 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

rmunn 5 अक्तू॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Ng-table: वेबपैक 2 का उपयोग करते समय अजीब समस्या

सबसे उपयोगी टिप्पणी

सभी 11 टिप्पणियाँ

संबंधित मुद्दों