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
Related
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
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";
I've create an extension for visual studio code.
In my package.json, I've a big list of dependencies :
"dependencies": {
"#types/fs-extra": "^8.0.0",
"#types/puppeteer-core": "^2.0.0",
"#types/yamljs": "^0.2.30",
"anchor-markdown-header": "^0.5.7",
"clone": "^2.1.2",
"dedent": "^0.7.0",
"front-matter": "^3.0.2",
"fs-extra": "^8.1.0",
"get-port": "^5.1.1",
"highlight.js": "^9.18.0",
"localized-resource-manager": "^1.2.0",
"markdown-it": "^10.0.0",
"markdown-it-anchor": "^5.2.5",
"markdown-it-checkbox": "^1.1.0",
"markdown-it-emoji": "^1.4.0",
"markdown-it-table-of-contents": "^0.4.4",
"multi-integer-range": "^4.0.8",
"mustache": "^4.0.0",
"puppeteer-core": "^2.1.1",
"rxjs": "^6.5.4",
"serve-handler": "^6.1.2",
"simple-git": "^1.131.0",
"string-template": "^1.0.0",
"svn-spawn": "^0.1.6",
"temp-filesystem": "^1.1.3",
"transliteration": "^2.1.8",
"twemoji": "^12.1.5",
"utf8": "^3.0.0",
"website-scraper": "^4.2.0",
"yamljs": "^0.3.0"
},
My problem is that I need to embed all these dependencies (and their dependencies) in my package node_modules folder.
So my package consists now of more than 5000 files and more than 300 MB.
Is there a way to not include the node_modules folder in the package but tell to vscode to install them when installing my extension ?
Thanks :)
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.
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.