Following is my package.json:
"dependencies": {
"#angular/animations": "^5.2.0",
"#angular/cdk": "^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/material": "^5.2.0",
"#material/form-field": "^0.39.1",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"angular4-fusioncharts": "^1.0.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"material-design-icons": "^3.0.1",
"fusioncharts": "^3.12.2",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
}
And I have tried to implement it as:
<mat-icon>date_range</mat-icon>
The icons are missing.
Please help.
Perhaps you missed font import in index.html file:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
I removed "material-design-icons": "^3.0.1" from my dependencies and cleared material icons form my angular.json styles:[] section, and import sections of my styles.css. The only thing required is the index.html head to correctly use the material.io names, before this some of the icons worked but others like dark_mode did not work
In index.html import using all types (outline, two+Tone,,) - required if you want to use more than just the standard set
<head>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet">
</head>
Related
Recently I update my project from ng 13 to ng 14.
What I execute ng build --configuration production, CLI creates some compiled and minimized js files.
One of the minimized files was scripts.js.
When I deploy it in IIS it is crushed and not displayed on the browser.
One of the errors in the console was :
Unexpected token
The project was not compiled well and I saw that when I execute ng build without --production, the js if different and OK.
Does anyone face this issue?
package.json
{
"name": "knesset-website-app",
"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": {
"#angular/animations": "^14.0.6",
"#angular/cdk": "^14.1.0",
"#angular/cli": "^14.0.6",
"#angular/common": "^14.0.6",
"#angular/compiler": "^14.0.6",
"#angular/core": "^14.0.6",
"#angular/forms": "^14.0.6",
"#angular/localize": "^14.0.6",
"#angular/platform-browser": "^14.0.6",
"#angular/platform-browser-dynamic": "^14.0.6",
"#angular/router": "^14.0.6",
"#ngx-translate/core": "^14.0.0",
"#ngx-translate/http-loader": "^7.0.0",
"#progress/kendo-angular-buttons": "^8.0.0",
"#progress/kendo-angular-common": "^3.1.0",
"#progress/kendo-angular-dateinputs": "^7.0.1",
"#progress/kendo-angular-dialog": "^7.1.2",
"#progress/kendo-angular-dropdowns": "^7.0.2",
"#progress/kendo-angular-excel-export": "^5.0.1",
"#progress/kendo-angular-grid": "^7.2.2",
"#progress/kendo-angular-icons": "^2.0.1",
"#progress/kendo-angular-inputs": "^9.0.3",
"#progress/kendo-angular-intl": "^4.1.0",
"#progress/kendo-angular-l10n": "^4.0.0",
"#progress/kendo-angular-label": "^4.0.0",
"#progress/kendo-angular-layout": "^7.1.0",
"#progress/kendo-angular-pager": "^4.0.1",
"#progress/kendo-angular-pdf-export": "^4.0.0",
"#progress/kendo-angular-popup": "^5.0.0",
"#progress/kendo-angular-progressbar": "^3.0.0",
"#progress/kendo-angular-tooltip": "^4.0.1",
"#progress/kendo-angular-treeview": "^7.1.0",
"#progress/kendo-data-query": "^1.6.0",
"#progress/kendo-drawing": "^1.16.3",
"#progress/kendo-licensing": "^1.2.2",
"#progress/kendo-svg-icons": "^0.2.0",
"#progress/kendo-theme-default": "latest",
"#types/jquery": "^3.5.5",
"#videogular/ngx-videogular": "^5.0.1",
"bootstrap": "^4.6.0",
"bootstrap-v4-rtl": "^4.6.0-2",
"core-js": "^2.5.4",
"dashjs": "^4.3.0",
"font-awesome": "^4.7.0",
"hls.js": "^1.1.5",
"jquery": "^3.6.0",
"ng-recaptcha": "^10.0.0",
"ngx-device-detector": "^2.1.1",
"popper.js": "^1.12.3",
"primeicons": "^4.1.0",
"primeng": "^10.0.3",
"rxjs": "~6.6.6",
"scriptjs": "^2.5.9",
"tslib": "^2.4.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^14.0.6",
"#angular/compiler-cli": "^14.0.6",
"#angular/language-service": "^14.0.6",
"#types/core-js": "^2.5.5",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^0.0.28",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "^6.3.17",
"karma-chrome-launcher": "~3.1.0",
"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": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "~4.6.3"
}
}
Here's the package.json file:
{
"dependencies": {
"#angular/animations": "^9.1.3",
"#angular/cdk": "^9.1.3",
"#angular/common": "^9.1.3",
"#angular/compiler": "^9.1.3",
"#angular/core": "^9.1.3",
"#angular/forms": "^9.1.3",
"#angular/http": "^9.1.3",
"#angular/localize": "^9.1.3",
"#angular/platform-browser": "^9.1.3",
"#angular/platform-browser-dynamic": "^9.1.3",
"#angular/platform-server": "^9.1.3",
"#angular/router": "^9.1.3",
"#angular/service-worker": "^9.1.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.901.3",
"#angular/cli": "^9.1.3",
"#angular/compiler-cli": "^9.1.3",
"#angular/language-service": "^9.1.3"
}
}
I tried using node v12 and v14 but I got the same error while running npm start
ERROR in ./node_modules/#angular/common/fesm2015/common.js 3761:14-27
"export 'ɵRuntimeError' was not found in '#angular/core'
ERROR in ./node_modules/#angular/common/fesm2015/common.js 4210:12-27
"export 'ɵisSubscribable' was not found in '#angular/core'
I am trying to use the template reference variable in my angular app in my vscode it gives me an error like Property 'button' has no initializer and is not definitely assigned in the constructor.
how can I use it? I try something like this:-
#ViewChild('button', { static: true }) button: ElementRef;
package.json
"dependencies": {
"#angular/animations": "~11.0.6",
"#angular/common": "~11.0.6",
"#angular/compiler": "~11.0.6",
"#angular/core": "~11.0.6",
"#angular/forms": "~11.0.6",
"#angular/platform-browser": "~11.0.6",
"#angular/platform-browser-dynamic": "~11.0.6",
"#angular/router": "~11.0.6",
"jspdf": "^2.2.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1100.6",
"#angular/cli": "~11.0.6",
"#angular/compiler-cli": "~11.0.6",
"#types/jasmine": "~3.6.0",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.1.0",
"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.0.2"
I'm running an Angular 7 application and I'm trying to run it in IE11 and its showing me this error:
"SCRIPT1002: Syntax error " "vendor.js"
and the web page shows as a blank page.
In other browsers its working fine.
I have tried with uncomment polyfills and also tried with adding below line in index.html file
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
Below is my package.json file :
{
"name": "eyerne-frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node --max_old_space_size=5045 node_modules/#angular/cli/bin/ng serve --aot",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.6",
"#alyle/ui": "^2.7.6",
"#angular/animations": "^7.2.15",
"#angular/cdk": "^7.3.7",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/forms": "~7.2.0",
"#angular/material": "^7.3.7",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"#ng-bootstrap/ng-bootstrap": "^4.1.3",
"#ngx-translate/core": "^11.0.1",
"#ngx-translate/http-loader": "^4.0.0",
"amazing-time-picker": "^1.8.0",
"angular-datatables": "^8.0.0",
"angular-gridster2": "^8.2.0",
"angular-resizable-element": "^3.2.4",
"angular2-resizing-cropping-image": "^1.0.2",
"angular2-toaster": "^7.0.0",
"bootstrap": "^4.3.1",
"chroma-js": "^2.0.6",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.7",
"datatables": "^1.10.18",
"datatables.net": "^1.10.19",
"datatables.net-dt": "^1.10.19",
"echarts": "^4.2.1",
"exif-js": "^2.3.0",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-rc.4",
"jquery": "^3.4.1",
"merge-images": "^1.1.0",
"moment": "^2.24.0",
"ng-http-loader": "^5.1.0",
"ng2-validation": "^4.2.0",
"ng5-slider": "^1.2.4",
"ngx-bootstrap": "^4.3.0",
"ngx-chips": "^2.0.0-beta.0",
"ngx-color-picker": "^8.1.0",
"ngx-cookie-service": "^2.2.0",
"ngx-echarts": "^4.2.1",
"ngx-google-places-autocomplete": "^2.0.4",
"ngx-slick-carousel": "^0.4.4",
"ngx-webcam": "^0.2.6",
"ngx-xml2json": "^1.0.2",
"recordrtc": "^5.5.8",
"rxjs": "^6.3.3",
"slick-carousel": "^1.8.1",
"socket.io-client": "^2.3.0",
"ts-ebml": "^2.0.2",
"tslib": "^1.9.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.13.0",
"#angular/cli": "~7.3.0",
"#angular/compiler-cli": "~7.2.0",
"#angular/language-service": "~7.2.0",
"#types/datatables.net": "^1.10.17",
"#types/echarts": "^4.1.9",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/jquery": "^3.3.30",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.3.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",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "^5.11.0",
"typescript": "~3.2.2"
}
}
What am I doing wrong? Please let me know if you can help me with this.
Node version 6.8.1 and Npm version 3.10.8. Angular CLI version: 6.8.1. Trying to upgrade my angular 4 to angular 5. I am not able to upgrade to Angular 5 always get the below UNMET PEER DEPENDENCY while installing the angular packages.
+-- UNMET PEER DEPENDENCY #angular/cdk#2.0.0-beta.12
+-- UNMET PEER DEPENDENCY #angular/common#5.2.9
+-- UNMET PEER DEPENDENCY #angular/compiler#5.2.9
+-- UNMET PEER DEPENDENCY #angular/core#5.2.9
package.json
"dependencies": {
"#angular/animations": "^5.2.9",
"#angular/cdk": "2.0.0-beta.12",
"#angular/common": "^5.2.9",
"#angular/compiler": "^5.2.9",
"#angular/core": "^5.2.9",
"#angular/flex-layout": "2.0.0-beta.9",
"#angular/forms": "^5.2.9",
"#angular/http": "^5.2.9",
"#angular/material": "2.0.0-beta.12",
"#angular/platform-browser": "^5.2.9",
"#angular/platform-browser-dynamic": "^5.2.9",
"#angular/router": "^5.2.9",
"#swimlane/ngx-charts": "^6.0.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"d3": "^4.8.0",
"hammerjs": "^2.0.8",
"ng2-dragula": "^1.5.0",
"rxjs": "^5.1.0",
"ts-md5": "^1.2.0",
"web-animations-js": "^2.2.5",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "^1.7.1",
"#angular/compiler-cli": "^5.2.9",
"#angular/language-service": "^5.2.9",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#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",
"semver": "^5.3.0",
"ts-node": "~3.0.4",
"tslint": "~5.7.0",
"typescript": "^2.4.2"
}
Update Package.json file for dependencies/devDependencies
"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",
"core-js": "^2.4.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.5.0",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^5.0.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"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.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2",
}
Run NPM Install
npm install
First off all, where is an error in console?
Second, you need change versions for #angular/material and #angular/cdk,
just:
npm install --save #angular/material#latest #angular/cdk#latest
or
npm install --save #angular/material#5.2 #angular/cdk#5.2