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

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.

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

VSCode extension dependencies installation when installing extension

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 :)

How to fix Error cannot find module 'core-js/es6'

I have been getting an error regardless of what I do. In fact I am building an app with mongoDB as a server using mongoose and babel-watch, but every time I run babel-watch I get this error:
Error cannot find module 'core-js/es6'
I have installed and reinstalled core.js using npm install core.js, however nothing changes. Please help.
These are the dependencies I have installed on my project:
"dependencies": {
"body-parser": "^1.19.0",
"core-js": "^2.6",
"cuid": "^2.1.6",
"express": "^4.17.1",
"limax": "^1.7.0",
"mongoose": "^5.6.9",
"node-gyp": "^5.0.3"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-watch": "^7.0.0",
"nodemon": "^1.19.1"
}
}
Code error seen from terminal after running npm start
For core.js v3.9 import in App.tsx the next line: import "core-js/es";
Given that you are using core-js v2.6.9, your path should be core-js/library/es6 as the example shows you in the documentation here.

Error: Couldn't find preset "latest" relative to directory "/app"

Receiving an error within my Deis app; with the introduction of Helmet to the frontend middleware. The app is initially based on React Boilerplate and most of the suggestions I've run by, I've already implemented/explored within the source and am still producing this "phantom" error.
This only occurs on the Deis app instance; when reproducing the steps locally, there's zero issues with it completing the (production) build process.
Sure, I could remove helmet from the middleware, but, I'd rather not...
Error Output:
> pkg-name#0.0.1 start /app
> npm run start:production
> pkg-name#0.0.1 start:production /app
> npm run build && npm run start:prod
> pkg-name#0.0.1 build /app
> cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress
/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:328
throw e;
^
2017-10-27T15:50:48+00:00 deis-app-name[]:
Error: Couldn't find preset "latest" relative to directory "/app"
at /app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (<anonymous>)
at OptionManager.resolvePresets (/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at compile (/app/node_modules/babel-register/lib/node.js:103:45)
at loader (/app/node_modules/babel-register/lib/node.js:144:14)
at Object.require.extensions.(anonymous function) [as .js] (/app/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:531:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! pkg-name#0.0.1 build: `cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the pkg-name#0.0.1 build script.
Dependency object value/pair:
"dependencies": {
"babel-cli": "6.18.0",
"babel-core": "6.21.0",
"babel-eslint": "7.1.1",
"babel-loader": "6.2.10",
"babel-plugin-dynamic-import-node": "1.0.0",
"babel-plugin-react-intl": "2.2.0",
"babel-plugin-react-transform": "2.0.2",
"babel-plugin-transform-es2015-modules-commonjs": "6.18.0",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-inline-elements": "6.8.0",
"babel-plugin-transform-react-remove-prop-types": "0.2.11",
"babel-preset-latest": "6.16.0",
"babel-preset-react": "6.16.0",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-0": "6.16.0",
"babel-polyfill": "6.20.0",
"basic-auth": "^2.0.0",
"bootstrap": "4.0.0-beta",
"chalk": "^1.1.3",
"cheerio": "0.22.0",
"circular-dependency-plugin": "2.0.0",
"classnames": "^2.2.5",
"compression": "1.6.2",
"cross-env": "3.1.3",
"css-loader": "0.26.1",
"dotenv": "^4.0.0",
"dotenv-safe": "^4.0.4",
"dotenv-webpack": "^1.5.4",
"eslint-import-resolver-webpack": "0.8.0",
"exports-loader": "0.6.3",
"express": "4.14.0",
"express-basic-auth": "^1.1.2",
"file-loader": "0.9.0",
"fontfaceobserver": "^2.0.13",
"helmet": "^3.9.0",
"html-loader": "0.4.4",
"html-webpack-plugin": "2.24.1",
"image-webpack-loader": "2.0.0",
"immutable": "3.8.1",
"imports-loader": "0.6.5",
"intl": "1.2.5",
"invariant": "2.2.2",
"ip": "1.1.4",
"lodash": "4.17.2",
"minimist": "1.2.0",
"moment": "2.18.0",
"ngrok": "2.2.4",
"nsp": "^2.8.1",
"offline-plugin": "4.5.2",
"query-string": "^5.0.1",
"react": "15.4.1",
"react-addons-test-utils": "15.4.1",
"react-dom": "15.4.1",
"react-helmet": "3.2.2",
"react-intl": "2.1.5",
"react-paginate": "^4.4.4",
"react-redux": "4.4.6",
"react-router": "3.0.0",
"react-router-redux": "4.0.6",
"react-router-scroll": "0.4.1",
"react-scroll": "^1.5.5",
"react-widgets": "^4.0.2",
"react-widgets-moment": "^4.0.2",
"reactstrap": "^5.0.0-alpha.3",
"redux": "3.6.0",
"redux-form": "^7.0.4",
"redux-immutable": "3.0.8",
"redux-saga": "0.14.0",
"redux-saga-routines": "^2.0.2",
"reselect": "2.5.4",
"rimraf": "2.5.4",
"sanitize.css": "4.1.0",
"snyk": "^1.45.0",
"style-loader": "0.13.1",
"styled-components": "1.1.2",
"svg-sprite-loader": "^3.4.0",
"url-loader": "0.5.7",
"warning": "3.0.0",
"webpack": "2.2.0-rc.3",
"webpack-dev-middleware": "1.9.0",
"webpack-hot-middleware": "2.15.0",
"whatwg-fetch": "2.0.1"
},
"devDependencies": {
"coveralls": "2.11.15",
"enzyme": "2.6.0",
"eslint": "3.11.1",
"eslint-config-airbnb": "13.0.0",
"eslint-config-airbnb-base": "10.0.1",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.7.1",
"eslint-plugin-redux-saga": "0.1.5",
"eventsource-polyfill": "0.9.6",
"jest-cli": "18.0.0",
"lint-staged": "3.2.1",
"node-plop": "0.5.4",
"node-sass": "^4.5.3",
"null-loader": "0.1.1",
"plop": "1.7.3",
"pre-commit": "1.1.3",
"sass-loader": "^6.0.6",
"shelljs": "^0.7.5",
"sinon": "2.0.0-pre"
}
Runtime configuration:
webpack: 2.2.0-rc.3
babel core: 6.26.0
babel loader: 6.18.0
helmet: 3.9.0
Environment workflow:
Running on a Deis instance (kube & docker)
Environment variables:
NODE_ENV production
NODE_MODULES_CACHE false
NPM_CONFIG_PRODUCTION true
Additional resources:
https://github.com/babel/babel/issues/6558
https://github.com/babel/babel-loader#usage
https://github.com/react-boilerplate/react-boilerplate/pull/1236#issuecomment-305821664
BabelJs over Heroku: Couldn't find preset "env" relative to directory "/app"
https://devcenter.heroku.com/articles/nodejs-support#devdependencies
What I do - in development (on your local machine), I just install all the latest babel deps in a grandparent directory. Node.js will walk up the filesystem looking for its dependencies (node_modules). This way you don't have to install Babel for each project. This technique doesn't even need NODE_PATH or npm link, it just works like this:
$HOME/
projects/
node_modules/ # install all babel deps here
project-a/
project-b/
project-c/
or, even simpler, you can just install babel deps in $HOME/node_modules, and that will work too. Just an idea. This is just the way Node.js works - it walks up the filesystem all the way to $HOME, looking for node_modules/x, if it can't find it in $HOME/node_modules/x, then it fails.
I removed "latest" from presest array and the "prestes" equals ["react","stage-0"]