detect-browser | JavaScript library to detect browser properties
kandi X-RAY | detect-browser Summary
Support
Quality
Security
License
Reuse
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample Here
detect-browser Key Features
detect-browser Examples and Code Snippets
Trending Discussions on detect-browser
Trending Discussions on detect-browser
QUESTION
when i try to build my project with yarn run build i get errors that are not exist in my code my code is clean it works fine in my local. I've been stuck for two weeks to resolve this problem please help me to solve this problem. this the errors that i get
node version: v10.15.3
webpack: 4.30.0 this is my package.json
{
"name": "xxxx",
"version": "1.8.0",
"description": "React website tempate with focus on perfomance and design",
"private": true,
"engines": {
"npm": ">=5",
"node": ">=8.15.1"
},
"author": "Dandelion Pro Team",
"license": "Envato Regular License",
"scripts": {
"analyze:clean": "rimraf stats.json",
"preanalyze": "npm run analyze:clean",
"analyze": "node ./internals/scripts/analyze.js",
"extract-intl": "node ./internals/scripts/extract-intl.js",
"npmcheckversion": "node ./internals/scripts/npmcheckversion.js",
"preinstall": "npm run npmcheckversion",
"postinstall": "npm run build:dll",
"prebuild": "npm run build:clean",
"build": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
"build:clean": "rimraf ./build",
"build:dll": "node ./internals/scripts/dependencies.js",
"start": "cross-env NODE_ENV=development node server",
"start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
"start:production": "npm run test && npm run build && npm run start:prod",
"start:prod": "cross-env NODE_ENV=production node server",
"presetup": "npm i chalk shelljs",
"setup": "node ./internals/scripts/setup.js",
"postsetup": "npm run build:dll",
"clean": "shjs ./internals/scripts/clean.js",
"clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
"generate": "plop --plopfile internals/generators/index.js",
"lint": "npm run lint:js && npm run lint:css",
"lint:css": "stylelint app/**/*.js",
"lint:eslint": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts",
"lint:eslint:fix": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts --fix",
"lint:js": "npm run lint:eslint -- . ",
"lint:staged": "lint-staged",
"coveralls": "cat ./coverage/lcov.info | coveralls",
"prettify": "prettier --write"
},
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
],
"lint-staged": {
"*.js": [
"npm run lint:eslint:fix",
"git add --force"
],
"*.json": [
"prettier --write",
"git add --force"
]
},
"pre-commit": "lint:staged",
"resolutions": {
"babel-core": "7.0.0-bridge.0"
},
"dllPlugin": {
"path": "node_modules/react-boilerplate-dlls",
"exclude": [
"@types/googlemaps",
"@types/markerclustererplus",
"autosuggest-highlight",
"chalk",
"compression",
"convert-source-map",
"cross-env",
"dotenv",
"etag",
"express",
"fs",
"ip",
"jsdom",
"minimist",
"mocha",
"moment",
"sanitize.css",
"serve-favicon",
"slick-carousel",
"tunnel-agent"
],
"include": [
"core-js",
"lodash",
"eventsource-polyfill"
]
},
"dependencies": {
"@babel/plugin-proposal-export-default-from": "^7.2.0",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/polyfill": "7.4.3",
"@date-io/date-fns": "^1.3.11",
"@date-io/moment": "1.3.8",
"@material-ui/core": "^4.9",
"@material-ui/icons": "^4.5.1",
"@material-ui/lab": "^4.0.0-alpha.33",
"@material-ui/pickers": "^3.2.10",
"@react-pdf/renderer": "^1.6.13",
"@types/googlemaps": "^3.38.1",
"@types/markerclustererplus": "^2.1.33",
"acorn": "^6.1.1",
"autoprefixer": "^9.0.0",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.21.1",
"babel-polyfill": "6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bourbon": "^5.1.0",
"bourbon-neat": "^3.0.0",
"caniuse-lite": "^1.0.30001223",
"chalk": "^2.4.2",
"chart.js": "^2.7.3",
"classnames": "^2.2.6",
"compression": "1.7.4",
"connected-react-router": "6.6.1",
"country-language": "^0.1.7",
"country-state-city": "^1.0.5",
"cross-env": "5.2.0",
"date-fns": "2.1.0",
"detect-browser": "^4.0.0",
"dotenv": "^6.0.0",
"downshift": "^1.31.12",
"draft-js": "^0.11.7",
"draft-js-inline-toolbar-plugin": "^3.0.0",
"draft-js-plugins-editor": "^2.1.1",
"draftjs-to-html": "^0.8.3",
"draftjs-to-markdown": "^0.5.1",
"emailjs-com": "^2.6.4",
"express": "4.16.4",
"file-saver": "^2.0.2",
"fontfaceobserver": "2.1.0",
"formik": "^2.1.4",
"geo-reverse": "^1.0.12",
"google-libphonenumber": "^3.2.13",
"history": "4.9.0",
"hoist-non-react-statics": "3.3.0",
"html2canvas": "^1.0.0-rc.7",
"immer": "3.0.0",
"immutable": "3.8.2",
"interactjs": "^1.10.11",
"intl": "1.2.5",
"invariant": "2.2.4",
"ip": "1.1.5",
"jspdf": "^2.3.1",
"jss": "^10.0.0",
"jss-rtl": "^0.3.0",
"jwt-decode": "^3.1.2",
"keycode": "^2.2.0",
"leaflet": "^1.7.1",
"leaflet-control-geocoder": "^1.13.0",
"lodash": "^4.17.15",
"material-table": "^1.69.0",
"material-ui-color-picker": "^3.5.1",
"material-ui-pickers": "^2.2.4",
"minimist": "^1.2.5",
"moment": "^2.29.1",
"moment-weekday-calc": "^1.1.4",
"mui-datatables": "^2.13.1",
"net": "^1.0.2",
"nuxeo": "^3.17.0",
"profile-picture": "git+https://github.com/dsalvagni/react-profile-picture.git",
"prop-types": "15.7.2",
"rcolor": "^1.0.1",
"react": "16.8.6",
"react-anchor-link-smooth-scroll": "^1.0.11",
"react-animated-slider": "^2.0.0",
"react-autosuggest": "^9.3.4",
"react-big-calendar": "^0.19.1",
"react-calendar": "^2.17.4",
"react-chartjs-2": "^2.7.4",
"react-charts": "^1.0.10",
"react-clock": "^2.3.0",
"react-countup": "^3.0.3",
"react-dom": "16.8.6",
"react-draft-wysiwyg": "^1.12.13",
"react-dropzone": "^10.2.1",
"react-event-listener": "^0.6.1",
"react-google-maps": "^9.4.5",
"react-helmet": "6.0.0-beta",
"react-html5video": "^2.5.1",
"react-image-lightbox": "^5.1.1",
"react-images": "^1.1.7",
"react-intl": "2.8.0",
"react-ionicons": "^2.1.6",
"react-jss": "^10.0.0",
"react-leaflet": "^2.7.0",
"react-loadable": "^5.5.0",
"react-markdown": "^4.1.0",
"react-modal": "^3.4.4",
"react-notifications-component": "^2.4.0",
"react-number-format": "^3.3.4",
"react-papaparse": "^3.8.0",
"react-pdf": "^5.0.0",
"react-pdf-print": "^0.2.0",
"react-player": "^2.9.0",
"react-popper": "^0.10.4",
"react-print-components": "^1.0.4",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.1",
"react-scroll-parallax": "^1.3.5",
"react-scrollspy": "^3.3.5",
"react-select": "^3.0.4",
"react-slick": "^0.23.1",
"react-swipeable-views": "^0.13.9",
"react-syntax-highlighter": "^7.0.0",
"react-text-mask": "^5.3.2",
"react-trello": "^1.33.0",
"react-ultimate-pagination": "^1.2.0",
"recharts": "^1.4.2",
"recompose": "^0.28.2",
"redux": "4.0.1",
"redux-form": "8.2.0",
"redux-immutable": "4.0.0",
"redux-saga": "1.0.2",
"reselect": "4.0.0",
"sanitize.css": "8.0.0",
"serve-favicon": "^2.4.5",
"slick-carousel": "^1.8.1",
"tunnel-agent": "^0.6.0",
"video-react": "^0.14.1",
"warning": "4.0.2",
"xlsx": "^0.16.6"
},
"devDependencies": {
"@babel/cli": "7.4.3",
"@babel/core": "7.4.3",
"@babel/plugin-proposal-class-properties": "7.4.0",
"@babel/plugin-syntax-dynamic-import": "7.2.0",
"@babel/plugin-transform-modules-commonjs": "7.4.3",
"@babel/plugin-transform-react-constant-elements": "7.2.0",
"@babel/plugin-transform-react-inline-elements": "7.2.0",
"@babel/preset-env": "7.4.3",
"@babel/preset-react": "7.0.0",
"@babel/register": "7.4.0",
"add-asset-html-webpack-plugin": "3.1.3",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.5",
"babel-plugin-dynamic-import-node": "2.2.0",
"babel-plugin-lodash": "3.3.4",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-transform": "3.0.0",
"babel-plugin-styled-components": "1.10.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
"babel-preset-es2015": "^6.24.1",
"circular-dependency-plugin": "5.0.2",
"compare-versions": "3.4.0",
"compression-webpack-plugin": "3.0.0",
"coveralls": "3.0.3",
"css-loader": "2.1.1",
"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.6.0",
"enzyme-to-json": "3.3.4",
"eslint": "5.16.0",
"eslint-config-airbnb": "17.1.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-config-prettier": "4.1.0",
"eslint-import-resolver-webpack": "0.11.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-flowtype": "^3.2.0",
"eslint-plugin-import": "2.17.2",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-prettier": "3.0.1",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-react-hooks": "1.6.0",
"eslint-plugin-redux-saga": "1.0.0",
"eventsource-polyfill": "0.9.6",
"exports-loader": "0.7.0",
"file-loader": "3.0.1",
"happypack": "^5.0.1",
"html-loader": "0.5.5",
"html-webpack-plugin": "4",
"http-proxy-middleware": "0.19.1",
"imports-loader": "0.8.0",
"lint-staged": "8.1.5",
"ngrok": "3.1.1",
"node-plop": "0.18.0",
"node-sass": "^4.12.0",
"null-loader": "0.1.1",
"offline-plugin": "5.0.6",
"optimize-css-assets-webpack-plugin": "5.0.1",
"plop": "2.3.0",
"postcss-loader": "3.0.0",
"pre-commit": "1.2.2",
"prettier": "1.17.0",
"prismjs": "^1.11.0",
"raw-loader": "2.0.0",
"react-app-polyfill": "0.2.2",
"react-test-renderer": "16.8.6",
"react-testing-library": "6.1.2",
"react-to-print": "^2.12.3",
"rimraf": "2.6.3",
"sass-loader": "^7.1.0",
"sass-material-colors": "0.0.5",
"shelljs": "^0.8.3",
"style-loader": "0.23.1",
"stylelint": "10.0.1",
"stylelint-config-recommended": "2.2.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.6.0",
"svg-url-loader": "2.3.2",
"terser-webpack-plugin": "1.4.1",
"url-loader": "1.1.2",
"webpack": "4.30.0",
"webpack-cli": "3.3.0",
"webpack-dev-middleware": "3.6.2",
"webpack-hot-middleware": "2.24.3",
"webpack-pwa-manifest": "^4.3.0",
"whatwg-fetch": "3.0.0"
}
}
/**
* COMMON WEBPACK CONFIGURATION
*/
const path = require('path');
const webpack = require('webpack');
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });
module.exports = options => ({
mode: options.mode,
entry: options.entry,
output: Object.assign(
{
// Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
},
options.output,
), // Merge with env dependent settings
optimization: options.optimization,
module: {
rules: [
/*
Disabled eslint by default.
You can enable it to maintain and keep clean your code.
NOTE: By enable eslint running app process at beginning will slower
*/
/* {
enforce: 'pre',
test: /\.js?$/,
exclude: [/node_modules/],
loader: 'eslint-loader',
options: {
quiet: true,
}
}, */
{
test: /\.jsx?$/, // Transform all .js and .jsx files required somewhere with Babel
exclude: /node_modules/,
use: {
loader: 'happypack/loader?id=js',
options: options.babelQuery,
},
},
{
// Preprocess our own .css files
// This is the place to add your own loaders (e.g. sass/less etc.)
// for a list of loaders, see https://webpack.js.org/loaders/#styling
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
// Preprocess 3rd party .css files located in node_modules
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(eot|otf|ttf|woff|woff2)$/,
use: 'file-loader',
},
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
options:
{
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[local]__[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: false
}
}],
},
{
test: /\.md$/,
use: 'raw-loader'
},
{
test: /\.(jpg|png|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
// Inline files smaller than 10 kB
limit: 10 * 1024,
},
},
/*
Disabled image compression by default,
due error in windows 10 because libpng not available.
The libpng avaible on Linux and Mac system only.
NOTE: To enable this, first you need to install image-webpack-loader.
npm install -i image-webpack-loader --save
*/
// {
// loader: 'image-webpack-loader',
// options: {
// mozjpeg: {
// enabled: false,
// // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
// // Try enabling it in your environment by switching the config to:
// // enabled: true,
// // progressive: true,
// },
// gifsicle: {
// interlaced: false,
// },
// optipng: {
// optimizationLevel: 7,
// },
// pngquant: {
// quality: '65-90',
// speed: 4,
// },
// },
// },
],
},
{
test: /\.html$/,
use: 'html-loader',
},
{
test: /\.(mp4|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
},
},
},
],
},
node: {
fs: 'empty'
},
plugins: options.plugins.concat([
// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; Terser will automatically
// drop any unreachable code.
new HappyPack({
id: 'js',
threadPool: happyThreadPool,
loaders: ['babel-loader?cacheDirectory=true']
}),
new webpack.EnvironmentPlugin({
NODE_ENV: 'development',
}),
new webpack.ContextReplacementPlugin(/^\.\/locale$/, context => {
if (!/\/moment\//.test(context.context)) { return; }
// context needs to be modified in place
Object.assign(context, {
// include only CJK
regExp: /^\.\/(ja|ko|zh)/,
// point to the locale data folder relative to moment's src/lib/locale
request: '../../locale'
});
})
]),
resolve: {
modules: ['node_modules', 'app'],
extensions: ['.js', '.jsx', '.react.js'],
mainFields: ['browser', 'jsnext:main', 'main'],
alias: {
'dan-components': path.resolve(__dirname, '../../app/components/'),
'dan-actions': path.resolve(__dirname, '../../app/actions/'),
'dan-redux': path.resolve(__dirname, '../../app/redux/'),
'dan-styles': path.resolve(__dirname, '../../app/styles/components/'),
'dan-api': path.resolve(__dirname, '../../app/api/'),
'dan-images': path.resolve(__dirname, '../../public/images/'),
'dan-vendor': path.resolve(__dirname, '../../node_modules/'),
}
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
});
thanks a lot stackoverflow
ANSWER
Answered 2021-May-09 at 20:03i added two folders that was missing 'transversal-administration', 'transversal-translation' in the past i have just only: ['app']. the loader in the past load just the app folder
env: {
production: {
// only: ['app'],
only: ['app', 'transversal-administration', 'transversal-translation'],
plugins: [
'lodash',
'transform-react-remove-prop-types',
'@babel/plugin-transform-react-inline-elements',
'@babel/plugin-transform-react-constant-elements',
],
},
QUESTION
I'm using the latest versions of all Angular-related packages (so Angular 10).
I want to add some code to a component, but I only want this code to exist in dev, never in a production build. It needs to be completely stripped in prod builds. I found this comment, which indicates that environments do this automatically (because they're const
).
I tried using that exact code in my app, but the dev code is still there in a production build. I copied the code over to a new test app that I made with ng new
, and it does work properly there.
What things should I be looking for, how can I fix this? Is this possibly because I have CommonJS dependencies, and if so, can I do anything about that (since I can't remove those dependencies)?
Some notes:
- An issue has been opened on the angular-cli repo here.
- The
environment
object is never written to anywhere in the codebase, I've searched thoroughly. (It's only used in a few places anyway.) - Code bounded with
if (false) { }
is properly stripped. - Removing the services export from the end of
environment{.prod}.ts
does not fix the problem. - Removing all CommonJS dependencies does not fix the problem.
Here's environment.prod.ts
(environment.ts
is the same, just with false
instead of true
):
export const environment = {
production: true
};
export * from './services/services';
Here's the main.ts
that I'm testing with:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from 'environments/environment';
import { AppModule } from './app/app.module';
// tslint:disable:no-console
if (environment.production) {
console.warn('this is a prod build');
enableProdMode();
}
if (!environment.production) {
console.warn('this is a dev build');
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err));
Here's the relevant output code after running ng build -c my-prod-config
:
o.X.production && (console.warn('this is a prod build'), Object(i.R) ()),
o.X.production || console.warn('this is a dev build'),
s.d().bootstrapModule(fi).catch (e=>console.error(e))
Here's the relevant part of angular.json
:
"my-prod-config": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"stylePreprocessorOptions": {
"includePaths": [
"src/styles"
]
},
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"baseHref": "./"
}
Here's tsconfig.base.json
:
{
"compileOnSave": false,
"compilerOptions": {
"downlevelIteration": true,
"importHelpers": true,
"module": "es2020",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"baseUrl": "src/",
"experimentalDecorators": true,
"allowJs": true,
"target": "es2015",
"lib": [
"es2018",
"dom"
],
"paths": {
"path1": [
"app/modules/stripped-from-stack-overflow-example1"
],
"path2": [
"app/modules/stripped-from-stack-overflow-example2"
]
}
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictTemplates": true,
"strictInjectionParameters": true
}
}
Here's package.json
:
{
"name": "my-app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"section stripped": "section stripped"
},
"private": true,
"dependencies": {
"@angular/animations": "10.0.8",
"@angular/common": "10.0.8",
"@angular/compiler": "10.0.8",
"@angular/core": "10.0.8",
"@angular/forms": "10.0.8",
"@angular/platform-browser": "10.0.8",
"@angular/platform-browser-dynamic": "10.0.8",
"@angular/router": "10.0.8",
"@ng-idle/core": "9.0.0-beta.1",
"@ng-idle/keepalive": "9.0.0-beta.1",
"@ngneat/until-destroy": "8.0.1",
"angular-svg-icon": "10.0.0",
"brace": "0.11.1",
"caniuse-lite": "1.0.30001111",
"chart.js": "2.9.3",
"core-js": "3.6.5",
"css-vars-ponyfill": "2.3.2",
"detect-browser": "5.1.1",
"element-closest-polyfill": "1.0.2",
"file-saver": "2.0.2",
"fomantic-ui": "2.8.6",
"jsonexport": "3.0.1",
"moment": "2.24.0",
"ngx-drag-drop": "2.0.0",
"rxjs": "6.6.2",
"tslib": "^2.0.0",
"typeface-roboto": "0.0.75",
"uuid": "8.3.0",
"zone.js": "0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.1000.5",
"@angular/cli": "10.0.5",
"@angular/compiler-cli": "10.0.8",
"@angular/language-service": "10.0.8",
"@types/chart.js": "2.7.54",
"@types/file-saver": "2.0.1",
"@types/uuid": "8.0.1",
"codelyzer": "^6.0.0",
"rimraf": "3.0.2",
"rxjs-tslint-rules": "4.34.0",
"ts-node": "8.10.2",
"tslint": "6.1.3",
"tslint-angular": "3.0.2",
"typescript": "3.9.7",
"webpack-bundle-analyzer": "3.8.0"
}
}
ANSWER
Answered 2020-Aug-17 at 19:20You could apply the same logic as environment.ts
; create main.prod.ts
(without the dev specific code) and main.dev.ts
(with dev specific code), then use fileReplacements
in your config.
The config for prod would be:
"fileReplacements": [
...
{
"replace": "src/main.ts",
"with": "src/main.prod.ts"
}
QUESTION
After update to angular 9 and universal 9, a got error when i run npm run build:ssr && npm run serve:ssr
Error: Component 'HeaderComponent' is not resolved:
- templateUrl: ./header.component.html
- styleUrls: ["./header.component.scss"]
Did you run and wait for 'resolveComponentResources()'?
at Function.get (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26828:31)
at getComponentDef (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:2021:20)
at verifyDeclarationsHaveDefinitions (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26519:23)
at Array.forEach ()
at verifySemanticsOfNgModuleDef (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26494:22)
at D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26491:13
at Array.forEach ()
at verifySemanticsOfNgModuleDef (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26489:64)
at D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26491:13
at Array.forEach ()
package.json
"scripts": {
"ng": "ng",
"start": "npm-run-all -p client server",
"client": "ng serve --proxy-config server.conf.json",
"server": "nodemon --watch server.ts --exec ts-node server.ts",
"build": "ng build",
"test": "ng test --source-map=false",
"tests-coverage": "ng test --source-map=false --code-coverage",
"lint": "ng lint ng-universal-demo",
"build:client-and-server-bundles": "ng build --prod && ng run ng-universal-demo:server:production",
"build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"generate:prerender": "cd dist && node prerender",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
"serve:prerender": "cd dist/browser && http-server",
"serve:ssr": "node dist/server",
"ssr": "npm run build:ssr && npm run serve:ssr",
"e2e": "start-server-and-test ssr http://localhost:4100 wdio",
"allure": "allure generate --clean",
},
"pre-commit": [],
"private": true,
"dependencies": {
"@angular-builders/custom-webpack": "8.4.1",
"@angular/animations": "9.1.0",
"@angular/cdk": "9.2.0",
"@angular/common": "9.1.0",
"@angular/compiler": "9.1.0",
"@angular/core": "9.1.0",
"@angular/forms": "9.1.0",
"@angular/http": "7.2.15",
"@angular/material": "9.2.0",
"@angular/material-moment-adapter": "9.2.0",
"@angular/platform-browser": "9.1.0",
"@angular/platform-browser-dynamic": "9.1.0",
"@angular/platform-server": "9.1.0",
"@angular/router": "9.0.7",
"@fullcalendar/core": "^4.4.0",
"@gfx/zopfli": "1.0.14",
"@nguniversal/express-engine": "9.1.0",
"@ngx-translate/core": "11.0.1",
"@types/es6-promise": "3.3.0",
"@wdio/dot-reporter": "^5.18.6",
"accept-language-parser": "^1.5.0",
"arraybuffer-concat": "0.0.1",
"aws-sdk": "2.518.0",
"axios": "0.19.0",
"basic-auth-connect": "1.0.0",
"body-parser": "1.19.0",
"chart.js": "^2.8.0",
"classlist.js": "1.1.20150312",
"compression-webpack-plugin": "3.0.1",
"core-js": "3.2.1",
"detect-browser": "^4.6.0",
"dot-object": "^1.9.0",
"ecstatic": "4.1.2",
"express-enforces-ssl": "1.1.0",
"express-http-proxy": "^1.5.1",
"express-static-gzip": "2.0.3",
"file-saver": "2.0.2",
"hammerjs": "2.0.8",
"helmet": "3.21.2",
"html2canvas": "1.0.0-rc.3",
"iframe-resizer": "^4.1.1",
"jsonwebtoken": "8.5.1",
"jwks-rsa": "1.6.0",
"lodash": "4.17.15",
"moment": "2.24.0",
"ng4-click-outside": "1.0.1",
"ngx-device-detector": "^1.3.20",
"ngx-img-cropper": "9.0.1",
"ngx-infinite-scroll": "8.0.0",
"ngx-perfect-scrollbar": "8.0.0",
"ngx-web-worker": "8.0.0",
"node-fetch": "2.6.0",
"normalize.css": "8.0.1",
"npm-run-all": "^4.1.5",
"pdfmake": "0.1.58",
"primeicons": "2.0.0",
"primeng": "9.0.5",
"quill": "^1.3.6",
"rxjs": "^6.5.4",
"spdy": "4.0.1",
"text-encoding": "^0.7.0",
"tslib": "^1.10.0",
"unorm": "^1.6.0",
"uuid": "3.3.3",
"web-animations-js": "2.3.2",
"webpack-cli": "3.3.11",
"webpack-node-externals": "^1.7.2",
"whatwg-fetch": "3.0.0",
"xhr2": "^0.2.0",
"zone.js": "0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.900.7",
"@angular/cli": "9.1.0",
"@angular/compiler-cli": "9.1.0",
"@angular/language-service": "9.1.0",
"@babel/cli": "^7.8.0",
"@babel/core": "^7.8.0",
"@babel/preset-env": "^7.8.2",
"@babel/register": "^7.8.0",
"@biesbjerg/ngx-translate-extract": "3.0.4",
"@types/iframe-resizer": "3.5.7",
"@types/jasmine": "3.5.0",
"@types/lodash": "4.14.144",
"@types/node": "12.11.1",
"@wdio/allure-reporter": "^5.18.6",
"@wdio/cli": "^5.18.4",
"@wdio/firefox-profile-service": "^5.16.11",
"@wdio/local-runner": "^5.18.6",
"@wdio/mocha-framework": "^5.18.6",
"@wdio/selenium-standalone-service": "^5.16.10",
"@wdio/spec-reporter": "^5.18.6",
"@wdio/sync": "^5.18.6",
"agent": "0.2.1",
"allure-commandline": "^2.13.0",
"chromedriver": "^79.0.3",
"codelyzer": "5.1.0",
"cors-anywhere": "0.4.1",
"cpy-cli": "2.0.0",
"express": "4.17.1",
"form-data": "2.5.0",
"googledrive-i18n": "^1.2.4",
"http-server": "0.11.1",
"jasmine-core": "3.4.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.3.0",
"karma-chrome-launcher": "3.1.0",
"karma-cli": "2.0.0",
"karma-coverage-istanbul-reporter": "2.1.0",
"karma-jasmine": "2.0.1",
"karma-jasmine-html-reporter": "1.4.2",
"karma-parallel": "^0.3.1",
"karma-phantomjs-launcher": "1.0.4",
"karma-remap-istanbul": "0.6.0",
"nodemon": "^2.0.2",
"pre-commit": "1.2.2",
"prettier": "1.18.2",
"protractor": "5.4.2",
"puppeteer": "1.19.0",
"reflect-metadata": "0.1.13",
"request": "2.88.0",
"start-server-and-test": "^1.10.8",
"superagent": "5.1.0",
"terser": "4.2.1",
"ts-loader": "6.0.4",
"ts-node": "8.3.0",
"tslint": "5.19.0",
"tslint-microsoft-contrib": "^6.2.0",
"typescript": "3.7.5",
"wdio-chromedriver-service": "^5.0.2",
"ws": "^7.2.3",
"xmlhttprequest": "^1.8.0"
},
server.ts
import 'reflect-metadata';
import { enableProdMode } from '@angular/core';
import AWS = require('aws-sdk');
import * as express from 'express';
import EES = require('express-enforces-ssl');
import ESG = require('express-static-gzip');
import fs = require('fs');
import helmet = require('helmet');
import https = require('https');
import fetch from 'node-fetch/lib/index.js';
import { join } from 'path';
import spdy = require('spdy');
import 'zone.js/dist/zone-node';
import { AppServerModule, ngExpressEngine } from './src/main.server';
import { environment } from './src/environments/environment';
const token = {
dev:
'blala1',
prod:
'blala2',
};
const patient_info_token = {
dev: 'blala1',
prod: 'blala2',
};
const PATIENT_INFO_SERVER = {
dev: 'blala2',
prod: 'blala2',
};
const bodyParser = require('body-parser');
// Browser detection
const { detect } = require('detect-browser');
// Accept-language-parser
const parser = require('accept-language-parser');
global['navigator'] = { onLine: true };
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();
// Express server
const server = express();
const proxy = require('express-http-proxy');
const SNS_TOPIC = `blala2`;
const AUTH_TYPE = environment.AUTH_TYPE;
// const request = require('request');
const PORT = process.env.PORT || 4100;
const HTTPS_PORT = process.env.HTTPS_PORT || 4200;
const DIST_FOLDER = join(process.cwd(), 'dist');
const PROJECT_FOLDER = join(process.cwd(), 'src');
const basicAuth = require('basic-auth-connect');
let privateKey;
let certificate;
try {
privateKey = fs.readFileSync('/blala2.pem').toString();
certificate = fs.readFileSync('/blala2.pem').toString();
server.enable('trust proxy');
server.use(helmet());
server.use(EES());
} catch (e) {}
// const agent = require('superagent');
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
server.engine(
'html',
ngExpressEngine({
bootstrap: AppServerModule,
}),
);
const session = {};
server.set('view engine', 'html');
server.set('views', join(DIST_FOLDER, 'browser'));
const credentials = blala2;
// const credentials = blala2;
AWS.config.credentials = credentials;
AWS.config.update({ region: process.env.AWS_REGION || 'eu-central-1' });
const SNS = new AWS.SNS();
server.post('/api/token', (req, res) => {
///
});
server.post('/api/token/refresh', bodyParser.json(), (req, res) => {
//
});
const auth = AUTH_TYPE === 'none' ? [] : [AUTH_TYPE === 'basic' ? basicAuthInited : formHandler];
// Server static files from /browser
server.get(
'*.*',
auth.concat([
checkUnsupportedBrowser,
ESG(join(DIST_FOLDER, 'browser'), undefined),
express.static(join(DIST_FOLDER, 'browser'), {
maxAge: '1y',
}),
]),
);
const unless = function(path) {
return function(req, res, next) {
const browser = detect(req.headers['user-agent']);
console.log('unless==>', req.headers['user-agent']);
if (path === req.path) {
return next();
} else if (browser && browser.name) {
switch (browser.name) {
case 'edge':
case 'edge-chromium':
case 'chromium-webview':
case 'chrome':
case 'firefox':
case 'safari':
case 'ios':
case 'ios-webview':
case 'fxios':
case 'crios':
// tslint:disable
const render = () => {
res.render('index', { req });
};
return AUTH_TYPE === 'none'
? render()
: AUTH_TYPE === 'basic'
? basicAuthInited(req, res, render)
: formHandler(req, res, render);
console.log(JSON.stringify(browser, undefined, 2));
console.log('default case');
next();
break;
default:
callUnsupportedBrowserHTML(req, res);
console.log(JSON.stringify(browser, undefined, 2));
console.log('ie case');
}
} else {
// tslint:disable
const render = () => {
res.render('index', { req });
};
return AUTH_TYPE === 'none'
? render()
: AUTH_TYPE === 'basic'
? basicAuthInited(req, res, render)
: formHandler(req, res, render);
}
};
};
// All regular routes use the Universal engine
server.use(unless('/favicon.ico'));
// Start up the Node server
if (privateKey && certificate) {
server.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});
// Start up the Node server
spdy.createServer({ key: privateKey, cert: certificate }, server).listen(HTTPS_PORT, () => {
console.log(`Node Express secure server listening on http://localhost:${HTTPS_PORT}`);
});
} else {
// Start up when keys is not defined
server.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});
}
ANSWER
Answered 2020-Apr-05 at 12:59After 2 days of fixing this I got an answer. Part of angular.json with pror architect must be next:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/test-ssr/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"aot": true,
In my case builder was wrong "builder": "@angular-devkit/custom-webpack:browser",
and also I was using customWebpackConfig
"options": {
"customWebpackConfig": {
"path": "./config/custom.webpack.config.js",
"mergeStrategies": { "plugins": "append" }
},
That is usless for "builder": "@angular-devkit/build-angular:browser",
Also in packege.json version of this devDependencies must be next:
"devDependencies": {
"@angular-devkit/build-angular": "0.900.7",
"@angular-devkit/build-optimizer": "0.900.7",
Initially, I installed the 0.901.0 version, but it didn't work. Link to issue
I hope I will help someone.
QUESTION
I using "Detect browser wrapped lines via javascript" as a way to wrap each line in a . However, I'm having a problem if there's more than one element to split and wrap.
For example: If I have more than one section to split and wraps like:
1 - Lorem Khaled Ipsum is a major key to success. They will try to close the door on you, just open it. Watch your back, but more importantly when you get out the shower, dry your back, it’s a cold world out there.
2 - The key to more success is to get a massage once a week, very important, major key, cloth talk. Eliptical talk.
It will take all the text in .content
, split and wrap them in an a and duplicate them. So the put looks like this;
1 - Lorem Khaled Ipsum is a major key to success.
They will try to close the door on you, just open it.
Watch your back, but more importantly when you get out the
shower, dry your back, it’s a cold world out there.
2 - The key to more success is to get a massage once
a week, very important, major key, cloth talk.
Eliptical talk.
1 - Lorem Khaled Ipsum is a major key to success.
They will try to close the door on you, just open it.
Watch your back, but more importantly when you get out the
shower, dry your back, it’s a cold world out there.
2 - The key to more success is to get a massage once
a week, very important, major key, cloth talk.
Eliptical talk.
I added 1 - and 2 - to show that they duplicate. There suppose to be in different sections, not to be in all of them.
Anyway on how to split and wrap each line in a in each section and not create duplicate content?
Working example: https://codepen.io/openbayou/pen/poJwaXv
JS Code:
$(".emails .multi-items").each(function (i) {
var $cont = $('.emails .multi-items .message-contain #content')
var text_arr = $cont.text().split(' ');
for (i = 0; i < text_arr.length; i++) {
text_arr[i] = '' + text_arr[i] + ' ';
}
$cont.html(text_arr.join(''));
$wordSpans = $cont.find('span');
var lineArray = [],
lineIndex = 0,
lineStart = true,
lineEnd = false
$wordSpans.each(function(idx) {
var pos = $(this).position();
var top = pos.top;
if (lineStart) {
lineArray[lineIndex] = [idx];
lineStart = false;
} else {
var $next = $(this).next();
if ($next.length) {
if ($next.position().top > top) {
lineArray[lineIndex].push(idx);
lineIndex++;
lineStart = true
}
} else {
lineArray[lineIndex].push(idx);
}
}
});
//console.log( lineArray)
for (i = 0; i < lineArray.length; i++) {
var start = lineArray[i][0],
end = lineArray[i][1] + 1;
/* no end value pushed to array if only one word last line*/
if (!end) {
$wordSpans.eq(start).wrap('')
} else {
$wordSpans.slice(start, end).wrapAll('');
}
};
});
ANSWER
Answered 2020-Apr-01 at 21:59I wrote a vanilla JavaScript version of this:
function wrapNewLines(targetSelector, wrapEl = 'span', wrapClass = 'new-line') {
const content = document.querySelectorAll(targetSelector)
content.forEach(section => {
let sectionWidth = section.getBoundingClientRect().width
let words = section.innerText.split(/( )/g)
section.innerHTML = words.map(word =>`${word}`).join('')
let lines = []
let line = []
let lineWidth = 0
let spans = section.querySelectorAll('span')
spans.forEach((span, i) => {
let spanWidth = span.getBoundingClientRect().width
if (lineWidth + spanWidth <= sectionWidth - 4) {
line.push(span)
lineWidth += spanWidth
} else {
lines.push(line)
line = []
lineWidth = 0
line.push(span)
lineWidth += spanWidth
}
})
if (line.length) lines.push(line)
let newLines = lines
.map(
line =>
`<${wrapEl} class=${wrapClass}>${line
.map(span => span.innerText)
.join('')}`
)
.join('')
section.innerHTML = newLines
})
}
wrapNewLines ('.emails .multi-items .message-contain #content');
QUESTION
I found JS code from "Detect browser wrapped lines via javascript" but it will wrap white-spaces into a span. I'm using this code on a WordPress site and I cannot reciprocate the problem anywhere else. I tried to sanitize the code but that didn't work as well.
Is there a way to check if a span is blank and remove the span?
$(".emails .multi-items .content").each(function() {
var $cont = $(this);
var text_arr = $cont.text().split(' ');
for (i = 0; i < text_arr.length; i++) {
text_arr[i] = '' + text_arr[i] + ' ';
}
$cont.html(text_arr.join(''));
$wordSpans = $cont.find('span');
var lineArray = [],
lineIndex = 0,
lineStart = true,
lineEnd = false
$wordSpans.each(function(idx) {
var pos = $(this).position();
var top = pos.top;
if (lineStart) {
lineArray[lineIndex] = [idx];
lineStart = false;
} else {
var $next = $(this).next();
if ($next.length) {
if ($next.position().top > top) {
lineArray[lineIndex].push(idx);
lineIndex++;
lineStart = true
}
} else {
lineArray[lineIndex].push(idx);
}
}
});
//console.log( lineArray)
for (i = 0; i < lineArray.length; i++) {
var start = lineArray[i][0],
end = lineArray[i][1] + 1;
/* no end value pushed to array if only one word last line*/
if (!end) {
$wordSpans.eq(start).wrap('')
} else {
$wordSpans.slice(start, end).wrapAll('');
}
};
});
I’m up to something. Learning is cool, but knowing is better, and I know the key to success. Bless up. They never said winning was easy. Some people can’t handle success, I can.
I told you all this before, when you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.
ANSWER
Answered 2020-Mar-02 at 21:29You can check if the content that's being wrapped is not empty.
for (i = 0; i < text_arr.length; i++) {
if (text_arr[i].trim().length > 0) {
text_arr[i] = '' + text_arr[i] + ' ';
}
}
Here's the edited snippet:
$(".emails .multi-items .content").each(function() {
var $cont = $(this);
var text_arr = $cont.text().split(' ');
for (i = 0; i < text_arr.length; i++) {
if (text_arr[i].trim().length > 0) {
text_arr[i] = '' + text_arr[i] + ' ';
}
}
$cont.html(text_arr.join(''));
$wordSpans = $cont.find('span');
var lineArray = [],
lineIndex = 0,
lineStart = true,
lineEnd = false
$wordSpans.each(function(idx) {
var pos = $(this).position();
var top = pos.top;
if (lineStart) {
lineArray[lineIndex] = [idx];
lineStart = false;
} else {
var $next = $(this).next();
if ($next.length) {
if ($next.position().top > top) {
lineArray[lineIndex].push(idx);
lineIndex++;
lineStart = true
}
} else {
lineArray[lineIndex].push(idx);
}
}
});
//console.log( lineArray)
for (i = 0; i < lineArray.length; i++) {
var start = lineArray[i][0],
end = lineArray[i][1] + 1;
/* no end value pushed to array if only one word last line*/
if (!end) {
$wordSpans.eq(start).wrap('')
} else {
$wordSpans.slice(start, end).wrapAll('');
}
};
});
I’m up to something. Learning is cool, but knowing is better, and I know the key to success. Bless up. They never said winning was easy. Some people can’t handle success, I can.
I told you all this before, when you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.
QUESTION
I have a JS code that I got from "Detect browser wrapped lines via javascript" that wraps each line into a . It works when there's one set of text to wrap inside a
You can see in my example code below, the first set of text will work (green line above the text) but the second set will not.
$(".emails .multi-items").each(function (i) {
var $cont = $('#content')
var text_arr = $cont.text().split(' ');
for (i = 0; i < text_arr.length; i++) {
text_arr[i] = '' + text_arr[i] + ' ';
}
$cont.html(text_arr.join(''));
$wordSpans = $cont.find('span');
var lineArray = [],
lineIndex = 0,
lineStart = true,
lineEnd = false
$wordSpans.each(function(idx) {
var pos = $(this).position();
var top = pos.top;
if (lineStart) {
lineArray[lineIndex] = [idx];
lineStart = false;
} else {
var $next = $(this).next();
if ($next.length) {
if ($next.position().top > top) {
lineArray[lineIndex].push(idx);
lineIndex++;
lineStart = true
}
} else {
lineArray[lineIndex].push(idx);
}
}
});
//console.log( lineArray)
for (i = 0; i < lineArray.length; i++) {
var start = lineArray[i][0],
end = lineArray[i][1] + 1;
/* no end value pushed to array if only one word last line*/
if (!end) {
$wordSpans.eq(start).wrap('')
} else {
$wordSpans.slice(start, end).wrapAll('');
}
};
});
.line_wrap{ border-top: 1px solid green}
.message-contain {padding:35px 0}
Lorem Khaled Ipsum is a major key to success. They will try to close the door on you, just open it. Watch your back, but more importantly when you get out the shower, dry your back, it’s a cold world out there. The other day the grass was brown, now it’s green because I ain’t give up. Never surrender. Every chance I get, I water the plants, Lion! In life you have to take the trash out, if you have trash in your life, take it out, throw it away, get rid of it, major key. You do know, you do know that they don’t want you to have lunch. I’m keeping it real with you, so what you going do is have lunch.
Fan luv. You smart, you loyal, you a genius. We don’t see them, we will never see them. In life you have to take the trash out, if you have trash in your life, take it out, throw it away, get rid of it, major key. A major key, never panic. Don’t panic, when it gets crazy and rough, don’t panic, stay calm. The key to more success is to have a lot of pillows. You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. Let me be clear, you have to make it through the jungle to make it to paradise, that’s the key, Lion!
ANSWER
Answered 2020-Mar-02 at 05:11Your HTML is invalid - there should only be one element with a particular ID in a document, so the $('#content')
is only finding the first #content
.
Use classes instead, and select the .content
s with
$(".emails .multi-items .content").each(function() {
var $cont = $(this);
// ...
$(".emails .multi-items .content").each(function() {
var $cont = $(this);
var text_arr = $cont.text().split(' ');
for (i = 0; i < text_arr.length; i++) {
text_arr[i] = '' + text_arr[i] + ' ';
}
$cont.html(text_arr.join(''));
$wordSpans = $cont.find('span');
var lineArray = [],
lineIndex = 0,
lineStart = true,
lineEnd = false
$wordSpans.each(function(idx) {
var pos = $(this).position();
var top = pos.top;
if (lineStart) {
lineArray[lineIndex] = [idx];
lineStart = false;
} else {
var $next = $(this).next();
if ($next.length) {
if ($next.position().top > top) {
lineArray[lineIndex].push(idx);
lineIndex++;
lineStart = true
}
} else {
lineArray[lineIndex].push(idx);
}
}
});
//console.log( lineArray)
for (i = 0; i < lineArray.length; i++) {
var start = lineArray[i][0],
end = lineArray[i][1] + 1;
/* no end value pushed to array if only one word last line*/
if (!end) {
$wordSpans.eq(start).wrap('')
} else {
$wordSpans.slice(start, end).wrapAll('');
}
};
});
.line_wrap {
border-top: 1px solid green
}
.message-contain {
padding: 35px 0
}
Lorem Khaled Ipsum is a major key to success. They will try to close the door on you, just open it. Watch your back, but more importantly when you get out the shower, dry your back, it’s a cold world out there. The other day the grass was brown, now it’s
green because I ain’t give up. Never surrender. Every chance I get, I water the plants, Lion! In life you have to take the trash out, if you have trash in your life, take it out, throw it away, get rid of it, major key. You do know, you do know
that they don’t want you to have lunch. I’m keeping it real with you, so what you going do is have lunch.
Fan luv. You smart, you loyal, you a genius. We don’t see them, we will never see them. In life you have to take the trash out, if you have trash in your life, take it out, throw it away, get rid of it, major key. A major key, never panic. Don’t panic,
when it gets crazy and rough, don’t panic, stay calm. The key to more success is to have a lot of pillows. You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. Let me be clear,
you have to make it through the jungle to make it to paradise, that’s the key, Lion!
QUESTION
I am using `detect-browser' library in React component. I have as following:
export const browser = detect();
And inside component:
browser.name
I am writing an test for this one (snapshot) and i receive an error:
TypeError: Cannot read property 'name' of null
This is as I guess because I need to store a mock name from this library. I tried like this but get errors all the time
jest.mock('detect-browser', () => () => ({
detect: () => {browser{name: 'edge'}},
}));
How this should be mocked properly ? Or I should do it in a different way?
ANSWER
Answered 2019-May-23 at 11:05You are just returning browser object wrong. Should be:
jest.mock('detect-browser', () => ({
detect: () => ({ browser: { name: 'edge' } }),
}));
QUESTION
I built an angular application which runs fine if I serve it in a non-production mode but if I run it with --prod
I get the following error:
Uncaught TypeError: this._platformLocation.onPopState is not a function
The LocationStrategy is provided correctly and it's the latest angular version which should have this bug fixed already.
"dependencies": {
"@angular/animations": "~7.0.4",
"@angular/common": "~7.0.4",
"@angular/compiler": "~7.0.4",
"@angular/core": "~7.0.4",
"@angular/forms": "~7.0.4",
"@angular/http": "~7.0.4",
"@angular/platform-browser": "~7.0.4",
"@angular/platform-browser-dynamic": "~7.0.4",
"@angular/router": "~7.0.4",
"@ngx-translate/core": "~11.0.1",
"@ngx-translate/http-loader": "~4.0.0",
"@webcomponents/webcomponentsjs": "2.2.7",
"core-js": "~2.5.7",
"is-docker": "^1.1.0",
"ngx-toastr": "^9.1.2",
"lit-html": "~1.0.0",
"rxjs": "~6.3.3",
"split.js": "~1.5.9",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.10.1",
"@angular/cli": "~7.0.6",
"@angular/compiler-cli": "~7.0.4",
"@angular/language-service": "~7.0.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~10.12.9",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "~0.2.2",
"karma-detect-browsers": "~2.3.3",
"karma-firefox-launcher": "^1.1.0",
"karma-ie-launcher": "^1.0.0",
"npm-run-all": "^4.1.5",
"protractor": "~5.4.0",
"ts-node": "~7.0.1",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
}
Can somebody explain why this error happens? And why it only pops up in the production build?
Thanks in advance.
ANSWER
Answered 2019-Mar-25 at 14:03Solution: The problem was that some webcomponents I used had older ECMAScript versions than the angular application. Resolving that issue fixed the problem.
QUESTION
I am working on an Angular project that does not, and cannot for now, use the Angular CLI. So I am trying to setup a Karma config but I get this error:
> karma start karma.conf.js
15 05 2018 16:23:28.330:WARN [framework.detect-browsers]: No launcher found
for browser Chrome, it will not be used.
15 05 2018 16:23:28.334:WARN [framework.detect-browsers]: No launcher found
for browser Firefox, it will not be used.
15 05 2018 16:23:28.335:WARN [framework.detect-browsers]: No launcher found
for browser IE, it will not be used.
15 05 2018 16:23:28.400:WARN [watcher]: Pattern
"C:/thing/node_modules/systemjs/dist/system-polyfills.js"
does not match any file.
15 05 2018 16:23:37.118:WARN [watcher]: All files matched by
"C:\thing\node_modules\karma-systemjs\lib\adapter.js"
were excluded or matched by prior matchers.
IE 11.0.0 (Windows 10 0.0.0) ERROR
{
"message": "'Promise' is undefined\nat
node_modules/systemjs/dist/system.js:4:36898\n\nReferenceError: 'Promise' is undefined\n at Anonymous function
(node_modules/systemjs/dist/system.js:4:36898)\n at Global code
(node_modules/systemjs/dist/system.js:4:2)", "str": "'Promise' is undefined\nat
node_modules/systemjs/dist/system.js:4:36898\n\nReferenceError: 'Promise' is
undefined\n at Anonymous function
(node_modules/systemjs/dist/system.js:4:36898)\n at Global code
(node_modules/systemjs/dist/system.js:4:2)"
}
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
{
"message": "ReferenceError: Can't find variable: Promise\nat
node_modules/systemjs/dist/system.js:4:36908",
"str": "ReferenceError: Can't find variable: Promise\nat
node_modules/systemjs/dist/system.js:4:36908"
}
Chrome 66.0.3359 (Windows 10 0.0.0): Executed 0 of 0 ERROR (0.006 secs / 0
secs)
Firefox 59.0.0 (Windows 10 0.0.0): Executed 0 of 0 ERROR (0.014 secs / 0
secs)
npm ERR! Test failed. See above for more details.
I have absolutely no idea why this is happening now. I clearly have the launchers as plugins. I am grabbing the babel polyfill as the first file, and yet the error tells me I have no launchers (launches the browsers anyway), and then crashes out with this error about lacking the polyfill. Why the tests also error as executing 0 of 0 I am also at a loss. Anyone know the problem please?
// Karma configuration
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: "./",
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ["detectBrowsers", "systemjs", "jasmine"],
detectBrowsers: {
enabled: true,
// enable/disable phantomjs support, default is true
usePhantomJS: true,
postDetection: function (availableBrowser) {
/* Karma configuration with custom launchers
customLaunchers: {
IE9: {
base: 'IE',
'x-ua-compatible': 'IE=EmulateIE9'
}
}
*/
var result = availableBrowser;
//Remove PhantomJS if another browser has been detected
if (availableBrowser.length > 1 && availableBrowser.indexOf("PhantomJS") > -1) {
const i = result.indexOf("PhantomJS");
if (i !== -1) {
result.splice(i, 1);
}
}
return result;
}
},
systemjs: {
config: {
paths: {
"typescript": "node_modules/typescript/lib/typescript.js",
"systemjs": "node_modules/systemjs/dist/system.js"
},
map: {
"app": "script.es5/app",
"unittests": "script.es5/unittests",
"rxjs": "node_modules/rxjs",
"crypto": "@empty", // Hack : had to do this to get it to work!
"@angular": "node_modules/@angular"
},
packages: {
"app": {
defaultExtension: "js",
format: "register"
},
"unittests": {
defaultExtension: "js"
},
"@angular/core": { defaultExtension: "js", main: "index.js" },
"@angular/common": { defaultExtension: "js", main: "index.js" },
"@angular/compiler": { defaultExtension: "js", main: "index.js" },
"@angular/router": { defaultExtension: "js", main: "index.js" },
"@angular/platform-browser": { defaultExtension: "js", main: "index.js" },
"@angular/platform-browser-dynamic": { defaultExtension: "js", main: "index.js" },
"rxjs": {
defaultExtension: "js"
}
},
transpiler: "typescript"
},
serveFiles: [
"node_modules/**/*.js",
"script.es5/**/*.js"
]
},
// list of files / patterns to load in the browser
files: [
{ pattern: "node_modules/babel-polyfill/dist/polyfill.min.js", watched: false },
////{ pattern: "node_modules/zone.js/dist/zone.js", watched: false },
////////{ pattern: "node_modules/reflect-metadata/Reflect.js", watched: false },
////{ pattern: "node_modules/rxjs/**/*.js", included: false, watched: false },
////{ pattern: "node_modules/rxjs/**/*.js.map", included: false, watched: false },
////{ pattern: "node_modules/@angular/**/*.js", included: false, watched: true },
////{ pattern: "node_modules/@angular/**/*.js.map", included: false, watched: true },
// Unit tests
////{ pattern: "script.es5/unittests/*.spec.js", included: true, watched: true }
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ["progress"],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_WARN,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ["Chrome", "Firefox", "IE"],
plugins: [
"karma-systemjs",
"karma-detect-browsers",
"karma-firefox-launcher",
"karma-chrome-launcher",
"karma-ie-launcher",
"karma-phantomjs-launcher",
"karma-jasmine"
],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
});
}
The test
describe("Simple test", () => {
it("should work", () => {
expect(1).toBe(1);
});
});
ANSWER
Answered 2018-May-23 at 02:44According to your output:
15 05 2018 16:23:28.400:WARN [watcher]: Pattern "C:/thing/node_modules/systemjs/dist/system-polyfills.js" does not match any file.
So you have no polyfills from the ENOENT error.
Then later it has:
IE 11.0.0 (Windows 10 0.0.0) ERROR { "message": "'Promise' is undefined\nat
As you probably are aware IE 11 does not support the Promise construct out of the box like on-level browsers do so you'd need to polyfill with something.
If possible I'd also recommend looking at it with Chrome to see if your tests will run at all. Then you can fight the battle with IE.
QUESTION
Last week, without any changing of our configurations or dependencies, our builds started failing.
The errors we are getting during any run of any karma tests are along the lines of:
26 03 2018 10:25:34.870:INFO [framework.detect-browsers]: The following browsers were detected on your system: [ 'Chrome', 'Chromium' ] 26 03 2018 10:25:34.874:WARN [framework.detect-browsers]: No launcher found for browser Chrome, it will not be used. 26 03 2018 10:25:34.874:WARN [framework.detect-browsers]: No launcher found for browser Chromium, it will not be used. 26 03 2018 10:25:34.874:INFO [framework.detect-browsers]: The following browsers will be used: []
We can replicate this on all machines across versions 1 of karma-detect-browsers, all the way up to the latest 2.3.1.
All the machines may use potentially slightly different versions of node and npm, but our CI server where this was first detected uses node version 8.4.0 and npm version 5.3.0.
Not sure if anyone else has had this problem or can offer some advice?
ANSWER
Answered 2018-Mar-26 at 10:44We have had the same issue today. The issue is with a minor version of karma-detect-browsers
. Try locking the version to 2.2.6
and reinstall, then test again.
This fixed the problem for us. We'll report it back to the package maintainer.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install detect-browser
Support
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesExplore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits
Save this library and start creating your kit
Share this Page