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
}
}
@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
κ°μ₯ μ μ©ν λκΈ
Yo, λ΄ νλ‘μ νΈμ ng-tableμ κ°μ Έμ€λ λ°©λ²μ λ³κ²½νμ¬ μ΄ λ¬Έμ λ₯Ό ν΄κ²°ν μ μμμ΅λλ€. λ²λ€μμ μ§μ κ°μ Έμ€λ©΄ λ¬Έμ κ° ν΄κ²°λμμ΅λλ€.
import 'ng-table/bundles/ng-table';