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"
Related
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())
The Error I got suddenly while running my app in a development environment using VSCode,
main.js:7740 ERROR Error: Angular JIT compilation failed: '#angular/compiler' not loaded!
- JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
- Did you bootstrap using '#angular/platform-browser-dynamic' or '#angular/platform-server'?
- Alternatively provide the compiler with 'import "#angular/compiler";' before bootstrapping.
at getCompilerFacade (vendor.js:20189)
at Function.get (vendor.js:33871)
at getInjectableDef (vendor.js:19941)
at resolveNgModuleDep (vendor.js:47812)
at NgModuleRef_.get (vendor.js:48688)
at resolveDep (vendor.js:49213)
at createClass (vendor.js:49071)
at createDirectiveInstance (vendor.js:48882)
at createViewNodes (vendor.js:60498)
at callViewAction (vendor.js:60948)
Also got an error saying
Angular extension might not work correctly because ngcc operation failed. Try to invoke ngcc manually by running 'npm/yarn run ngcc'. Please see the extension output for more information.
Package.json contains below
{
"name": "dxfsuite",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve -o --proxy-config proxy.conf.json --port 4200",
"build": "ng build",
"build-prod": "ng build --prod --stats-json --source-map=false",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular-devkit/schematics-cli": "^0.901.14",
"#angular/animations": "~9.0.0",
"#angular/cdk": "^9.1.0",
"#angular/common": "~9.0.0",
"#angular/compiler": "~9.0.0",
"#angular/core": "~9.0.0",
"#angular/forms": "~9.0.0",
"#angular/localize": "^9.1.13",
"#angular/platform-browser": "~9.0.0",
"#angular/platform-browser-dynamic": "~9.0.0",
"#angular/router": "~9.0.0",
"#elastic/apm-rum-angular": "^0.5.0",
"#fullcalendar/angular": "^4.4.5-beta",
"#fullcalendar/core": "^4.4.0",
"#fullcalendar/daygrid": "^4.4.0",
"#fullcalendar/timegrid": "^4.4.0",
"#ionic/angular": "^5.5.4",
"#ng-bootstrap/ng-bootstrap": "^6.0.0",
"#ng-select/ng-select": "^3.7.2",
"#swimlane/ngx-charts": "^13.0.2",
"#types/jquery": "^3.5.5",
"angular-feather": "^6.1.0",
"apexcharts": "^3.25.0",
"bootstrap": "^4.6.0",
"bootstrap-daterangepicker": "^3.0.5",
"bootstrap-tagsinput": "^0.7.1",
"daterangepicker": "^3.0.5",
"install-peers": "^1.0.3",
"jquery": "^3.4.1",
"jqueryui": "^1.11.1",
"loadash": "^1.0.0",
"lodash": "^4.17.15",
"moment": "^2.26.0",
"moment-timezone": "^0.5.33",
"ng-apexcharts": "^1.5.8",
"ng-zorro-antd": "^9.0.0-beta.0",
"ng2-daterangepicker": "^2.0.12",
"ngx-filesize": "^2.0.13",
"ngx-perfect-scrollbar": "^8.0.0",
"ngx-sortablejs": "^3.1.4",
"ngx-spinner": "^10.0.1",
"peity": "^3.3.0",
"popper.js": "^1.16.1",
"ramda": "^0.26.1",
"rxjs": "^6.5.4",
"service-worker": "0.0.0",
"sortablejs": "^1.13.0",
"tslib": "^1.10.0",
"videogular2": "^7.0.2",
"vivus": "^0.4.5",
"web-push": "^3.4.3",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.900.1",
"#angular/cli": "~9.0.1",
"#angular/compiler-cli": "~9.0.0",
"#angular/language-service": "~9.0.0",
"#ionic/angular-toolkit": "^3.1.0",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.20.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.7.5"
}
}
and itsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
Searched many forums to get this resolved. But nothing is helpful for me.
please help
For me is caused by the Angular Language Service extension.
Enabled legacy view-engine in the extension setting
Delete node_modules folder (npx rimraf node_modules)
Run npm install
Edit: should have fixed in this commit.
I am a student learning Angular by building project. When i do ng build it works but ng build --prod gives an error.
I have tried removing node_modules and then reinstalling it again.
The error says as follows:
ERROR in ./src/app/app.module.ngfactory.js 41:3371-3377 "export 'ɵa'
(imported as 'i12') was not found in '#angular/common'
Here is my package.json file.
"name": "angular-project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.0",
"#angular/cdk": "^8.1.3",
"#angular/common": "~8.2.0",
"#angular/compiler": "~8.2.0",
"#angular/core": "~8.2.0",
"#angular/forms": "~8.2.0",
"#angular/platform-browser": "~8.2.0",
"#angular/platform-browser-dynamic": "~8.2.0",
"#angular/router": "~8.2.0",
"#ng-bootstrap/ng-bootstrap": "^5.1.0",
"#types/socket.io-client": "^1.4.32",
"avatar-name-initials": "^2.0.5",
"bootstrap": "^4.3.1",
"express": "^4.17.1",
"ng2-file-upload": "^1.3.0",
"path": "^0.12.7",
"rxjs": "~6.4.0",
"rxjs-compat": "^6.5.4",
"socket.io-client": "^2.3.0",
"sweetalert2": "^8.16.1",
"time-ago-pipe": "^1.3.2",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.802.1",
"#angular/cli": "^8.3.0",
"#angular/compiler-cli": "^8.2.3",
"#angular/language-service": "~8.2.0",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"enhanced-resolve": "^3.3.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}
Production Configuration
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
Note: If i turn aot and buildOptimizer to false, it works and no error is thrown.
I'm trying to build the angular 6 app using webpack.
getting error as
ERROR in ./src/main.ts
Module build failed (from ./node_modules/#ngtools/webpack/src/index.js):
Error: Cannot find module '#angular/compiler-cli/ngcc'
package.json
{
"name": "cloud-complince",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "webpack",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.1.10",
"#angular/common": "^6.1.10",
"#angular/compiler": "^6.1.10",
"#angular/core": "^6.1.10",
"#angular/forms": "^6.1.10",
"#angular/http": "^6.1.10",
"#angular/platform-browser": "^6.1.10",
"#angular/platform-browser-dynamic": "^6.1.10",
"#angular/router": "^6.1.10",
"chart.js": "^2.8.0",
"chartjs-plugin-datalabels": "^0.4.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.6.9",
"ngx-cookie": "^3.0.1",
"rxjs": "~6.2.0",
"rxjs-compat": "^6.5.2",
"web-animations-js": "^2.3.2",
"zone.js": "^0.8.29"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.8.9",
"#angular/cli": "^6.2.7",
"#angular/compiler-cli": "^6.1.0",
"#angular/language-service": "^6.1.10",
"#ngtools/webpack": "^8.1.1",
"#types/jasmine": "^2.8.16",
"#types/jasminewd2": "^2.0.6",
"#types/node": "~8.9.4",
"codelyzer": "~4.3.0",
"copy-webpack-plugin": "^4.6.0",
"html-webpack-plugin": "^2.30.1",
"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.5",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.2",
"raw-loader": "^0.5.1",
"script-ext-html-webpack-plugin": "^1.8.8",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~2.9.2",
"webpack": "4.24.0"
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"skipLibCheck": true,
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
]
}
}
Kindly help me to resolve this issue
Thanks in advance
Try these command to see if it work
npm uninstall angular-cli -g
npm uninstall angular-cli --save
npm install -g #angular/cli
npm install #angular/cli --save
npm install #angular/compiler-cli --save
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"
]
}
}