Ionic 2 Warnings : [Bourbon][Deprecation] - ionic-framework

I run the cmd :
ionic serve
and my app runs perfectly. But I have something like 50 warnings on [Bourbon][Deprecation].The warnings are like this :
WARNING: [Bourbon] [Deprecation] `justify-content` is deprecated and will be removed in 5.0.0. We suggest using an autom
ated prefixing tool, like Autoprefixer.
Backtrace:
node_modules/bourbon/app/assets/stylesheets/_bourbon-deprecate.scss:10, in mixin `-bourbon-deprecate`
node_modules/bourbon/app/assets/stylesheets/_bourbon-deprecate.scss:17, in mixin `-bourbon-deprecate-for-prefixi
ng`
node_modules/bourbon/app/assets/stylesheets/css3/_flex-box.scss:239, in mixin `justify-content`
src/theme/common/inputs/rating.scss:16, in mixin `rating-item-styles`
src/pages/maps/maps.scss:213
So what is the problem? How to fix it?
I'm using ionic 2 angular 2
I have this :
"dependencies": {
"#angular/common": "2.2.1",
"#angular/compiler": "2.2.1",
"#angular/compiler-cli": "2.2.1",
"#angular/core": "2.2.1",
"#angular/forms": "2.2.1",
"#angular/http": "2.2.1",
"#angular/platform-browser": "2.2.1",
"#angular/platform-browser-dynamic": "2.2.1",
"#angular/platform-server": "2.2.1",
"#ionic/storage": "1.1.7",
"#types/googlemaps": "^3.26.2",
"bourbon": "^4.3.3",
"ionic-angular": "2.0.0-rc.5",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"sw-toolbox": "3.4.0",
"zone.js": "0.6.26"
},

You dont actually require Bourbon with Ionic 2 as the default build stack here uses Autoprefixer.
If for any reason you are still using it, check the changelog.All the mixins will be removed in version 5. For the current version, you can try:
$output-bourbon-deprecation-warnings: false;
#import "bourbon";
as mentioned here.
If you choose not to upgrade, you can reduce pollution of your logs by
disabling the output of Bourbon’s deprecation-related Sass warnings.
This variable must be declared before importing Bourbon.

Related

Angular 14 application crashes when using ng2-charts upon loading

I saw a similiar problem but it was not with ng2-charts. I already spent more the 1
day on what I believe is an environment issue. I need help big time.
Crash Message:
Error: NG0203: inject() must be called from an injection context (a constructor, a
factory function or a field initializer). Find more at
https://angular.io/errors/NG0203
at injectInjectorOnly (core.mjs:4751:15)
at Module.ɵɵinject (core.mjs:4762:12)
at Object.NgChartsModule_Factory [as useFactory] (ng2-charts.mjs:274:1)
at Object.factory (core.mjs:9324:38)
at R3Injector.hydrate (core.mjs:9237:35)
at R3Injector.get (core.mjs:9131:33)
at injectInjectorOnly (core.mjs:4757:33)
at ɵɵinject (core.mjs:4761:12)
at useValue (core.mjs:8897:65)
at R3Injector.resolveInjectorInitializers (core.mjs:9174:17)
index.js:551 [webpack-dev-server] Live Reloading enabled.
Code added to app-module.ts:
import { NgChartsModule } from 'ng2-charts';
#NgModule({ NgChartsModule, .......
Package.json
"dependencies": {
"#angular/animations": "14.1.0",
"#angular/common": "14.1.0",
"#angular/compiler": "14.1.0",
"#angular/core": "14.1.0",
"#angular/forms": "14.1.0",
"#angular/material": "14.1.0",
"#angular/material-moment-adapter": "14.1.0",
"material-design-icons": "3.0.1",
"#angular/platform-browser": "14.1.0",
"#angular/platform-browser-dynamic": "14.1.0",
"#angular/router": "14.1.0",
"#types/file-saver": "^2.0.5",
"core-js": "3.24.0",
"chart.js": "3.8.2",
"ng2-charts": "4.0.0",
"rxjs": "7.5.6",
"rxjs-compat": "6.6.7",
"tslib": "2.4.0",
"zone.js": "0.11.7",
Installation:
npm install --g #angular/cli#14.1.0
npm i --unsafe-perm --verbose
npm i #types/chart.js

Background mode is not working in ionic 5

Uncaught TypeError: Object(...) is not a function
at index.js:249
at Module../node_modules/#ionic-native/background-mode/index.js (index.js:405)
at __webpack_require__ (bootstrap:84)
at Module../src/app/app.component.ts (main.js:865)
at __webpack_require__ (bootstrap:84)
at Module../src/app/app.module.ts (app.component.ts:30)
at __webpack_require__ (bootstrap:84)
at Module../src/main.ts (environment.ts:19)
at __webpack_require__ (bootstrap:84)
at Object.0 (main.ts:13)
in package.json
"#angular/core": "^8.2.14",
"#angular/forms": "^8.2.14",
"#angular/http": "^7.2.16",
"#angular/material": "^8.2.3",
"#angular/platform-browser": "^8.2.14",
"#angular/platform-browser-dynamic": "^8.2.14",
"#angular/pwa": "^0.803.23",
"#angular/router": "^8.2.14",
"#angular/service-worker": "^8.2.14",
"#capacitor/android": "^1.5.1",
"#capacitor/core": "1.5.1",
"#ionic-native/background-mode": "^4.19.0",
"#ionic-native/camera": "^5.24.0",
"#ionic-native/clipboard": "^5.28.0",
"#ionic-native/core": "5.0.0-beta.15",
"#ionic-native/deeplinks": "^5.28.0",
"#ionic-native/file": "^5.22.0-beta-1",
"#ionic-native/file-path": "^5.22.0-beta-1",
"#ionic-native/file-transfer": "^5.26.0",
Check your project type in ionic.config.json file.
If the type is "ionic-angular", then install 4.x.x version.
npm i -s #ionic-native/background-mode#4.20.0
If the type is "angular", then install 5.x.x-beta version
npm i -s #ionic-native/background-mode#5.0.0-beta.24
Credit goes to - Diego Desenvolvedor for this link here
Try this:
ionic cordova plugin add cordova-plugin-background-mode
npm install #ionic-native/background-mode
Documentation

Angular 10 upgrade messed up ag-grid-angular dropdown look-n-feel

My ag-grid-angular version has been upgraded to 24.0.0. as a process of Angular 10 upgrade (npm update --all).
Everything works fine in terms of functionality, angular material components look-n-feel, and third party libraries I am using (e.g. ag-angular-grid, Highchart, splitter, ag-grid, etc..)
But somehow I have lost the default look-n-feel of the ag-angular-grid dropdown (editing grid - cellEditor: 'agSelectCellEditor')
Here's the comparison of look-n-feel before and after upgrade for more clarity.
Version after angular 10 upgrade (package.json):
"#angular-devkit/build-angular": "^0.1001.1",
"#angular/animations": "^10.1.2",
"#angular/cdk": "^10.2.1",
"#angular/common": "^10.1.2",
"#angular/compiler": "^10.1.2",
"#angular/core": "^10.1.2",
"#angular/flex-layout": "^10.0.0-beta.32",
"#angular/forms": "^10.1.2",
"#angular/http": "^7.2.16",
"#angular/material": "^10.2.1",
"#angular/platform-browser": "^10.1.2",
"#angular/platform-browser-dynamic": "^10.1.2",
"#angular/router": "^10.1.2",
"#types/jest": "^26.0.14",
"ag-grid-angular": "^24.0.0",
"ag-grid-community": "^24.0.0",
Appreciate your help.
Importing ag-grid and ag-theme-material css files into styles.scss resolved the issue. Thanks to Chris for the direction and documentation.
https://www.ag-grid.com/javascript-grid-themes-v23-migration/
Import these files into "styles.scss" file as shown below, that's it!
#import "~ag-grid-community/dist/styles/ag-grid.css";
#import "~ag-grid-community/dist/styles/ag-theme-material.css";
or
#import "~ag-grid-community/src/styles/ag-grid";
#import "~ag-grid-community/src/styles/ag-theme-material/sass/legacy/ag-theme-material-v22-compat";

error building `ionic-angular` app with `capacitor`

I'm trying to follow this tutorial: https://www.joshmorony.com/using-google-maps-and-geolocation-in-ionic-with-capacitor/
If I use the following steps to create the project
ionic start gmap3 blank --type=ionic-angular --no-link && cd ./gmap3
npm install #types/googlemaps --save-dev
ionic generate component GoogleMaps
npm run build # OK
# install capacitor
npm install --save #capacitor/cli #capacitor/core
# npm uninstall --save cordova-plugin-splashscreen
npx cap init gmap com.example.gmap
npm run build # ERROR after adding #capacitor/core
I get the following error AFTER I add capacitor the the project:
[11:19:12] transpile started ...
[11:19:16] typescript: node_modules/#types/node/index.d.ts, line: 194
Subsequent variable declarations must have the same type. Variable 'process' must be of type '{ env: { [key:
string]: string; }; }', but here has type 'Process'.
L193: interface RequireResolve {
L194: (id: string, options?: { paths?: string[]; }): string;
L195: paths(request: string): string[] | null;
[11:19:16] ionic-app-script task: "build"
[11:19:16] Error: Failed to transpile program
Error: Failed to transpile program
at new BuildError (/dev/ionic3/gmap3/node_modules/#ionic/app-scripts/dist/util/errors.js:16:28)
at /dev/ionic3/gmap3/node_modules/#ionic/app-scripts/dist/transpile.js:159:20
at new Promise (<anonymous>)
at transpileWorker (/dev/ionic3/gmap3/node_modules/#ionic/app-scripts/dist/transpile.js:107:12)
at Object.transpile (/dev/ionic3/gmap3/node_modules/#ionic/app-scripts/dist/transpile.js:64:12)
at /dev/ionic3/gmap3/node_modules/#ionic/app-scripts/dist/build.js:109:82
at <anonymous>
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gmap3#0.0.1 build: `ionic-app-scripts build`
npm ERR! Exit status 1
But I can clone a github repo (modified with the same package.json) and it builds fine. see: https://github.com/mixuala/ionic3-gmaps.git
git clone https://github.com/mixuala/ionic3-gmaps.git gmap3.2
cd gmap3.2
npm install
npm run build
why is that???
Here is the package.json:
"dependencies": {
"#angular/animations": "5.2.11",
"#angular/common": "5.2.11",
"#angular/compiler": "5.2.11",
"#angular/compiler-cli": "5.2.11",
"#angular/core": "5.2.11",
"#angular/forms": "5.2.11",
"#angular/http": "5.2.11",
"#angular/platform-browser": "5.2.11",
"#angular/platform-browser-dynamic": "5.2.11",
"#capacitor/cli": "^1.0.0-beta.7",
"#capacitor/core": "^1.0.0-beta.7",
"#ionic-native/core": "~4.12.0",
"#ionic-native/splash-screen": "~4.12.0",
"#ionic-native/status-bar": "~4.12.0",
"#ionic/storage": "2.1.3",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"#ionic/app-scripts": "^3.2.0",
"#types/googlemaps": "^3.30.12",
"typescript": "~2.6.2"
},
This is a known issue in the #ionic/cli repo. Please see #3541.
It can be solved adding "types": [] to the "compilerOptions" parameter of the file tsconfig.json.

Ember CLI doesn't run jshint or load any tests

So this used to work all fine, but ever since I updated ember-cli from 0.1.8 to 0.1.12 my tests won’t start and jshint never checks the files I work with on save.
ember test
version: 0.1.12
Built project successfully. Stored in “/[...]/tmp/class-tests_dist-h3LlgY3C.tmp".
1..0
tests 0
pass 0
fail 0
And on http://localhost:4200/tests it looks fine but 0 assertions of 0 passed, 0 failed..
I’ve followed the upgrade path, and I don’t think I’ve missed any dependencies on my bower.json or package.json.
Can any one here spot if there’s some dependency that’s all wrong?
package.json
{
"devDependencies": {
"broccoli-asset-rev": "2.0.0",
"broccoli-ember-hbs-template-compiler": "1.6.1",
"ember-cli": "0.1.12",
"ember-cli-6to5": "3.0.0",
"ember-cli-app-version": "0.3.1",
"ember-cli-autoprefixer": "0.2.0",
"ember-cli-content-security-policy": "0.3.0",
"ember-cli-dependency-checker": "0.0.7",
"ember-cli-fastclick": "1.0.3",
"ember-cli-flash": "0.2.0",
"ember-cli-htmlbars": "0.5.4",
"ember-cli-ic-ajax": "0.1.1",
"ember-cli-inject-live-reload": "1.3.0",
"ember-cli-pretender": "0.3.1",
"ember-cli-qunit": "0.3.1",
"ember-cli-uglify": "1.0.1",
"ember-cli-responsive": "0.1.0",
"ember-cli-sass": "3.0.3",
"ember-cli-simple-auth": "0.7.2",
"ember-cli-simple-auth-oauth2": "0.7.2",
"ember-cli-spinjs": "0.3.0",
"ember-data": "1.0.0-beta.14.1",
"ember-document-title": "0.1.2",
"ember-export-application-global": "1.0.0",
"ember-cli-uglify": "1.0.1",
"express": "4.8.5",
"glob": "4.0.5",
"grunt": "0.4.5",
"grunt-contrib-htmlmin": "0.3.0",
"grunt-svgstore": "0.4.1"
}
}
bower.json
{
"dependencies": {
"handlebars": "2.0.0",
"jquery": "2.1.3",
"ember": "1.9.1",
"ember-data": "1.0.0-beta.14.1",
"ember-resolver": "0.1.11",
"ember-i18n": "2.9.0",
"loader.js": "ember-cli/loader.js#1.0.1",
"ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
"ember-cli-test-loader": "ember-cli/ember-cli-test-loader#0.1.0",
"ember-load-initializers": "ember-cli/ember-load-initializers#0.0.2",
"ember-qunit": "0.1.8",
"ember-qunit-notifications": "0.0.5",
"qunit": "1.17.1",
"moment": "2.9.0",
"cookie-monster": "0.3.0",
"inuit-functions": "0.2.0",
"inuit-mixins": "0.2.3",
"inuit-normalize": "3.0.2",
"inuit-reset": "0.1.1",
"inuit-box-sizing": "0.2.0",
"inuit-shared": "0.1.3",
"spin.js": "2.0.2",
"inuit-clearfix": "0.2.1",
"bootstrap-daterangepicker": "https://github.com/dangrossman/bootstrap-daterangepicker.git#1.3.17",
"bootstrap-sass-official": "3.3.3",
"matchmedia": "0.2.0",
"fastclick": "1.0.6",
"animate-sass": "0.6.2",
"pretender": "0.6.0",
"ember-simple-auth": "0.7.2",
"gmaps": "https://github.com/hpneo/gmaps.git#~0.4.16",
"jQuery.mmenu": "~4.7.5",
"susy": "~2.2.2"
},
"resolutions": {
"handlebars": "2.0.0",
"ember": "1.9.1",
"moment": "2.9.0"
}
}
So I did a new update and followed the guides VERY carefully this time and now it works. Thank you #mikeazo for commenting. I can't really say either what i did wrong, but it's working again. So all I can say is FOLLOW THE UPGRADE GUIDES and don't rush through them.