Develop Reference

Main.js file too large in angular 12

While making build i am getting too large main js file . i am using lazy loading in all component but still my main js file to large
i am providing config details below. Please let me know any solution for this
i am attaching build size image too. please find below
While making build i am getting too large main js file . i am using lazy loading in all component but still my main js file to large
i am providing config details below. Please let me know any solution for this
i am attaching build size image too. please find below
enter image description here
"name": "kapilguru",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"serve": "serve --open",
"start": "ng serve --source-map=false --host 0.0.0.0 --disable-host-check ",
"build": "ng build --configuration=production",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^12.2.2",
"#angular/cdk": "^11.2.4",
"#angular/common": "~12.2.2",
"#angular/compiler": "~12.2.2",
"#angular/core": "~12.2.2",
"#angular/forms": "~12.2.2",
"#angular/material": "^11.2.4",
"#angular/platform-browser": "^12.2.2",
"#angular/platform-browser-dynamic": "~12.2.2",
"#angular/router": "~12.2.2",
"#material/button": "^10.0.0",
"#material/notched-outline": "^10.0.0",
"#material/ripple": "^10.0.0",
"#material/textfield": "^10.0.0",
"#ng-bootstrap/ng-bootstrap": "^9.0.2",
"#types/file-saver": "^2.0.2",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"angular-ng-autocomplete": "^2.0.5",
"angularx-social-login": "^3.5.7",
"assert": "^2.0.0",
"bootstrap": "^4.0.0-beta.2",
"chart.js": "^2.9.3",
"ckeditor4-angular": "^2.2.1",
"crypto-browserify": "^3.12.0",
"file-saver": "^2.0.5",
"fs-web": "^1.0.1",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-rc.7",
"https-browserify": "^1.0.0",
"jquery": "^3.6.0",
"jspdf": "^2.3.1",
"material-icons": "^0.5.4",
"ng-circle-progress": "^1.6.0",
"ng-connection-service": "^1.0.4",
"ng-otp-input": "^1.7.1",
"ng2-charts": "^2.2.3",
"ng2-file-upload": "^1.4.0",
"ngx-editor": "^9.0.2",
"ngx-image-cropper": "^3.3.5",
"ngx-material-timepicker": "^5.5.3",
"ngx-owl-carousel-o": "^5.1.0",
"ngx-spinner": "^11.0.2",
"ngx-toastr": "^13.2.1",
"os-browserify": "^0.3.0",
"paytm-blink-checkout-angular": "^0.0.2",
"primeflex": "^2.0.0",
"primeicons": "^4.1.0",
"primeng": "^11.4.0",
"quill": "^1.3.7",
"rxjs": "~6.6.0",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"sweetalert2": "^11.0.16",
"tslib": "^2.0.0",
"uuid": "^8.3.2",
"webex": "^1.136.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^12.2.6",
"#angular/cli": "~12.2.2",
"#angular/compiler-cli": "~12.2.2",
"#types/jasmine": "~3.6.0",
"#types/jquery": "^3.5.5",
"#types/jspdf": "^2.0.0",
"#types/lodash": "^4.14.172",
"#types/node": "^12.11.1",
"#types/sizzle": "^2.3.3",
"#types/uuid": "^8.3.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.3.5"
},
"browser": {
"fs": false,
"path": false,
"os": false,
"crypto": false,
"stream": false,
"http": false,
"tls": false,
"zlib": false,
"https": false,
"net": false
}
}
{
"compileOnSave": true,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": false,
"disableSizeLimit": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"allowJs": true,
"removeComments": true,
"skipLibCheck": false,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": [
"ES2015",
"es2018",
"dom"
],
"paths" : {
"crypto": ["./node_modules/crypto-browserify"],
"stream": ["./node_modules/stream-browserify"],
"assert": ["./node_modules/assert"],
"http": ["./node_modules/stream-http"],
"https": ["./node_modules/https-browserify"],
"os": ["./node_modules/os-browserify"],
"fs": ["./node_modules/fs-web"]
}
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInputAccessModifiers": false,
"strictTemplates": false,
"fullTemplateTypeCheck": false,
"strictInjectionParameters": true,
"enableIvy": true
}
}```

You can gzip your static assets by using "Compression"
const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())

Angular 9 Application not loading in IE11

I am facing an issue where my app is not loading in IE 11 after adding ngx-treeview.
I am getting the following error(SCRIPT1002: Syntax error),
Script Error
Error point in vendor.js
I am not sure how to resolve this issue. The application runs fine in chrome and firefox but in IE11 I only see Loading... . I couldn't find browser compatibility on the library github page. Should I give up on using this library or there is a way to fix this issue.
The package.json file is
"scripts": {
"ng": "ng",
"start": "ng serve --extract-css",
"build": "ng build --extract-css",
"build:ssr": "npm run build -- --app=ssr --output-hashing=media",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ngcc"
},
"private": true,
"dependencies": {
"#angular-slider/ngx-slider": "^2.0.3",
"#angular/animations": "^9.1.13",
"#angular/common": "^9.1.13",
"#angular/compiler": "^9.1.13",
"#angular/core": "^9.1.13",
"#angular/forms": "^9.1.13",
"#angular/platform-browser": "^9.1.13",
"#angular/platform-browser-dynamic": "^9.1.13",
"#angular/platform-server": "^9.1.13",
"#angular/router": "^9.1.13",
"#fortawesome/fontawesome-free": "^5.15.3",
"#ng-select/ng-select": "4.0.4",
"angular-polyfills": "^1.0.1",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.6.0",
"btoa": "^1.2.1",
"classlist.js": "^1.1.20150312",
"console-polyfill": "^0.3.0",
"core-js": "^2.4.1",
"hidden-attribute-polyfill": "^0.1.0",
"ie9-oninput-polyfill": "^1.1.1",
"jquery": "^3.4.1",
"ngx-bootstrap": "^6.2.0",
"ngx-infinite-scroll": "^9.1.0",
"ngx-treeview": "^10.0.2",
"node-sass": "^4.14.1",
"responsive-toolkit": "^2.6.3",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.0.0-rc.0",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.901.13",
"#angular/cli": "^9.1.13",
"#angular/compiler-cli": "^9.1.13",
"#angular/language-service": "^9.1.13",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~3.8.3"
},
"optionalDependencies": {}
}}```
and tsconfig.json is
```{
"compileOnSave": false,
"compilerOptions": {
"downlevelIteration": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
],
"module": "esnext",
"baseUrl": "./"
}
}

In browserslist file, modify not IE 9-11 to IE 9-11
In tsconfig.json file, modify "target": "es2015"to "target": "es5"

Syntax error on IE11 with Angular 10(non-CLI)

I'm currently making app in Angular 10 (not use Angular-cli).
This app is compiled and bundled using webpack 4 and #ngtools/webpack, then working fine on Chrome, but not working on IE11 with below error.
SCRIPT1002: Syntax error
vendor.js (2, 5884)
function makeDecorator(name, props, parentClass, additionalProcessing, typeFn) {
return noSideEffects(() => {
^^^^^
How can I get rid of this error?
webpack.config.js (excerpt)
module.exports = {
entry: {
'polyfills': './app/polyfills.ts',
'vendor': './app/vendor.ts',
'app': './app/main.ts'
},
resolve: {
extensions: ['.js', '.ts']
},
module: {
rules: [
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
use: [
{
loader: '#ngtools/webpack'
}
]
}
]
}
plugins: [
new AngularCompilerPlugin({
tsConfigPath: 'tsconfig.json',
entryModule: 'app/app.module.ts#AppModule'
})
]
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "es2020",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"types": ["node", "core-js"],
"typeRoots": ["node_modules/#types"],
"sourceMap": true,
"plugins": [
{ "name": "#angular/language-service" }
],
"lib" : ["es2015", "es2015.iterable", "dom"],
},
"exclude": [
"node_modules",
],
"angularCompilerOptions": {
"enableIvy": true,
"skipMetadataEmit" : true,
}
}
polyfills.ts
import "core-js/es/array/index";
import "core-js/es/date/index";
import "core-js/es/function/index";
import "core-js/es/map/index";
import "core-js/es/math/index";
import "core-js/es/number/index";
import "core-js/es/object/index";
import "core-js/es/reflect/index";
import "core-js/es/regexp/index";
import "core-js/es/set/index";
import "core-js/es/string/index";
import "core-js/es/symbol/index";
import "core-js/features/reflect/index";
import "zone.js/dist/zone";
import "classlist.js";
import "web-animations-js";
if (!Element.prototype.matches) {
Element.prototype.matches = (<any>Element.prototype).msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
package.json (dependencies)
"dependencies": {
"#angular/animations": "10.2.0",
"#angular/common": "10.2.0",
"#angular/compiler": "10.2.0",
"#angular/compiler-cli": "10.2.0",
"#angular/core": "10.2.0",
"#angular/forms": "10.2.0",
"#angular/language-service": "10.2.0",
"#angular/platform-browser": "10.2.0",
"#angular/platform-browser-dynamic": "10.2.0",
"#angular/router": "10.2.0",
"#fortawesome/fontawesome-free": "5.15.1",
"angular-in-memory-web-api": "0.11.0",
"bootstrap": "4.5.3",
"classlist.js": "1.1.20150312",
"core-js": "3.7.0",
"jquery": "3.5.1",
"popper.js": "1.16.0",
"rxjs": "6.6.3",
"web-animations-js": "2.3.2",
"zone.js": "0.11.2",
},
"devDependencies": {
"#ngtools/webpack": "10.2.0",
"#types/core-js": "2.5.4",
"#types/jasmine": "3.5.14",
"#types/node": "14.14.2",
"#types/webpack": "4.41.23",
"angular2-template-loader": "0.6.2",
"awesome-typescript-loader": "5.2.1",
"browserify": "17.0.0",
"codelyzer": "6.0.1",
"copy-webpack-plugin": "6.2.1",
"copyfiles": "2.4.0",
"css-loader": "5.0.0",
"file-loader": "6.1.1",
"glob": "7.1.6",
"html-loader": "1.3.2",
"html-webpack-plugin": "4.5.0",
"istanbul-instrumenter-loader": "3.0.1",
"mini-css-extract-plugin": "0.12.0",
"nodemon": "2.0.6",
"raw-loader": "1.0.0",
"reflect-metadata": "0.1.13",
"regenerator-runtime": "0.13.7",
"remap-istanbul": "0.13.0",
"rimraf": "3.0.2",
"source-map-loader": "1.1.1",
"style-loader": "2.0.0",
"terser-webpack-plugin": "4.2.3",
"to-string-loader": "1.1.6",
"ts-helpers": "1.1.2",
"ts-node": "9.0.0",
"tslint": "6.1.0",
"typescript": "4.0.3",
"watchify": "3.11.1",
"webpack": "4.44.1",
"webpack-cli": "3.3.12",
"webpack-dev-middleware": "3.7.2",
"webpack-dev-server": "3.11.0",
"webpack-md5-hash": "0.0.6",
"webpack-merge": "5.2.0"
}

Check browserslist file. You should remove not before IE 9-11. Like this:
> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.

Correct way to use Ionic's social-sharing plugin?

I am trying to implement Ionic's social sharing plugin into my app, but I'm having issues.
This is the error I get:
Here is my component.ts
import {SocialSharing} from '#ionic-native/social-sharing/ngx';
export class SettingsPage implements OnInit {
code: string = null;
constructor(
private socialSharing: SocialSharing
) {}
ngOnInit() {}
shareCode(code) {
this.socialSharing.canShareViaEmail().then(() => {
// this.socialSharing
// .share(`Here is your code: ${code}`)
// .then(() => {
// log.debug('code has been shared?');
// });
});
}
}
Here is my package.json
{
"dependencies": {
"#angular/common": "^8.2.14",
"#angular/core": "^8.2.14",
"#angular/forms": "^8.2.14",
"#angular/http": "^7.2.16",
"#angular/platform-browser": "^8.2.14",
"#angular/platform-browser-dynamic": "^8.2.14",
"#angular/pwa": "^0.803.25",
"#angular/router": "^8.2.14",
"#angular/service-worker": "^8.2.14",
"#biesbjerg/ngx-translate-extract-marker": "^1.0.0",
"#fullcalendar/core": "^4.4.0",
"#fullcalendar/daygrid": "^4.4.0",
"#fullcalendar/interaction": "^4.4.0",
"#fullcalendar/resource-common": "^4.4.0",
"#fullcalendar/timegrid": "^4.4.0",
"#ionic-native/core": "^5.22.0",
"#ionic-native/in-app-browser": "^5.22.0",
"#ionic-native/social-sharing": "^5.22.0",
"#ionic-native/splash-screen": "^5.22.0",
"#ionic-native/status-bar": "^5.22.0",
"#ionic/angular": "^4.11.10",
"#ionic/pro": "2.0.4",
"#ionic/storage": "^2.2.0",
"#ngx-translate/core": "^12.1.2",
"#sentry/browser": "^4.6.6",
"angular2-counto": "^1.2.5",
"angularfire2": "^5.4.2",
"cordova": "^9.0.0",
"cordova-android": "^8.1.0",
"cordova-plugin-browsertab": "0.2.0",
"cordova-plugin-compat": "1.2.0",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-inappbrowser": "3.1.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^3.1.2",
"cordova-plugin-splashscreen": "^5.0.3",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.4",
"cordova-plugin-x-socialsharing": "^5.4.0",
"cordova-universal-links-plugin": "^1.2.1",
"cordova-universal-links-plugin-fix": "1.2.1",
"core-js": "^2.6.10",
"es6-promise-plugin": "^4.2.2",
"firebase": "^5.11.1",
"ionic": "^5.4.16",
"jam-icons": "^2.0.0",
"lodash": "^4.17.15",
"messageformat": "^2.3.0",
"moment": "^2.24.0",
"ngx-toastr": "^9.1.2",
"ngx-translate-messageformat-compiler": "^4.6.0",
"ngx-ui-loader": "^7.2.2",
"rxjs": "^6.5.4",
"uuid": "^3.4.0",
"web": "0.0.2",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/architect": "^0.803.25",
"#angular-devkit/build-angular": "^0.803.25",
"#angular-devkit/core": "^8.3.25",
"#angular-devkit/schematics": "^8.3.25",
"#angular/cli": "^8.3.25",
"#angular/compiler": "^8.2.14",
"#angular/compiler-cli": "^8.2.14",
"#angular/language-service": "^8.2.14",
"#biesbjerg/ngx-translate-extract": "^4.2.0",
"#ionic/angular-toolkit": "^2.2.0",
"#ionic/app-scripts": "^3.2.4",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "^2.0.8",
"#types/moment": "^2.13.0",
"#types/node": "^10.17.17",
"codelyzer": "~4.5.0",
"cypress": "^3.8.3",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.4",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.3",
"ts-node": "^8.6.2",
"tslint": "~5.12.0",
"typescript": "3.5.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-universal-links-plugin": {},
"cordova-plugin-browsertab": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-x-socialsharing": {
"ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
}
},
"platforms": [
"android"
]
}
}
I've been trying different for several hours but I just don't know what I'm missing. Is there a special module to include or something?

Add Social Sharing to app.module.ts under providers.
import { SocialSharing } from '#ionic-native/social-sharing/ngx';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [],
providers: [
...
SocialSharing,
...
],
bootstrap: [AppComponent]
})
export class AppModule {}

VERY IMPORTANT! Update for an issue in Android resolved by me ie: #dipesious
You will get an array of different packages as a .catch(error)
This means you did not add QUERY_ALL_PACKAGES permission to your manifest. Add this to your Android manifest file:
congratulations BUG RESOLVED...

Argument of type 'Map<any, any>' is not assignable to parameter of type 'ArrayLike<{}>'

I'm trying to create an Rx.Observable from a Map object inside an Angular component and I'm getting the following error:
Argument of type 'Map<any, any>' is not assignable to parameter of type 'ArrayLike<{}>'
The code works fine outside Angular (see: http://jsbin.com/tezohobudu/1/edit?js,console) so I don't understand why is not working in an Angular component. The component code is:
import { Component } from '#angular/core';
import { from } from 'rxjs/observable/from';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
testOne(){
//works on js collections
const map = new Map();
map.set(1, 'Hi');
map.set(2, 'Bye');
const mapSource = from(map);
//output: [1, 'Hi'], [2, 'Bye']
const subscribe = mapSource.subscribe(val => console.log(val));
}
}
package.json is:
{
"name": "angular-tests",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.2.0",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular/cli": "1.6.5",
"#angular/compiler-cli": "^5.2.0",
"#angular/language-service": "^5.2.0",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
and tsconfig.json is:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
]
}
}