I have created application in angular 7 with PWA support. In which, I have created new update popup with swUpdate. Earlier its working proper and show me new update popup once I have upload new build on server. But, its not working.
Here in my code.
constructor() {
this.swUpdate.available.subscribe(event => {
console.log(event);
this.promptUser();
});
if (this.swUpdate.isEnabled) {
interval(2 * 60 * 60).subscribe(() => this.swUpdate.checkForUpdate()
.then(() => console.log('checking for updates')));
}
}
promptUser() {
this.swUpdate.activateUpdate().then(() => {
location.reload();
});
}
Here is my package.json file
{
"name": "app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod --configuration=dev",
"build:dev": "ng build --prod --configuration=dev",
"build:staging": "ng build --prod --configuration=staging",
"build:prod": "ng build --prod --configuration=production",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^7.2.9",
"#angular/cdk": "^7.3.1",
"#angular/common": "^7.2.3",
"#angular/compiler": "^7.2.3",
"#angular/core": "^7.2.3",
"#angular/fire": "^5.1.1",
"#angular/flex-layout": "^7.0.0-beta.24",
"#angular/forms": "^7.2.3",
"#angular/http": "^7.2.3",
"#angular/material": "^7.3.1",
"#angular/platform-browser": "^7.2.3",
"#angular/platform-browser-dynamic": "^7.2.3",
"#angular/pwa": "^0.10.7",
"#angular/router": "^7.2.3",
"#angular/service-worker": "^7.2.3",
"#ng-bootstrap/ng-bootstrap": "^4.0.2",
"angular-font-awesome": "^3.1.2",
"angular-moment-timezone": "^1.7.1",
"angular2-cookie": "^1.2.6",
"angular2-cookie-law": "^6.2.0",
"angular2-toaster": "^7.0.0",
"angular7-data-table": "^1.0.13",
"bootstrap": "^4.2.1",
"core-js": "^2.6.3",
"exceljs": "^2.0.1",
"file-saver": "^2.0.2",
"firebase": "^5.8.3",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"jw-angular-social-buttons": "^1.0.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.23",
"ng-connection-service": "^1.0.4",
"ng-http-loader": "^3.2.0",
"ng-recaptcha": "^4.2.1",
"ng2-validation": "^4.2.0",
"ng6-toastr-notifications": "^1.0.4",
"ngx-cookie-service": "^2.1.0",
"ngx-infinite-scroll": "^6.0.1",
"ngx-slick": "^0.2.1",
"ngx-slick-carousel": "^0.4.4",
"node-sass": "^4.13.0",
"rxjs": "^6.4.0",
"rxjs-compat": "^6.4.0",
"slick-carousel": "^1.8.1",
"stylelint": "^9.10.1",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.10.7",
"#angular/cli": "^7.3.0",
"#angular/compiler-cli": "^7.2.3",
"#angular/language-service": "^7.2.3",
"#types/jasmine": "^2.8.16",
"#types/jasminewd2": "^2.0.6",
"#types/moment": "^2.13.0",
"#types/node": "^12.0.2",
"codelyzer": "~4.2.1",
"husky": "^1.3.1",
"jasmine-core": "~2.99.1",
"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.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~3.1.6"
},
"browser": {
"fs": false,
"path": false,
"os": false,
"crypto": false,
"stream": false,
"http": false,
"tls": false,
"zlib": false,
"https": false,
"net": false
}
}
Please let me know if any have have any suggestions on this. Its really needs.
Related
I was trying to install Angular Material. Then, I got this error. I deleted the node modules and I wrote npm i again. However, it's not working. How can I fix it?
When I want to run app using ng serve, I got this error:
./node_modules/ngx-print/fesm2020/ngx-print.mjs - Error: Module build failed (from ./node_modules/#angular-devkit/build-angular/src/babel/webpack-loader.js):
93 static ɵdir: i0.ɵɵDirectiveDeclaration<NgxPrintDirective, "button[ngxPrint]", never, { "previewOnly": "previewOnly"; "printSectionId": "printSectionId"; "printTitle": "printTitle"; "useExistingCss": "useExistingCss"; "printDelay": "printDelay"; "printStyle": "printStyle"; "styleSheetFile": "styleSheetFile"; }, {}, never, never, false, never>;
package.json:
{
"name": "cuba",
"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.1.0",
"#angular/animations": "~13.0.3",
"#angular/cdk": "^11.0.1",
"#angular/common": "~13.0.3",
"#angular/compiler": "~13.0.3",
"#angular/core": "~13.0.3",
"#angular/fire": "^5.4.2",
"#angular/forms": "~13.0.3",
"#angular/localize": "~13.0.3",
"#angular/platform-browser": "~13.0.3",
"#angular/platform-browser-dynamic": "~13.0.3",
"#angular/router": "~13.0.3",
"#angular/service-worker": "~13.0.3",
"#asymmetrik/ngx-leaflet": "^7.0.0",
"#auth0/angular-jwt": "^5.1.0",
"#ckeditor/ckeditor5-angular": "^1.2.3",
"#ckeditor/ckeditor5-build-classic": "^20.0.0",
"#ckeditor/ckeditor5-build-inline": "^20.0.0",
"#ctrl/ngx-emoji-mart": "^3.1.0",
"#kolkov/angular-editor": "^1.1.2",
"#ks89/angular-modal-gallery": "^7.2.5",
"#ng-bootstrap/ng-bootstrap": "^6.1.0",
"#ng-select/ng-select": "^4.0.0",
"#ngx-loading-bar/core": "^5.1.0",
"#ngx-loading-bar/http-client": "^5.1.0",
"#ngx-loading-bar/router": "^5.1.0",
"#ngx-translate/core": "^13.0.0",
"#ngx-translate/http-loader": "^6.0.0",
"#sweetalert2/ngx-sweetalert2": "^8.1.1",
"#swimlane/ngx-charts": "^14.0.0",
"#swimlane/ngx-datatable": "^17.1.0",
"angular-archwizard": "^6.1.0",
"angular-calendar": "^0.28.16",
"angular-count-to": "0.0.3",
"angular-tree-component": "^8.5.6",
"angular2_photoswipe": "^8.0.1",
"angular2-knob": "^1.1.15",
"angular2-multiselect-dropdown": "^4.6.3",
"angularx-flatpickr": "^6.3.1",
"animate.css": "^4.1.0",
"apexcharts": "^3.19.3",
"bootstrap": "^4.5.2",
"canvasjs": "^1.8.3",
"chart.js": "^2.9.3",
"chartist": "^0.11.4",
"crypto": "^1.0.1",
"crypto-js": "^4.1.1",
"date-fns": "^2.14.0",
"feather-icons": "^4.26.0",
"file-saver": "^2.0.5",
"firebase": "^7.15.5",
"flatpickr": "^4.6.3",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"knob": "^1.1.0",
"leaflet": "^1.6.0",
"mousetrap": "^1.6.5",
"ng-apexcharts": "^1.3.0",
"ng-chartist": "^4.1.0",
"ng-pick-datetime": "^7.0.0",
"ng2-charts": "^2.3.2",
"ng2-dragula": "^2.1.1",
"ng2-google-charts": "^6.0.0",
"ng2-search-filter": "^0.5.1",
"ng5-slider": "^1.2.4",
"ngx-ckeditor": "^8.0.0",
"ngx-cookie-service": "^3.0.3",
"ngx-crystal-gallery": "^1.1.5",
"ngx-datatable": "^1.0.3",
"ngx-dropzone": "^2.5.0",
"ngx-dropzone-wrapper": "^9.0.0",
"ngx-editor": "^5.0.0-alpha.9",
"ngx-image-cropper": "^3.1.9",
"ngx-joyride": "^2.2.11",
"ngx-masonry": "^10.0.0",
"ngx-masonry-gallery": "^3.0.0",
"ngx-owl-carousel-o": "^3.0.1",
"ngx-perfect-scrollbar": "^9.0.0",
"ngx-print": "^1.2.0-beta.5",
"ngx-router-animations": "0.0.9",
"ngx-toastr": "^12.1.0",
"photoswipe": "^4.1.3",
"rxjs": "~6.5.5",
"sweetalert2": "^9.14.4",
"tslib": "^2.0.0",
"xlsx": "^0.18.5",
"xlsx-style": "^0.8.13",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~13.0.4",
"#angular/cli": "~13.0.4",
"#angular/compiler-cli": "~13.0.3",
"#angular/language-service": "~13.0.3",
"#schematics/angular": "^14.2.1",
"#types/chartist": "^0.9.48",
"#types/crypto-js": "^4.1.1",
"#types/feather-icons": "^4.7.0",
"#types/hammerjs": "^2.0.36",
"#types/jasmine": "~3.5.11",
"#types/jasminewd2": "~2.0.3",
"#types/leaflet": "^1.5.13",
"#types/mousetrap": "^1.6.3",
"#types/node": "^14.18.34",
"codelyzer": "^5.2.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.10.2",
"tslint": "~6.1.0",
"typescript": "~4.4.4"
}
}
if Angular version is from 7.0.0 - 14.1.0
use command npm i ngx-print#1.2.1
if Angular version is >14
use command npm install ngx-print
it works fine for me
We have below dependency error in security scan. these are giving vulnearability issue
qs
load-utils
but these dependencies are not in package.json. I have read in google that it can be indirect dependency.
How to check indirect dependency. is there any way to check.
below is my package.json
{
"name": "infy-02",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node app.js",
"build": "ng build --base-href /finnacle-payment/ ",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.14",
"#angular/cdk": "~8.2.3",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"#fortawesome/angular-fontawesome": "^0.5.0",
"#fortawesome/fontawesome-svg-core": "^1.2.26",
"#fortawesome/free-solid-svg-icons": "^5.12.0",
"#grapecity/wijmo.all": "5.20203.748",
"#grapecity/wijmo.angular2.all": "5.20203.748",
"ansi-html": "0.0.9",
"body-parser": "^1.19.0",
"bootstrap": "^4.5.3",
"classlist.js": "^1.1.20150312",
"cookie-parser": "^1.4.4",
"dd-trace": "2.5.0",
"engine.io": "4.1.2",
"express": "^4.17.1",
"express-session": "^1.17.0",
"hammerjs": "^2.0.8",
"helmet": "^3.21.2",
"ini": "1.3.6",
"jquery": "3.5.1",
"jsonwebtoken": "^8.5.1",
"knex": "^0.20.11",
"minimatch": "3.0.6",
"morgan": "^1.9.1",
"node-forge": "1.0.0",
"passport": "^0.4.1",
"passport-github": "^1.1.0",
"passport-github2": "^0.1.12",
"passport-oauth2": "^1.5.0",
"passport-openidconnect": "0.0.2",
"rxjs": "~6.4.0",
"socket.io-parser": "3.3.2",
"tslib": "^1.10.0",
"wijmo": "5.20203.748",
"winston": "^3.2.1",
"xmlhttprequest-ssl": "1.6.3",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.19",
"#angular/cli": "~8.3.19",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#types/node": "~8.9.4",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.1.1",
"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"
}
}
I have tried to search in google but not able to understand on which dependency qs or load-utils are dependent. could you please help on the same.
You can ask npm to explain why a package is needed, directly or indirectly:
$ npm explain qs
If it is an indirect dependency, there is not much you can do about that. You have to wait for the other packages to update their dependencies.
You can however update your own dependencies. This will also update indirect dependencies. For example, Angular is already at version 14 and you are still using Angular 8.
I'm trying to create an Angular 8 project, but I always end up having an error when I try to compile the resulting app due to a wrong path in my node_modules folder; specifically in the file located at #angular/cli/commands/add-impl.d.ts, which contains this:
import { Arguments } from '../models/interface';
import { SchematicCommand } from '../models/schematic-command';
import { Schema as AddCommandSchema } from './add';
export declare class AddCommand extends SchematicCommand<AddCommandSchema> {
readonly allowPrivateSchematics = true;
readonly allowAdditionalArgs = true;
readonly packageManager: import("../../../../dist-schema/packages/angular/cli/lib/config/schema").PackageManager;
run(options: AddCommandSchema & Arguments): Promise<number | void>;
reportAnalytics(paths: string[], options: AddCommandSchema & Arguments, dimensions?: (boolean | number | string)[], metrics?: (boolean | number | string)[]): Promise<void>;
private isPackageInstalled;
private executeSchematic;
private findProjectVersion;
private hasMismatchedPeer;
}
The line reading readonly packageManager: import("../../../../dist-schema/packages/angular/cli/lib/config/schema").PackageManager; always gives an error since the specified path can't find the file its pointing to; I checked and I actually don't see any folder called dist-schema/packages, and I don't know what its purpose is; if I change the route to: #/angular/cli/lib/config/schema the error goes away and everything works fine, but if generate the node_modules folder again, the error comes back since the route is again specified as before.
I haven't been able to find much information regarding this, and nothing at all that points me to a solution; I've tried upgrading my Angular version to the latest 8.x.x version, deleting my package-lock.json file, deleting node_modules and installing again and none seem to work.
This is my package.json file:
{
"name": "opti-frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"watch": "gulp watch",
"dev": "gulp development",
"prod": "gulp production",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.2.13",
"#angular/cdk": "^8.2.3",
"#angular/common": "~8.0.1",
"#angular/compiler": "~8.0.1",
"#angular/core": "~8.0.1",
"#angular/forms": "~8.0.1",
"#angular/google-maps": "^9.0.0-rc.0",
"#angular/material": "^8.2.3",
"#angular/platform-browser": "~8.0.1",
"#angular/platform-browser-dynamic": "~8.0.1",
"#angular/router": "~8.0.1",
"#ckeditor/ckeditor5-angular": "^1.1.2",
"#gvreddy04/ckeditor5-build-classic-all-features": "^16.11.0",
"#mdi/font": "^3.9.97",
"#ngu/carousel": "^1.5.5",
"#swimlane/ngx-charts": "^13.0.2",
"#swimlane/ngx-datatable": "^15.0.2",
"#types/googlemaps": "^3.39.2",
"#types/html2canvas": "0.0.35",
"#types/jspdf": "^1.3.2",
"angular-fusioncharts": "^3.0.3",
"bootstrap": "^4.3.1",
"file-saver": "^2.0.2",
"fusioncharts": "^3.14.1",
"google-libphonenumber": "^3.2.6",
"gulp": "^4.0.2",
"gulp-replace": "^1.0.0",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-rc.1",
"html2pdf.js": "^0.9.1",
"intl-tel-input": "^14.1.0",
"jquery": "^3.5.1",
"jspdf": "^1.5.3",
"material-design-icons": "^3.0.1",
"ng-recaptcha": "^5.0.0",
"ng2-pdf-viewer": "^6.1.2",
"ng2-table": "^1.3.2",
"ngx-bootstrap": "^5.2.0",
"ngx-chips": "^2.1.0",
"ngx-color-picker": "^8.2.0",
"ngx-gauge": "^1.0.0-beta.11",
"ngx-highlightjs": "^4.0.0",
"ngx-hotjar": "^8.0.2",
"ngx-image-cropper": "^3.2.1",
"ngx-intl-tel-input": "^2.3.1",
"ngx-mat-select-search": "^2.0.0",
"popper.js": "^1.16.0",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.8",
"#angular/cli": "^8.3.18",
"#angular/compiler-cli": "~8.0.1",
"#angular/language-service": "~8.0.1",
"#types/jasmine": "^3.4.6",
"#types/jasminewd2": "^2.0.8",
"#types/node": "~8.9.4",
"codelyzer": "^5.2.0",
"dotenv": "^8.2.0",
"gulp-file": "^0.4.0",
"gulp-rename": "^1.4.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.1.0",
"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.4.5"
}
}
I have an Angular app based on Angular7 and there has been a very strange issue I am getting in the code.
When I load the same page multiple times then the app starts responding extremely slow and I am even unable to type in the form after repeated loading of same page.
This is not specific to only one page rather all the pages makes the app slow after repeated use of multiple pages.
Now, the concern is how to detect which code is creating this issue?
I tried to update the Angular packages but nothing helps.
Here is the package.json
{
"name": "apex",
"version": "6.0.0",
"license": "",
"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.5",
"#angular/animations": "7.0.1",
"#angular/common": "7.0.1",
"#angular/compiler": "7.0.1",
"#angular/core": "7.0.1",
"#angular/forms": "7.0.1",
"#angular/http": "7.0.1",
"#angular/platform-browser": "7.0.1",
"#angular/platform-browser-dynamic": "7.0.1",
"#angular/platform-server": "7.0.1",
"#angular/router": "7.0.1",
"#ng-bootstrap/ng-bootstrap": "4.1.3",
"#ng-select/ng-select": "^2.16.2",
"#ngx-translate/core": "10.0.2",
"#swimlane/ngx-datatable": "^14.0.0",
"#types/jquery": "3.3.21",
"bootstrap": "4.0.0",
"bourbon": "5.0.0",
"classlist.js": "1.1.20150312",
"core-js": "2.5.3",
"file-droppa": "^1.8.0",
"intl": "1.2.5",
"jquery": "3.3.1",
"ng2-validation": "^4.2.0",
"ngx-bootstrap": "^4.0.1",
"ngx-chips": "^2.0.0-beta.0",
"ngx-toastr": "^9.1.2",
"ngx-ui-switch": "7.0.1",
"node-sass": "4.7.2",
"primeicons": "^1.0.0",
"primeng": "^7.1.2",
"resize-observer-polyfill": "1.4.2",
"rxjs": "6.3.3",
"screenfull": "3.3.1",
"web-animations-js": "2.2.5",
"zone.js": "0.8.26"
},
"devDependencies": {
"#angular/cli": "7.0.3",
"#angular/compiler-cli": "7.0.1",
"#angular/language-service": "7.0.1",
"#types/jasmine": "2.8.6",
"#types/node": "9.4.7",
"codelyzer": "4.2.1",
"jasmine-core": "3.1.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.4.2",
"karma-jasmine": "1.1.1",
"karma-jasmine-html-reporter": "1.0.0",
"protractor": "5.3.0",
"rxjs-compat": "6.2.0",
"ts-node": "5.0.1",
"tslint": "5.7.0",
"typescript": "3.1.3",
"#angular-devkit/build-angular": "~0.6.8"
}
}
The question is too generic, you need to debug your code and see if you have any synchronic requests that might get stuck.
I really don't know why but when I upgraded from Angular 4 => 5, ng serve doesn't seem to be working and is throwing an error:
ERROR in _this.host.getOutputName is not a function
webpack: Failed to compile.
This is what my package looks like:
{
"name": "website",
"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": {
"#angular/animations": "^5.0.0",
"#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/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/router": "^5.0.0",
"#ng-bootstrap/ng-bootstrap": "^1.0.0",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"ngx-textarea-autosize": "^1.1.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.2.0",
"#angular/compiler-cli": "^4.0.0",
"#angular/language-service": "^4.0.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/jquery": "^3.2.16",
"#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.3.3"
}
}
It's known issue https://github.com/angular/angular/issues/21621
Consider installing the same versions of angular dependencies:
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
but then in your devDependencies I see
"#angular/compiler-cli": "^4.0.0",
"#angular/language-service": "^4.0.0",
try setting
"#angular/compiler-cli": "^5.0.0"
in your devDependencies