Error:Angular JIT compilation failed:'#angular/compiler' not loaded!JIT compilation is discouraged for production use-cases! Consider AOT mode instead - heroku

my app doesn't work in production in heroku but works fine in local
my Package.json file:
{ "name": "Medica_Ligne", "version": "0.0.9", "scripts": { "ng": "ng", "start": "node server.js", "build": "ng build", "watch": "ng build --watch --configuration development", "heroku-postbuild":"ng build --prod --aot", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "#angular/cli": "~12.0.1", "#angular/compiler": "~12.0.1", "#angular/common": "~12.0.1", "#angular/compiler-cli": "~12.0.1", "#angular/core": "~12.0.1", "#angular/flex-layout": "^2.0.0-beta.10-4905443", "#angular/forms": "~12.0.1", "#angular/http": "^7.2.16", "#angular/platform-browser": "~12.0.1", "#angular/platform-browser-dynamic": "~12.0.1", "#angular/router": "~12.0.1", "#ionic-native/android-permissions": "^5.33.1", "#ionic-native/base64": "^5.33.1", "#ionic-native/camera": "^5.36.0", "#ionic-native/core": "^5.33.1", "#ionic-native/date-picker": "^5.33.1", "#ionic-native/email-composer": "^5.36.0", "#ionic-native/fcm": "^5.36.0", "#ionic-native/file": "^5.33.1", "#ionic-native/file-transfer": "^5.33.1", "#ionic-native/ionic-webview": "^5.36.0", "#ionic-native/keyboard": "^5.36.0", "#ionic-native/media": "^5.33.1", "#ionic-native/media-capture": "^5.33.1", "#ionic-native/native-audio": "^5.36.0", "#ionic-native/pdf-generator": "^5.36.0", "#ionic-native/splash-screen": "^5.33.1", "#ionic-native/status-bar": "^5.33.1", "#ionic/angular": "^5.5.2", "#ionic/storage": "^2.2.0", "#ngx-translate/core": "^14.0.0", "#ngx-translate/http-loader": "^7.0.0", "cocoapods": "^0.0.0", "express": "^4.18.2", "file-saver": "^2.0.5", "ngx-pagination": "^5.1.1", "ngx-quill": "^5.2.0", "path": "^0.12.7", "quill": "^1.3.7", "rxjs": "~6.5.1", "rxjs-compat": "^6.6.7", "tslib": "^2.0.0", "typescript": "~4.2.4", "zone.js": "~0.11.4" }, "devDependencies": { "#angular-devkit/build-angular": "~12.0.1", "#angular-eslint/builder": "~12.0.0", "#angular-eslint/eslint-plugin": "~12.0.0", "#angular-eslint/eslint-plugin-template": "~12.0.0", "#angular-eslint/template-parser": "~12.0.0", "#angular/cli": "~12.0.1", "#angular/compiler": "~12.0.1", "#angular/compiler-cli": "~12.0.1", "#angular/language-service": "~12.0.1", "#ionic/angular-toolkit": "^4.0.0", "#types/jasmine": "~3.6.0", "#types/jasminewd2": "~2.0.3", "#typescript-eslint/eslint-plugin": "4.16.1", "#typescript-eslint/parser": "4.16.1", "com-badrit-base64": "^0.2.0", "cordova-android": "^9.0.0", "cordova-browser": "^6.0.0", "cordova-ios": "^6.2.0", "cordova-pdf-generator": "^2.1.1", "cordova-plugin-android-permissions": "^1.1.2", "cordova-plugin-androidx": "^3.0.0", "cordova-plugin-androidx-adapter": "^1.1.3", "cordova-plugin-camera": "^5.0.3", "cordova-plugin-datepicker": "^0.9.3", "cordova-plugin-device": "^2.0.2", "cordova-plugin-email-composer": "^0.10.0", "cordova-plugin-fcm-with-dependecy-updated": "^7.8.0", "cordova-plugin-file": "^6.0.2", "cordova-plugin-file-opener2": "^3.0.5", "cordova-plugin-file-transfer": "^1.7.1", "cordova-plugin-ionic-keyboard": "^2.2.0", "cordova-plugin-ionic-webview": "^5.0.0", "cordova-plugin-media": "^5.0.3", "cordova-plugin-media-capture": "^3.0.3", "cordova-plugin-nativeaudio": "^3.0.9", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-statusbar": "^2.4.2", "cordova-plugin-whitelist": "^1.3.3", "cordova-sqlite-storage": "^6.0.0", "eslint": "^7.6.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jsdoc": "30.7.6", "eslint-plugin-prefer-arrow": "1.2.2", "jasmine-core": "~3.7.1", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.3.2", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "typescript": "~4.2.4" }, "engines":{ "npm":"9.4.0", "node":"16.13.2" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-splashscreen": {}, "cordova-plugin-statusbar": {}, "cordova-plugin-datepicker": {}, "cordova-plugin-whitelist": {}, "cordova-plugin-device": {}, "cordova-plugin-ionic-keyboard": {}, "cordova-plugin-media": {}, "cordova-plugin-file": {}, "cordova-plugin-file-transfer": {}, "com-badrit-base64": {}, "cordova-plugin-media-capture": {}, "cordova-plugin-android-permissions": {}, "cordova-sqlite-storage": {}, "cordova-plugin-nativeaudio": {}, "cordova-pdf-generator": {}, "cordova-plugin-camera": { "ANDROID_SUPPORT_V4_VERSION": "27.+" }, "cordova-plugin-email-composer": {}, "cordova-plugin-androidx-adapter": {}, "cordova-plugin-androidx": {}, "cordova-plugin-file-opener2": { "ANDROID_SUPPORT_V4_VERSION": "27.+" }, "cordova-plugin-ionic-webview": {}, "cordova-plugin-fcm-with-dependecy-updated": { "ANDROID_DEFAULT_NOTIFICATION_ICON": "#mipmap/ic_launcher", "ANDROID_FCM_VERSION": "21.0.0", "ANDROID_FIREBASE_BOM_VERSION": "26.0.0", "ANDROID_GOOGLE_SERVICES_VERSION": "4.3.4", "ANDROID_GRADLE_TOOLS_VERSION": "4.1.0" } }, "platforms": [ "ios", "browser", "android" ] } }
I did try to set aot=true in angular.json

Related

React native run time error, How to solve it?

I have reset the metro but the same problem is happening. How can I solve this problem? The same problem is happening when I changed the port. I was facing the same problem when I rebuilt the project.
{
"name": "meal",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.11",
"#react-native-firebase/app": "^12.4.0",
"#react-native-firebase/database": "^12.4.0",
"#react-native-firebase/firestore": "^12.4.0",
"#react-native-firebase/messaging": "^12.4.0",
"#react-native-firebase/storage": "^12.4.0",
"#react-native-picker/picker": "^1.16.3",
"#react-navigation/bottom-tabs": "^5.11.11",
"#react-navigation/drawer": "^5.12.5",
"#react-navigation/native": "^5.9.4",
"#react-navigation/stack": "^5.14.5",
"#reduxjs/toolkit": "^1.6.0",
"add": "^2.0.6",
"babel-preset-react-native": "^5.0.2",
"firebase-admin": "^9.11.0",
"lottie-react-native": "^4.0.2",
"moment": "^2.29.1",
"react": "17.0.1",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-is": "^17.0.2",
"react-native": "0.64.1",
"react-native-animated-loader": "^0.0.9",
"react-native-chart-kit": "^6.11.0",
"react-native-checkbox-selection": "^1.1.0",
"react-native-date-picker": "^3.3.2",
"react-native-dropdown-picker": "^5.1.21",
"react-native-elements": "^3.4.1",
"react-native-gesture-handler": "^1.10.3",
"react-native-image-picker": "^4.0.3",
"react-native-navigation-bar-color": "^2.0.1",
"react-native-picker-select": "^8.0.4",
"react-native-push-notification": "^7.4.0",
"react-native-reanimated": "^2.0.0",
"react-native-router-flux": "^3.45.0",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.3.0",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^12.1.1",
"react-native-vector-icons": "^8.1.0",
"react-redux": "^7.2.4",
"yarn": "^1.22.11"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/highlight": "^7.14.5",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "react-native"
}
}
Delete the node_modules and package-lock.json. Install everything fresh and it should work.

Cannot find module '#babel/plugin-proposal-decorators' from '/app'

My application perfectly running and building on localhost. But when it's building on Heroku, I'm getting the following error:
./src/index.js
Error: Cannot find module '#babel/plugin-proposal-decorators' from '/app'
at Array.map (<anonymous>)
That's my package.json:
{
"name": "agroproject-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"#ckeditor/ckeditor5-build-classic": "^12.0.0",
"#ckeditor/ckeditor5-react": "^1.1.1",
"#fortawesome/fontawesome-svg-core": "^1.2.8",
"#fortawesome/free-solid-svg-icons": "^5.5.0",
"#fortawesome/react-fontawesome": "^0.1.3",
"#pluralsight/ps-design-system-actionmenu": "^3.1.10",
"#pluralsight/ps-design-system-badge": "^2.1.12",
"#pluralsight/ps-design-system-button": "^10.8.15",
"#pluralsight/ps-design-system-card": "^8.5.8",
"#pluralsight/ps-design-system-dropdown": "^0.5.3",
"#pluralsight/ps-design-system-layout": "^3.0.2",
"#pluralsight/ps-design-system-normalize": "^3.0.45",
"#pluralsight/ps-design-system-row": "^2.6.25",
"#pluralsight/ps-design-system-textinput": "^0.5.6",
"#svgr/webpack": "2.4.1",
"#tinymce/tinymce-react": "^3.0.1",
"axios": "^0.18.0",
"babel-eslint": "9.0.0",
"babel-jest": "23.6.0",
"babel-loader": "8.0.4",
"babel-plugin-named-asset-import": "^0.2.2",
"babel-preset-react-app": "^5.0.4",
"bfj": "6.1.1",
"case-sensitive-paths-webpack-plugin": "2.1.2",
"chalk": "2.4.1",
"css-loader": "1.0.0",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
"eslint": "5.6.0",
"eslint-config-react-app": "^3.0.4",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-react": "7.11.1",
"file-loader": "2.0.0",
"fs-extra": "7.0.0",
"glamor": "^2.20.40",
"google-maps-react": "^2.0.2",
"html-webpack-plugin": "4.0.0-alpha.2",
"identity-obj-proxy": "3.0.0",
"jest": "23.6.0",
"jest-pnp-resolver": "1.0.1",
"jest-resolve": "23.6.0",
"jsonwebtoken": "^8.4.0",
"mini-css-extract-plugin": "0.4.3",
"node-sass": "^4.9.4",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.1.0",
"postcss-cssnext": "^3.1.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-import": "^12.0.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.0.6",
"postcss-safe-parser": "4.0.1",
"prop-types": "^15.6.2",
"react": "^16.5.2",
"react-app-polyfill": "^0.1.3",
"react-aux": "^1.1.0",
"react-dev-utils": "^6.0.5",
"react-dom": "^16.5.2",
"react-redux": "^6.0.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-table": "^6.8.6",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"resolve": "1.8.1",
"sass-loader": "7.1.0",
"style-loader": "0.23.0",
"terser-webpack-plugin": "1.1.0",
"url-loader": "1.1.1",
"webpack": "4.19.1",
"webpack-dev-server": "^3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.2"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx}"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"presets": [
"react-app"
]
},
"devDependencies": {
"#babel/core": "^7.4.3",
"#babel/plugin-proposal-class-properties": "^7.4.0",
"#babel/plugin-proposal-decorators": "^7.4.0",
"#babel/preset-env": "^7.1.6",
"redux-devtools": "^3.4.2",
"redux-devtools-extension": "^2.13.7",
"stylelint-config-airbnb": "0.0.0"
}
Any idea what could possibly is wrong with package.json?
You have included #babel/plugin-proposal-decorators in your devDependencies.
By default, Heroku installs your dependencies and devDependencies, builds your slug, and then strips out your devDependencies. This makes sense: in most cases devDependencies shouldn't be on production; that's for things like testing frameworks, editor plugins, etc. that you need in development but not in production.
I recommend moving this module to your dependencies, though an alternative solution would be to tell Heroku not to prune your devDependencies by setting NPM_CONFIG_PRODUCTION=false or YARN_PRODUCTION=false, depending on the tool you're using.
Both approaches will require a redeploy to take effect, and unless you have a clear reason to use devDependencies on Heroku I urge you to use the former.

How can I solve this error \%RESOURCE_DIR%\?

package.json Angular6:
{
"name": "adnanrealestate",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.3",
"#angular-mdc/web": "^0.36.3",
"#angular/animation": "^4.0.0-beta.8",
"#angular/animations": "^6.0.7",
"#angular/cdk": "github:angular/cdk-builds",
"#angular/common": "^6.0.7",
"#angular/compiler": "^6.0.7",
"#angular/core": "^6.0.7",
"#angular/forms": "^6.0.7",
"#angular/http": "^6.0.7",
"#angular/material": "github:angular/material2-builds",
"#angular/platform-browser": "^6.0.7",
"#angular/platform-browser-dynamic": "^6.0.7",
"#angular/platform-server": "^6.1.7",
"#angular/router": "^6.0.7",
"#google-cloud/firestore": "^0.16.1",
"#ng-bootstrap/ng-bootstrap": "^2.1.2",
"#ng-bootstrap/schematics": "^2.0.0-alpha.1",
"#ngrx/store": "^2.2.3",
"#ngui/map": "^0.30.3",
"#ngx-translate/core": "^10.0.2",
"#ngx-translate/http-loader": "^3.0.1",
"#types/googlemaps": "^3.30.10",
"angular-captcha": "^3.4.0",
"angular-file-upload": "^2.5.0",
"angular-file-uploader": "^4.1.1",
"angular-font-awesome": "^3.1.2",
"angularfire2": "^5.0.0-rc.12-next",
"bootstrap": "^4.1.1",
"core-js": "^2.5.4",
"file-saver": "^1.3.8",
"filepond": "^1.8.6",
"firebase": "^5.2.0",
"firebase-admin": "^5.12.1",
"firebase-functions": "^1.1.0",
"firestore": "^1.1.6",
"font-awesome": "^4.7.0",
"fs": "0.0.1-security",
"hammerjs": "^2.0.8",
"json2typescript": "^1.0.6",
"linq2fire": "^1.0.18",
"ng-bootstrap-form-validation": "^3.0.3",
"ng-recaptcha": "^4.0.0",
"ng-slideshow": "^0.8.2",
"ngx-bootstrap": "^3.0.1",
"ngx-gallery": "^5.6.2",
"ngx-international-phone-number": "^0.1.3",
"ngx-intl-tel-input": "^1.0.6",
"ngx-order-pipe": "^2.0.1",
"ngx-pagination": "^3.2.0",
"ngx-popover": "0.0.16",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.2.1",
"time-ago-pipe": "^1.3.2",
"uikit": "^3.0.0-rc.6",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.6.8",
"#angular/cli": "^6.2.1",
"#angular/compiler-cli": "^6.0.7",
"#angular/language-service": "^6.0.7",
"#types/hammerjs": "^2.0.35",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "^5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
package.json firebase-functions
{
"name": "functions",
"scripts": {
"lint": "tslint --project tsconfig.json",
"build": "tsc",
"serve": "npm run build && firebase serve --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"main": "lib/index.js",
"dependencies": {
"firebase-admin": "^6.0.0",
"firebase-functions": "^2.0.5"
},
"devDependencies": {
"tslint": "~5.8.0",
"typescript": "~2.8.3"
},
"private": true
}
\%RESOURCE_DIR%\ image
How can I fix this error?
and after a change to $ same error
I use npm install for angular 6 and for firebase functions, I didn't see any difference.
please help this is a bad error I don't know where is error specifically of version or other.
https://github.com/firebase/firebase-tools/issues/610
I solved this problem, It's very easy. You don't need to uninstall.
Step1: open firebase.json
you will show this JSON file
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
}
Step2: Delete "npm --prefix \"$RESOURCE_DIR\" run lint", and "npm --prefix \"$RESOURCE_DIR\" run build"
"functions": {
"predeploy": [
]
}
Step3: firebase deploy --only functions.
Step4: Like and share my solved.

Property '_isScalar' is missing in type 'TodoItemNode[]'

I am trying to use Mat-tree module in my angular application, but getting compile time error:
Argument of type '(node: TodoItemNode) => TodoItemNode[]' is not assignable to parameter of type '(node: TodoItemNode) => Observable'. Type 'TodoItemNode[]' is not assignable to type 'Observable'. Property '_isScalar' is missing in type 'TodoItemNode[]'
Here is the link from where I have referred or copied the code for demo UI:
Angular Material Official Mat-Tree Example Link
Here is the code where it throws an error:
Login Report Component:
constructor(
private database: ChecklistDatabase
) {
this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel,
this.isExpandable, this.getChildren); // This line
this.treeControl = new FlatTreeControl<TodoItemFlatNode>(this.getLevel, this.isExpandable);
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
database.dataChange.subscribe(data => {
this.dataSource.data = data;
});
}
Edit:
transformer = (node: TodoItemNode, level: number) => {
const existingNode = this.nestedNodeMap.get(node);
const flatNode = existingNode && existingNode.item === node.item
? existingNode
: new TodoItemFlatNode();
flatNode.item = node.item;
flatNode.level = level;
flatNode.expandable = !!node.children;
this.flatNodeMap.set(flatNode, node);
this.nestedNodeMap.set(node, flatNode);
return flatNode;
}
And
getLevel = (node: TodoItemFlatNode) => node.level;
isExpandable = (node: TodoItemFlatNode) => node.expandable;
getChildren = (node: TodoItemNode): TodoItemNode[] => node.children;
MatTreeFlattener Constructor:
constructor(transformFunction: (node: T, level: number) => F, getLevel: (node: F) => number, isExpandable: (node: F) => boolean, getChildren: (node: T) => Observable<T[]>);
Package.Json
{
"name": "kalpavriksha-angular-v4",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.1",
"#agm/snazzy-info-window": "^1.0.0-beta.1",
"#angular/animations": "^5.0.0",
"#angular/cdk": "^6.0.0-beta.4",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/core": "^5.0.0",
"#angular/forms": "^5.0.0",
"#angular/http": "^5.0.0",
"#angular/material": "^6.0.0-beta.4",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/platform-server": "^5.0.0",
"#angular/router": "^5.0.0",
"#swimlane/ngx-charts": "^6.1.0",
"#types/filesaver": "0.0.30",
"angular-chat": "^1.0.9",
"angular-datatables": "^4.2.0",
"angular-file-picker": "^1.2.0",
"angular-file-saver": "^1.1.3",
"angular-material": "^1.1.5",
"angularfire2": "5.0.0-rc.3",
"angularjs-bootstrap-datetimepicker": "^1.1.4",
"chart.js": "^2.7.2",
"chart.piecelabel.js": "^0.11.0",
"cloudboost": "^2.0.264",
"core-js": "^2.4.1",
"d3": "^4.11.0",
"datatables.net": "^1.10.16",
"datatables.net-buttons": "^1.4.2",
"datatables.net-buttons-dt": "^1.4.2",
"datatables.net-dt": "^1.10.16",
"datatables.net-select": "^1.2.3",
"datatables.net-select-dt": "^1.2.3",
"file-saver": "^1.3.3",
"firebase": "4.6.0",
"hammerjs": "^2.0.8",
"material-design-icons": "^3.0.1",
"md-date-picker": "^0.1.0",
"ng-chat": "^1.0.12",
"ng-snotify": "^4.0.0",
"ng2-charts": "^1.6.0",
"ng2-search-filter": "^0.3.1",
"ng4-loading-spinner": "^1.0.27",
"ngx-cookie-service": "^1.0.9",
"ngx-inactivity": "^1.0.1",
"ngx-loading": "^1.0.7",
"ngx-pagination": "^3.1.0",
"ngx-progress-bar": "0.0.10",
"rxjs": "^5.5.11",
"snazzy-info-window": "^1.1.0",
"time-ago-pipe": "^1.3.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "^1.4.1",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^4.0.0",
"#types/datatables.net": "^1.10.6",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/jquery": "^3.2.12",
"#types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"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": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "2.4.2"
}
}
I was also getting the same Error for MAT-TREE
Solved by updating the Angular Material # package.json and Delete the Node Modules and npm install.
From "#angular/material": "^6.2.0" to=> "#angular/material": "^6.4.2"

Angular 2: Visual Code Studio Terminal Not Loading Automatically

When you have changes and you save it, terminal loads and says
webpack: Compiled successfully.
But lately in my VSC, it doesn't load automatically anymore. I still have to Command C and ng serve a project again and again to see changes on the localhost
package.json
{
"name": "gms",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"sw": "sw-precache --root=dist --config=sw-precache-config.js",
"static-serve": "cd dist && live-server --port=4200 --host=localhost --entry-file=/index.html"
},
"private": true,
"dependencies": {
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/router": "^4.0.0",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"ng2-validation": "^4.2.0",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.0.0",
"#angular/compiler-cli": "^4.0.0",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"sw-precache": "^5.1.1",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}
}

Resources