Related
Hi this is my config :
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./e2e/xyz/xyz.e2e-spec.ts',
],
multiCapabilities: [
{
browserName: 'chrome',
chromeOptions: {
args: ['--headless', '--disable-gpu', '--window-size=1024x768', '--no-sandbox']
}
}
/* Failing in Jeniks, TODO : need to fix this,
{
browserName: 'firefox',
firefoxOptions: {
args: ['--headless']
},
'moz:firefoxOptions': {
args: ['--headless']
}
}
*/
],
directConnect: true,
chromeOnly: false,
baseUrl: nconf.get('BASE_URL'),
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 120000,
includeStackTrace : true,
print: function () { }
},
restartBrowserBetweenTests: false,
useAllAngular2AppRoots: true,
onPrepare: function () {
require('ts-node').register({
project: './e2e/tsconfig.json'
});
let SpecReporter = require('jasmine-spec-reporter').SpecReporter;
jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: 'spec'}));
},
params: {
login: {
username: nconf.get('USERNAME'),
password: nconf.get('PASSWORD'),
username_d: nconf.get('D_USERNAME'),
password_d: nconf.get('D_PASSWORD')
},
sddc_id: nconf.get('SDDC_ID'),
org_id: nconf.get('ORG_ID'),
env: nconf.get('env'),
d_sddc_id: nconf.get('D_SDDC_ID')
}
Now I want to call xyz.e2e-spec.ts twice for different usernames and passwords. Is there a way to run "describe('SOme work', () => {). twice in xyz.e2e-spec.ts?. I mean for loop wont works on this since describe is a function.
I'm having troubles with compiling sass with Webpack. ExtractTextPlugin gives images wrong path, prepending 'css/' to it. When I change the filename in ExtractTextPlugin options to '/app.css', it puts app.css to the dist/ folder instead of css, but it gives the images correct path. How should I correctly specify the paths in config?
Here is my webpack.config.js:
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require('path')
const autoprefixer = require('autoprefixer')
let isProd = process.env.NODE_ENV == 'production';
let cssDev = [
'style-loader',
'css-loader?sourseMap&importLoaders=2',
'postcss-loader',
'sass-loader'];
let cssProd = ExtractTextPlugin.extract({
allChunks: true,
fallback: "style-loader",
use: [
{
loader: 'css-loader',
options: {
minimize: false,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
minimize: false
}
},
{
loader: 'sass-loader',
options: {
minimize: false
}
}
]
});
let cssConfig = isProd ? cssProd : cssDev;
module.exports | webpack.config
module.exports = {
entry: {
'js/app': './src/app.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js',
publicPath: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: [ path.resolve(__dirname, 'src/js/') ],
loader: 'babel-loader',
query: {
presets: ['es2015'],
}
},
{
test: /\.sass$/,
use: cssConfig
},
{
test: /\.pug$/,
use: 'pug-loader?pretty=true'
},
{
test: /\.(jpe?g|png|gif|svg)$/,
use: [
'file-loader?name=[name].[ext]&publicPath=img/&outputPath=img/'
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: 'file-loader?name=[name].[ext]&publicPath=fonts/&outputPath=fonts/'
}
]
},
devServer: {
contentBase: __dirname + '/dist',
compress: true,
port: 9000,
open: true,
hot: true,
stats: 'errors-only'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Product Description',
minimize: false,
favicon: false,
hash: true,
template: './src/index.pug'
}),
new HtmlWebpackPlugin({
title: 'Distribution and Channels',
minimize: false,
favicon: false,
hash: true,
filename: 'distrib.html',
template: './src/distrib.pug'
}),
new ExtractTextPlugin({
filename: '/app.css',
publicPath: '/',
disable: !isProd,
allChunks: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.LoaderOptionsPlugin({ options:
{ postcss: [
autoprefixer({
browsers: ['last 5 versions'],
supports: true,
flexbox: true
})
] }
})
]
};
I'm getting no prefixes with these setup. Cssnano and write to style.css is working but there is no prefixes added from my sass to css.
I'm just started with webpack so maybe I'm just not gettings it.
Config:
var development = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
var precss = require('precss');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var cssnano = require('cssnano');
var autoprefixer = require('autoprefixer');
var extractCSS = new ExtractTextPlugin('style.css');
module.exports = [
{
name: 'app-bundle',
entry: "./src/js/main.js",
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
},
]
},
output: {
path: "",
filename: "bundle.min.js"
},
plugins: development ? [
]: [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
},
{
name: 'css/scss',
entry: './src/sass/style.scss',
module: {
loaders:
[
{
test: /\.scss$/,
loader: extractCSS.extract('style', 'css!postcss!sass')
}
]
},
postcss: function(webpack)
{
return [
cssnano({
autoprefixer: {
add: true,
remove: false,
browsers: [
'last 2 versions',
'ie >= 9'
]
},
discardComments: {
removeAll: true
},
discardUnused: false,
mergeIdents: false,
reduceIdents: false,
safe: true,
sourcemap: true
})
]
},
output: {
path: "",
filename: "style.css"
},
plugins: development ? [
extractCSS
] : []
}
];
There is a problem with your postcss plugin declaration
postcss: function(webpack)
{
return [
autoprefixer(), // Should be a function call and not reside inside cssnano config
cssnano({
discardComments: {
removeAll: true
},
discardUnused: false,
mergeIdents: false,
reduceIdents: false,
safe: true,
sourcemap: true
}),
]
},
Just putting this out there to see if someone else is having this issue...
I have building an angular 2 app with typescript using webpack as my build tool, it all works well, however I have noticed typescript compilation is super super slow, I am at 12 seconds right now...., and its pretty clear that is all due to the typescript compilation process....
I have used ts-loader or awesome-typescript-loader with a similar result, if I comment out this loader, my build time drops to around 1 sec....
After some research it seems like its 'normal' to have 'slow' times when compiling typescript, but is 12secs the normal??
Old posts hinted it might be due to a node version conflict, I am currently running v4.4.2...
Any how below is my webpack code in case anyone spots something wrong there.. the commented code in the Uglify section is due to some 'bug' on the angular 2 side...
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, 'app'),
dist: path.join(__dirname, 'dist')
};
const common = {
entry: {
vendor: ['./app/vendor.ts'],
main: ['./app/boot.component.ts']
},
output: {
filename: '[name].[hash].bundle.js',
path: PATHS.dist
},
resolve: {
extensions: ['', '.js', '.ts']
},
plugins: [
new HtmlWebpackPlugin({
title: 'Qarrot Performance',
template: 'index.template.ejs',
commonStyles: [
'/public/styles/vendor/normalize.css',
'/public/styles/main.css'
],
commonScripts: [],
baseHref: '/',
unsupportedBrowser: true,
mobile: true,
appMountId: 'app'
}),
],
module: {
loaders: [
{
test: /\.ts$/,
exclude: /node_modules/,
loaders: ['ts-loader']
},
{
test: /\.scss$/,
loader: 'raw-loader!sass-loader'
},
{
test: /\.html$/,
loader: "html"
}
]
}
}
// Dev Settings
if(TARGET === 'start' || !TARGET) {
module.exports = merge(common, {
devtool: 'eval-source-map',
devServer: {
contentBase: PATHS.build,
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
stats: 'errors-only',
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new NpmInstallPlugin({
save: true
})
]
});
}
// Prod Settings
if(TARGET === 'build') {
module.exports = merge(common, {
devtool: 'cheap-module-source-map',
plugins: [
// new webpack.optimize.UglifyJsPlugin({
// beautify: false,
// mangle: false,
// compress : { screw_ie8 : true },
// comments: false
// }),
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new CopyWebpackPlugin([
{ from: 'public', to: 'public' }
]),
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
]
});
}
I am also on a Mac, running Angular 2 beta.15 and webpack version 1.12, below is my tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"compileOnSave": false,
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
I would stick to the awesome-typescript-loader. It has some performance options you can enable: a caching option and a transpile only option:
"awesomeTypescriptLoaderOptions": {
"useCache": true,
"transpileOnly": true
}
Both of these had a significant improvement on compile times.
Please share you tsconfig.json. Most likely you have noEmitOnError set to true which means that the compiler is forced to typecheck the whole codebase before any emitting.
Please set that to false.
I am working on some existing code. After upgrading to Extjs 4, one of our application view window is broken. It is working fine on Firefox, not IE8. Upon the popup window opening, I am getting Invalid argument, and the debugger indicates it is on like Sytle[hook.name] = value;
I've tried to remove the height (which I really need) after reading some posts, but it is still not working. Please advise.
Thanks.
Ext.define(view.window.popupwindow', {
extend : 'Ext.Window',
alias : 'widget.popupwindow',
requires: [view.grid.issuerpopupgrid'],
appContainer: undefined,
caller: undefined,
selReportType:undefined,
reloadData: true,
extraParam: undefined,
initComponent: function() {
var config = {
width: 750,
minWidth: 600,
minHeight: 300,
autoScroll: false,
modal: true,
border: false,
closable: true,
constrain: false,
resizable: true,
maximizable: true,
layout:'anchor',
items: this.buildWindow(),
listeners: {
scope: this,
show: function(form) {
//sync the shadow
var win = Ext.WindowMgr.getActive();
if (win!=null) win.el.sync(true);
}
}
};
Ext.apply(this, config);
this.callParent(arguments);
},
buildWindow: function() {
return [{
xtype: 'issuerpopupgrid',
id:'issuerpopupgrid-id',
appContainer: this.appContainer,
extraParam: this.extraParam
}];
},
});
Ext.define('view.grid.issuerpopupgrid', {
extend : 'view.grid.lvsimplegrid',
alias : 'widget.issuerpopupgrid',
appContainer: undefined,
extraParam: undefined,
initComponent: function() {
this.gridType = this.appContainer.appContext.appData.gridDefTypeMap.R9;
this.modelName = this.appContainer.name+'.model.'+this.gridType.name;
this.selReportType = this.gridType.name; //'R9';
this.sortField = 'secDesc';
this.reportUrl = this.appContainer.appContext.appData["gridDefinitions"][this.gridType.name].serviceUrl;
var config = {
height: 570,
selModel: {
selType: 'checkboxmodel',
showHeaderCheckbox :true,
mode: 'MULTI',
checkOnly: true
},
listeners: {
scope: this,
afterrender: this.onAfterRender,
show: this.onActivateGrid
}
};
Ext.apply(this, config);
this.callParent(arguments);
this.tbar = this.buildTopBar();
},
onAfterRender: function(thisObj) {
this.configureGrid(this.selReportType, this.appContainer.appContext.appData, null, false, this.sortField, this.sortField);
thisObj.getStoreData(this.selReportType, this.extraParam);
},
onActivateGrid: function(thisObj) {
thisObj.getStoreData(this.selReportType);
}
});
Looks like you've got a trailing comma:
buildWindow: function() {
return [{
xtype: 'issuerpopupgrid',
id:'issuerpopupgrid-id',
appContainer: this.appContainer,
extraParam: this.extraParam
}];
}, //<-- trailing comma
IE will have issues with this... You can use jsHint to find syntax errors like this: https://jslinterrors.com/extra-comma
This is the fully linted code:
Ext.application({
name : 'Fiddle',
launch : function () {
Ext.define('view.window.popupwindow', {
extend : 'Ext.Window',
alias : 'widget.popupwindow',
requires: ['view.grid.issuerpopupgrid'],
appContainer: undefined,
caller: undefined,
selReportType: undefined,
reloadData: true,
extraParam: undefined,
initComponent: function () {
var config = {
width: 750,
minWidth: 600,
minHeight: 300,
autoScroll: false,
modal: true,
border: false,
closable: true,
constrain: false,
resizable: true,
maximizable: true,
layout: 'anchor',
items: this.buildWindow(),
listeners: {
scope: this,
show: function () {
//sync the shadow
var win = Ext.WindowMgr.getActive();
if (win !== null) {
win.el.sync(true);
}
}
}
};
Ext.apply(this, config);
this.callParent(arguments);
},
buildWindow: function () {
return [{
xtype: 'issuerpopupgrid',
id: 'issuerpopupgrid-id',
appContainer: this.appContainer,
extraParam: this.extraParam
}];
}
});
Ext.define('view.grid.issuerpopupgrid', {
extend : 'view.grid.lvsimplegrid',
alias : 'widget.issuerpopupgrid',
appContainer: undefined,
extraParam: undefined,
initComponent: function () {
this.gridType = this.appContainer.appContext.appData.gridDefTypeMap.R9;
this.modelName = this.appContainer.name + '.model.' + this.gridType.name;
this.selReportType = this.gridType.name; //'R9';
this.sortField = 'secDesc';
this.reportUrl = this.appContainer.appContext.appData.gridDefinitions[this.gridType.name].serviceUrl;
var config = {
height: 570,
selModel: {
selType: 'checkboxmodel',
showHeaderCheckbox : true,
mode: 'MULTI',
checkOnly: true
},
listeners: {
scope: this,
afterrender: this.onAfterRender,
show: this.onActivateGrid
}
};
Ext.apply(this, config);
this.callParent(arguments);
this.tbar = this.buildTopBar();
},
onAfterRender: function (thisObj) {
this.configureGrid(this.selReportType, this.appContainer.appContext.appData, null, false, this.sortField, this.sortField);
thisObj.getStoreData(this.selReportType, this.extraParam);
},
onActivateGrid: function (thisObj) {
thisObj.getStoreData(this.selReportType);
}
});
}
});