akveo / akveo/ngx-admin

How to integrate webpack in ngx-admin app

Abierto
#2,135 0 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
25.7k
Forks
7.9k
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

### Issue type

**I'm submitting a ...** (check one with "x")

* [ ] bug report
* [* ] feature request
* [ ] question about the decisions made in the repository

### Issue description
Our company usually use webpack to bundle the modules in all UI related projects.
We found ngx-admin is useful for our requirements and working on the modifications on the project based on our requirements.
One of our requirement is it should use webpack, because there are few modules that use ```process.env```, which can be promised by Webpack

```
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: `'${options.env}'`,
BUILD_TIMESTAMP: `'${new Date().getTime()}'`,
VERSION: `'${utils.parseVersion()}'`,
DEBUG_INFO_ENABLED: options.env === 'development',
SERVER_API_URL: `''`
}
```
like the above.
We're trying to integrate but we're failing in compilation like below

**Current behavior:**

`

undefined
^
Expected '.

11 │ @warn '
│ ^

node_modules\@nebular\theme\styles\core\_breaking-notice.scss 11:12 root stylesheet
node_modules\@nebular\theme\styles\_theming.scss 14:9 @import
src\main\webapp\app\@theme\styles\themes.scss 2:9 @import
stdin 4:9 root stylesheet
in D:\___projects\angular\mod-ngx-admin\node_modules\@nebular\theme\styles\core\_breaking-notice.scss (line 11, column 12)
i 「wdm」: Failed to compile.
`

`
./src/main/webapp/app/@theme/components/search-input/search-input.component.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js??ref--10-2!./src/main/webapp/app/@theme/components/search-input/search-input.component.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

/deep/ search-input {
^
Expected selector.

28 │ /deep/ search-input{
│ ^

stdin 28:3 root stylesheet
in D:\___projects\angular\mod-ngx-admin\src\main\webapp\app\@theme\components\search-input\search-input.component.scss (line 28, column 3)
`

**Expected behavior:**

It should deliver without errors

**Steps to reproduce:**

**Related code:**

**utils.js
```

module.exports = {
parseVersion,
root,
isExternalLib
};

function parseVersion() {
return 1;
}

const _root = path.resolve(__dirname, '..');

function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [_root].concat(args));
}

function isExternalLib(module, check = /node_modules/) {
const req = module.userRequest;
if (typeof req !== 'string') {
return false;
}
return req.search(check) >= 0;
}

```
**common.js
```const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const rxPaths = require('rxjs/_esm5/path-mapping');
const MergeJsonWebpackPlugin = require('merge-jsons-webpack-plugin');

const utils = require('./utils.js');

module.exports = options => ({
resolve: {
extensions: ['.ts', '.js'],
modules: ['node_modules'],
alias: {
app: utils.root('src/main/webapp/app/'),
...rxPaths()
}
},
stats: {
children: false
},
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader',
options: {
minimize: true,
caseSensitive: true,
removeAttributeQuotes: false,
minifyJS: false,
minifyCSS: false
},
exclude: /(src\/main\/webapp\/index.html)/
},
{
test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
loader: 'file-loader',
options: {
digest: 'hex',
hash: 'sha512',
name: 'content/[hash].[ext]'
}
},
{
test: /manifest.webapp$/,
loader: 'file-loader',
options: {
name: 'manifest.webapp'
}
},
// Ignore warnings about System.import in Angular
{ test: /[\/\\]@angular[\/\\].+\.js$/, parser: { system: true } }
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: `'${options.env}'`,
BUILD_TIMESTAMP: `'${new Date().getTime()}'`,
VERSION: `'${utils.parseVersion()}'`,
DEBUG_INFO_ENABLED: options.env === 'development',
SERVER_API_URL: `''`
}
}),
new CopyWebpackPlugin([
{ from: './src/main/webapp/assets/', to: 'content' },
{ from: './src/main/webapp/favicon.ico', to: 'favicon.ico' },
{ from: './src/main/webapp/manifest.webapp', to: 'manifest.webapp' },
{ from: './src/main/webapp/robots.txt', to: 'robots.txt' }
]),
new HtmlWebpackPlugin({
template: './src/main/webapp/index.html',
chunks: ['vendors', 'polyfills', 'main', 'global'],
chunksSortMode: 'manual',
inject: 'body'
})
]
});
```
**dev.js
```const webpack = require('webpack');
const writeFilePlugin = require('write-file-webpack-plugin');
const webpackMerge = require('webpack-merge');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const path = require('path');
const sass = require('sass');

const utils = require('./utils.js');
const commonConfig = require('./common.js');

const ENV = 'development';

module.exports = options =>
webpackMerge(commonConfig({ env: ENV }), {
devtool: 'eval-source-map',
devServer: {
contentBase: './target/www',
proxy: [
{
context: [
'/api',
'/management',
'/swagger-resources',
'/v2/api-docs',
'/h2-console',
'/auth'
],
target: `http${options.tls ? 's' : ''}://127.0.0.1:8080`,
secure: false,
changeOrigin: options.tls,
headers: { host: 'localhost:9000' }
}
],
stats: options.stats,
watchOptions: {
ignored: /node_modules/
}
},
entry: {
polyfills: './src/main/webapp/polyfills',
main: './src/main/webapp/main'
},
output: {
path: utils.root('target/www'),
filename: 'app/[name].bundle.js',
chunkFilename: 'app/[id].chunk.js'
},
module: {
rules: [
{
test: /\.ts$/,
enforce: 'pre',
loader: 'tslint-loader',
exclude: [/(node_modules)/, new RegExp('reflect-metadata\\' + path.sep + 'Reflect\\.ts')]
},
{
test: /\.ts$/,
use: [
'angular2-template-loader',
{
loader: 'cache-loader',
options: {
cacheDirectory: path.resolve('target/cache-loader')
}
},
{
loader: 'thread-loader',
options: {
// there should be 1 cpu for the fork-ts-checker-webpack-plugin
workers: require('os').cpus().length - 1
}
},
{
loader: 'ts-loader',
options: {
transpileOnly: true,
happyPackMode: true
}
},
'angular-router-loader'
],
exclude: /(node_modules)/
},
{
test: /\.scss$/,
use: [
'to-string-loader',
'css-loader',
{
loader: 'sass-loader',
options: { implementation: sass }
}
],
exclude: /(vendor\.scss|global\.scss)/
},
{
test: /(vendor\.scss|global\.scss)/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
{
loader: 'sass-loader',
options: { implementation: sass }
}
]
},
{
test: /\.css$/,
use: ['to-string-loader', 'css-loader'],
exclude: /(vendor\.css|global\.css)/
},
{
test: /(vendor\.css|global\.css)/,
use: ['style-loader', 'css-loader']
}
]
},
stats: process.env.JHI_DISABLE_WEBPACK_LOGS ? 'none' : options.stats,
plugins: [
process.env.JHI_DISABLE_WEBPACK_LOGS
? null
: new SimpleProgressWebpackPlugin({
format: options.stats === 'minimal' ? 'compact' : 'expanded'
}),
new FriendlyErrorsWebpackPlugin(),
new ForkTsCheckerWebpackPlugin(),
new BrowserSyncPlugin(
{
host: 'localhost',
port: 9000,
proxy: {
target: 'http://localhost:9060'
},
socket: {
clients: {
heartbeatTimeout: 60000
}
}
},
{
reload: false
}
),
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)/,
path.resolve(__dirname, './src/main/webapp')
),
new writeFilePlugin(),
new webpack.WatchIgnorePlugin([utils.root('src/test')]),
new WebpackNotifierPlugin({
title: 'Porject-Name',
contentImage: path.join(__dirname, 'company-logo.png')
})
].filter(Boolean),
mode: 'development'
});
```

### Other information:

**npm, node, OS, Browser**
```
>npm -v
6.7.0
>node -v
v10.14.2

OS: Windows-10
```

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.