Ng-table: webpack 2λ₯Ό μ‚¬μš©ν•  λ•Œ μ΄μƒν•œ 문제

에 λ§Œλ“  2017λ…„ 01μ›” 17일  Β·  11μ½”λ©˜νŠΈ  Β·  좜처: esvit/ng-table

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

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

Yo, λ‚΄ ν”„λ‘œμ νŠΈμ— ng-table을 κ°€μ Έμ˜€λŠ” 방법을 λ³€κ²½ν•˜μ—¬ 이 문제λ₯Ό ν•΄κ²°ν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€. λ²ˆλ“€μ—μ„œ 직접 κ°€μ Έμ˜€λ©΄ λ¬Έμ œκ°€ ν•΄κ²°λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

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

λͺ¨λ“  11 λŒ“κΈ€

@faceleg κ·Έ 문제λ₯Ό ν•΄κ²°ν•  수 μžˆμ—ˆμŠ΅λ‹ˆκΉŒ? AngularJS 1.5 앱을 Webpack 2둜 μ—…κ·Έλ ˆμ΄λ“œν•˜κ³  있으며 λΈŒλΌμš°μ € λ‘œκ·Έμ— GET http://app.finderbox.dev/app/ng-table/pager.html 404 (Not Found) κ°€ ν‘œμ‹œλ©λ‹ˆλ‹€.

@richtmat μ•„λ‹ˆμš” ν¬κΈ°ν•˜κ³  webpack 1을 μ‚¬μš©ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. μ†”λ£¨μ…˜μ— 맀우 관심이 μžˆμ§€λ§Œ

relativeTo λ₯Ό 지정할 λ•Œ 이것이 μ‹€μ œλ‘œ ngtemplate-loader 와 관련이 μžˆμ„ 수 μžˆλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€. ν•˜μ§€λ§Œ http://app.finderbox.dev/... λ₯Ό 찾지 λͺ»ν•œλ‹€λŠ” 였λ₯˜λŠ” λ°œμƒν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. 관련될 수 있음: webpack-contrib/html-loader#91. [email protected] 및 [email protected] λ₯Ό μ‚¬μš©ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

.html $ 에 λŒ€ν•œ $ test μ—μ„œ $ relativeTo λ₯Ό μ œκ±°ν•˜κ³  Webpack을 μ‹€ν–‰ν•΄ λ³΄μ‹­μ‹œμ˜€. λ‚˜μ—κ²ŒλŠ” 잘 컴파일되고 ng-table ν…œν”Œλ¦Ώμ΄ μΊμ‹œμ— μΆ”κ°€λ©λ‹ˆλ‹€. λ²ˆλ“€μ„ μ—΄μ–΄ ν™•μΈν•˜μ‹­μ‹œμ˜€.

μš°λ¦¬λŠ” μ—¬μ „νžˆ 접두사가 ν•„μš”ν•˜κΈ° λ•Œλ¬Έμ— λ‚΄ 앱을 μœ„ν•œ λ‘œλ”/ν…ŒμŠ€νŠΈ 블둝과 node_modulesλ₯Ό μœ„ν•œ λ³„λ„μ˜ 블둝을 가지고 μž₯λ‚œμ„ 치고 μžˆμŠ΅λ‹ˆλ‹€.

@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); . λ‚˜λŠ” μ—¬μ „νžˆ 그것이 ng-table λ˜λŠ” webpack λ¬Έμ œμΈμ§€ μ•Œμ•„λ‚΄κΈ° μœ„ν•΄ κ³ κ΅°λΆ„νˆ¬ν•©λ‹ˆλ‹€...

μœ„λ‘œ, 여기에 같은 였λ₯˜κ°€ μžˆμŠ΅λ‹ˆλ‹€.

Yo, λ‚΄ ν”„λ‘œμ νŠΈμ— ng-table을 κ°€μ Έμ˜€λŠ” 방법을 λ³€κ²½ν•˜μ—¬ 이 문제λ₯Ό ν•΄κ²°ν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€. λ²ˆλ“€μ—μ„œ 직접 κ°€μ Έμ˜€λ©΄ λ¬Έμ œκ°€ ν•΄κ²°λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

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

잘 μž‘λ™ν•©λ‹ˆλ‹€: import 'of-table/bundles/of-table';

여기에 같은 λ¬Έμ œκ°€ μžˆμŠ΅λ‹ˆλ‹€. λ‹€μŒκ³Ό 같이 κ°€μ Έμ˜¬ λ•Œ

import { ngTableModule } from 'ng-table';

그러면 헀더와 λ°”λ‹₯글이 λ²ˆλ“€λ˜μ§€ μ•Šμ•„ HTTP 404κ°€ μƒμ„±λ©λ‹ˆλ‹€.

κ°€μ Έμ˜€κΈ°λ₯Ό λ‹€μŒμœΌλ‘œ λ³€κ²½

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

머리글/λ°”λ‹₯κΈ€ 문제λ₯Ό ν•΄κ²°ν•˜μ§€λ§Œ 결함이 λˆ„λ½λ˜μ—ˆμŠ΅λ‹ˆλ‹€. ^ 및 v μ •λ ¬ ν‘œμ‹œκΈ°κ°€ ν‘œμ‹œλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. 정렬이 μ΄λ£¨μ–΄μ§€μ§€λ§Œ μ‹œκ°μ  ν‘œμ‹œκ°€ μ—†μŠ΅λ‹ˆλ‹€.

μ–΄λ–€ 아이디어?

@sargue 이것은 λͺ‡ 달 λŠ¦μ—ˆμ§€λ§Œ λ‚˜ μžμ‹ λ„ ^ 및 vκ°€ ν‘œμ‹œλ˜μ§€ μ•ŠλŠ” μ •λ ¬ λ¬Έμ œμ™€ λ™μΌν•œ λ¬Έμ œμ— λΆ€λ”ͺμ³€μŠ΅λ‹ˆλ‹€.

μΆ”κ°€ν•˜λ‹€

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

:)

@jheimbouch κ°μ‚¬ν•©λ‹ˆλ‹€. 더 이상 ν•΄λ‹Ή ν”„λ‘œμ νŠΈμ—μ„œ μž‘μ—…ν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— μ‹œλ„ν•  수 μ—†μŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ μ–΄μ¨Œλ“  덕뢄에 λ‚΄κ°€ λ‹€λ₯Έ λˆ„κ΅°κ°€μ—κ²Œ μœ μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

webpack.config.js에 λ‹€μŒμ„ λ„£μ–΄ HTML νŒŒμΌμ„ Webpack으둜 μ œλŒ€λ‘œ μ»΄νŒŒμΌν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

    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

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰