Datepicker Material Design Angular 5 - opens empty windows - material-design

See the behavior -
https://drive.google.com/file/d/1NG-CdTq3EgjDX8kc8VOSkPimYOzjdFSA/view
When I resize the browser it shows the content of mat-calendar, but initialy it is blank.
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
MatDatepickerModule and MatNativeDateModule imported..
Package.json dependencies
"private": true,
"dependencies": {
"#angular/animations": "^6.0.7",
"#angular/cdk": "^5.2.5",
"#angular/common": "6.0.7",
"#angular/compiler": "6.0.7",
"#angular/core": "6.0.7",
"#angular/flex-layout": "^6.0.0-beta.16",
"#angular/forms": "6.0.7",
"#angular/http": "6.0.7",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "6.0.7",
"#angular/platform-browser-dynamic": "6.0.7",
"#angular/router": "6.0.7",
"angular-bootstrap-md": "^6.0.1",
"angularfire2": "^5.0.0-rc.6",
"bootstrap": "^4.1.1",
"chart.js": "^2.5.0",
"core-js": "^2.4.1",
"firebase": "4.12.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"ng4-geoautocomplete": "^0.1.0",
"ngx-toastr": "^8.8.0",
"promise-polyfill": "7.1.2",
"rxjs": "^6.2.1",
"rxjs-compat": "^6.2.1",
"rxjs-tslint": "^0.1.5",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "^6.0.8",
"#angular/compiler-cli": "6.0.7",
"#angular/language-service": "6.0.7",
"#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-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.7.2",
"#angular-devkit/build-angular": "~0.6.8"
}
}
Why isn't it working?
What should I change adjust?
I am also working with MDBootsrap, can it be the problem?
Update
Updated a bit the package.json
It was a bit of a straggle to make things work again so use with cautious.
{
"name": "kai.starter",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve ",
"start-prod": "ng serve --aot --prod --configuration production",
"build": "ng build --aot --prod --configuration production",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.0.7",
"#angular/cdk": "^5.2.5",
"#angular/common": "6.0.7",
"#angular/compiler": "6.0.7",
"#angular/core": "6.0.7",
"#angular/flex-layout": "^6.0.0-beta.16",
"#angular/forms": "6.0.7",
"#angular/http": "6.0.7",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "6.0.7",
"#angular/platform-browser-dynamic": "6.0.7",
"#angular/router": "6.0.7",
"#ng-bootstrap/ng-bootstrap": "^3.0.0",
"#ngrx/store": "^6.0.1",
"#ngrx/store-devtools": "^6.0.1",
"angularfire2": "^5.0.0-rc.7",
"bootstrap": "^4.1.1",
"chart.js": "^2.5.0",
"core-js": "^2.4.1",
"firebase": "4.12.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"ng-bootstrap": "^1.6.3",
"ng4-geoautocomplete": "^0.1.0",
"ngx-geoautocomplete": "^0.1.1",
"ngx-toastr": "^8.8.0",
"promise-polyfill": "7.1.2",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2",
"rxjs-tslint": "^0.1.5",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "^6.0.8",
"#angular/compiler-cli": "6.0.7",
"#angular/language-service": "6.0.7",
"#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-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.7.2",
"#angular-devkit/build-angular": "~0.6.8"
}
}
It started working suddenly without specific explanation what was the problem ..
I've also removed the mdbootsrap from the project, but it worked well before that as well.

Related

Ng serve is working but ionic serve is failing

I'm building an app using Ionic 6.19.0 and it suddenly started to face building issues.
I get Error: spawn UNKNOWN each time I execute ionic serve.
This is my package.json file
{
"name": "stile",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular-devkit/schematics": "^13.3.3",
"#angular/common": "~13.0.0",
"#angular/core": "~13.0.0",
"#angular/forms": "~13.0.0",
"#angular/platform-browser": "~13.0.0",
"#angular/platform-browser-dynamic": "~13.0.0",
"#angular/router": "~13.0.0",
"#auth0/angular-jwt": "^5.0.2",
"#capacitor/android": "3.4.3",
"#capacitor/app": "1.1.0",
"#capacitor/camera": "^1.3.1",
"#capacitor/core": "3.4.0",
"#capacitor/haptics": "1.1.4",
"#capacitor/keyboard": "1.2.1",
"#capacitor/status-bar": "1.0.7",
"#ionic/angular": "^6.0.0",
"#npmcli/node-gyp": "^2.0.0",
"bootstrap": "^5.1.3",
"install": "^0.13.0",
"jquery": "^3.6.0",
"json-server": "^0.17.0",
"node-sass": "^7.0.1",
"npm": "^8.6.0",
"rxjs": "~6.6.0",
"tslib": "^2.3.1",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^13.3.3",
"#angular-eslint/builder": "^12.2.1",
"#angular-eslint/eslint-plugin": "~13.0.1",
"#angular-eslint/eslint-plugin-template": "~13.0.1",
"#angular-eslint/template-parser": "~13.0.1",
"#angular/cli": "~13.0.1",
"#angular/compiler": "~13.0.0",
"#angular/compiler-cli": "~13.0.0",
"#angular/language-service": "~13.0.0",
"#capacitor/cli": "3.4.0",
"#ionic/angular-toolkit": "^6.1.0",
"#popperjs/core": "^2.11.5",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"#typescript-eslint/eslint-plugin": "5.3.0",
"#typescript-eslint/parser": "5.3.0",
"acorn": "^8.7.0",
"ajv": "^6.12.6",
"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.8.0",
"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.4.4"
},
"description": "An Ionic project"
}
Here are few solutions that might help:
Ensure you're in the root folder of your project.
Try fixing the existing node_modules folder with npm rebuild + reassign
permissions to your node_modules folder: chmod 755 -R
/path/to/node_modules
Remove node_modules and reinstall with npm install

build issue with angular project

I have a angular ( 9 ) project.
node --version : v12.16.1
npm --version : 6.14.5
When I try to build using "npm install" i get error
Schema validation failed with the following errors:
Data path ".builders['app-shell']" should have required property 'class'.
The package.json file is given here
{
"name": "my-app",
"version": "1.1.1",
"scripts": {
"ng": "ng",
"start:dev": "ng serve --configuration=dev",
"start": "node server.js",
"build": "ng build --aot --prod --configuration=production",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "npm run build"
},
"private": true,
"dependencies": {
"#angular/animations": "^7.2.4",
"#angular/cdk": "~7.3.2",
"#angular/cli": "^7.3.1",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/forms": "~7.2.0",
"#angular/material": "^7.3.2",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"#types/chart.js": "^2.7.45",
"angular4-hal": "^7.8.2",
"chart.js": "^2.7.3",
"core-js": "^2.5.4",
"express": "^4.16.4",
"hammerjs": "^2.0.8",
"moment": "^2.24.0",
"ngx-json-viewer": "^2.4.0",
"path": "^0.12.7",
"primeflex": "^1.0.0-rc.1",
"primeicons": "^1.0.0",
"primeng": "^7.1.0",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"typescript": "~3.2.2",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.901.1",
"#angular/compiler-cli": "^9.1.1",
"#angular/language-service": "~7.2.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^8.9.5",
"codelyzer": "~4.5.0",
"enhanced-resolve": "^3.3.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^5.0.1",
"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"
},
"engines": {
"node": "8.11.3",
"npm": "6.8.0"
}
}

Cannot find module 'aproba'

I have nodejs version 10.15.0 and Angular CLI version 1.7.3 and Angular version 5.2.9 but when I am trying install any npm packages or trying to update the npm,
it is showing throwing the below error: my code
My package.json file is:
{
"name": "so-portal-rwd",
"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.11",
"#angular/cdk": "^5.2.5",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.5.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/material": "^5.2.5",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"#angular/service-worker": "^6.0.5",
"#ng-idle/core": "^2.0.0-beta.15",
"#ng-idle/keepalive": "^2.0.0-beta.15",
"adal-angular5": "^1.0.36",
"angular-user-idle": "^1.1.0",
"angular-webstorage-service": "^1.0.2",
"angular2-draggable": "^1.4.2",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"crypto-js": "^3.1.9-1",
"hammerjs": "^2.0.8",
"marked": "^0.4.0",
"mat-video": "^2.5.1",
"ng2-dnd": "^5.0.2",
"ng2-file-upload": "^1.3.0",
"ng2-pdf-viewer": "^5.1.0",
"ngx-carousel": "^1.3.5",
"ngx-webstorage": "^3.0.2",
"ngx-webstorage-service": "^4.0.1",
"npm": "^6.5.0",
"rxjs": "^5.5.6",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular-devkit/core": "^0.5.13",
"#angular/cli": "~1.7.3",
"#angular/compiler-cli": "^5.2.0",
"#angular/language-service": "^5.2.0",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/marked": "^0.4.0",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^3.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.4.0",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
Try:
npm install --save aproba
If it still didn't work try cleaning cache and installing again:
npm cache clean --force
npm install --save aproba

Angular components are removed after installing a new component

I have an asp.net core web application with angular 5. I want to generate some Barcodes and let the user to print them. After searching I found ngx-barcode. A barcode component for Angular4+. As it says in its page I need install it using this command
$ npm install ngx-barcode –save
So at the node.js command prompt I run that command in my application directory. Like this:
E:\MyprojectDir\ npm install ngx-barcode –save
After getting some warning and at the end of the command execution I got the following message in command prompt:
Added 2 packages and removed 21 packages.
It seems it has been deleted all other node packages from my project. And now there are no reference to angular/core, angular/forms and others package in my project.
This is the content of my package.json file:
{
"name": "",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "webpack --config webpack.config.vendor.js"
},
"private": true,
"dependencies": {
"#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",
"#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/platform-server": "^5.0.0",
"#angular/router": "^5.0.0",
"#ngtools/webpack": "1.5.0",
"#types/webpack-env": "1.13.0",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css": "2.2.1",
"css-loader": "0.28.4",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"preboot": "4.5.2",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.2",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "0.8.12"
},
"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",
"#types/chai": "4.0.1",
"chai": "4.0.2",
"karma-chai": "0.1.0",
"karma-webpack": "2.0.3"
}
}
It's so nice of you to help me.
in this type of errors always npm install again will give us a good clue where the main problem is.
and based on #VahidGhadiri mentioned ,next step:
npm install --save-dev #ngtools/webpack#latest
for resolving
error "Version of #angular/compiler-cli needs to be 2.3.1 or greater.
Current version is "5.1.0"

Angular 4 with universal "Unexpected token import"

My project was running properly without universal but i am trying to use Universal and i am getting below error.
"ngx-page-scroll/src/ngx-page-scroll.service.js:1
(function (exports, require, module, __filename, __dirname) { import { Injectable, Optional, SkipSelf, isDevMode } from '#angular/core';
"
My package.json
{
"name": "resumable-ang",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"prestart": "ng build --prod && ngc",
"start": "ts-node src/server.ts"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.4.6",
"#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/platform-server": "^4.*",
"#angular/router": "^4.0.0",
"#ng-select/ng-select": "^0.15.2",
"#ngrx/effects": "^4.0.5",
"#ngrx/store": "^4.0.3",
"#types/jquery": "^3.2.15",
"angular-hammer": "^2.2.0",
"angular-progress-http": "^1.0.0",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"ngx-carousel": "^1.3.5",
"ngx-page-scroll": "^4.0.2",
"ngx-progressbar": "^2.1.1",
"rxjs": "^5.1.0",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.1.1",
"#angular/compiler-cli": "^4.0.0",
"#angular/language-service": "^4.0.0",
"#types/jasmine": "2.5.45",
"#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-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^1.2.1",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
Try whitelisting that module in your webpack config
//webpack.server.js
target: 'node',
externals: [nodeExternals({
whitelist: [
/^Nolanus\/ngx-page-scroll/
]
})],

Resources