dpcunningham / process-spinup-devenv-ionic4-ng-on-linux

Process: Spin Up a Development Environment for Ionic 4 (default Angular) Apps
0 stars 0 forks source link

reinstall: Node.js (w/ npm, npx, etc.) Ionic & Cordova #21

Open dpcunningham opened 4 years ago

dpcunningham commented 4 years ago

After a system hang...

$ ionic cordova plugin add cordova-sqlite-storage [ERROR] Cannot load Cordova config.

    Error: Cannot parse config.xml file: Error: Text data outside of root node.
   [...]
    (/usr/local/lib/nodejs/node-v10.16.3-linux-x64/lib/node_modules/ionic/node_modules/sax/lib/sax.js:666:10)

...blah, blah, blah, The build environment is now really unhappy w/ me.

This reveals my (previously noted) crappy install of node. Note the error path is citing v10.x. Really? And where did my v-12.x go then, mutha-fluffa?

$ node --version
v10.16.3

Yup. This is AFU. OK, let's bend an elbow & fix it, once & fer allz.

(Cracks knuckles.) Let's uninstall node...

sudo apt-get remove nodejs

(Cracks neck.) Let's do a "scorched-earth" treatment on any & all previous directory trees:

Let's reinstall per point 6 on our previous issue: install: Node.js, npm, and ionic

$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

## Installing the NodeSource Node.js 12.x repo...
## Populating apt-get cache...
+ apt-get update
Ign:1 http://packages.linuxmint.com tessa InRelease
[...]                                                                                                                                   
Get:15 http://archive.ubuntu.com/ubuntu bionic-backports InRelease [74.6 kB]
Fetched 74.6 kB in 1s (57.6 kB/s)                                
Reading package lists... Done
## You seem to be using Linux Mint version tessa.
## This maps to Ubuntu "bionic"... Adjusting for you...
## Confirming "bionic" is supported...
+ curl -sLf -o /dev/null 'https://deb.nodesource.com/node_12.x/dists/bionic/Release'
## Adding the NodeSource signing key to your keyring...
+ curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add -
OK
## Creating apt sources list file for the NodeSource Node.js 12.x repo...

+ echo 'deb https://deb.nodesource.com/node_12.x bionic main' > /etc/apt/sources.list.d/nodesource.list
+ echo 'deb-src https://deb.nodesource.com/node_12.x bionic main' >> /etc/apt/sources.list.d/nodesource.list

## Running `apt-get update` for you...

+ apt-get update
Hit:1 http://packages.microsoft.com/repos/vscode stable InRelease
[...]         
Fetched 79.9 kB in 1s (62.0 kB/s)                                                    
Reading package lists... Done

## Run `sudo apt-get install -y nodejs` to install Node.js 12.x and npm
## You may also need development tools to build native addons:
     sudo apt-get install gcc g++ make
## To install the Yarn package manager, run:
     curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
     echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
     sudo apt-get update && sudo apt-get install yarn

$ sudo apt-get install -y nodejs Reading package lists... Done Building dependency tree
Reading state information... Done The following NEW packages will be installed: nodejs [...] Processing triggers for man-db (2.8.3-2ubuntu0.1) ...

Confirm versions against the latest LTS versions noted on both:

dpc@LT3-Insp17-2017:~$ node --version
v12.14.1
dpc@LT3-Insp17-2017:~$ npm --version
6.13.4
dpc@LT3-Insp17-2017:~$ npx --version
6.13.4

Let's reinstall Ionic & Cordova:

$ sudo npm install -g ionic cordova

npm WARN deprecated superagent@4.1.0: Please note that v5.0.1+ of superagent removes User-Agent header by default, therefore you may need to add it yourself (e.g. GitHub blocks requests without a User-Agent header). This notice will go away with v5.0.2+ once it is released. /usr/bin/cordova -> /usr/lib/node_modules/cordova/bin/cordova /usr/bin/ionic -> /usr/lib/node_modules/ionic/bin/ionic +cordova@9.0.0 +ionic@5.4.13 added 704 packages from 403 contributors in 19.753s

dpcunningham commented 4 years ago

Re-survey our build situation:

$ node --version
v12.14.0
$ npm --version
6.13.4
$ java -version   # cuz Oracle java is a diva, & can't follow "mundane" argument SOPs
java version "1.8.0_231"
Java(TM) SE Runtime Environment (build 1.8.0_231-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.231-b11, mixed mode)
$ javac -version
javac 1.8.0_231
$ gradle --version

------------------------------------------------------------
Gradle 5.2.1
------------------------------------------------------------

Build time:   2019-02-08 19:00:10 UTC
Revision:     f02764e074c32ee8851a4e1877dd1fea8ffb7183

Kotlin DSL:   1.1.3
Kotlin:       1.3.20
Groovy:       2.5.4
Ant:          Apache Ant(TM) version 1.9.13 compiled on July 10 2018
JVM:          1.8.0_231 (Oracle Corporation 25.231-b11)
OS:           Linux 4.15.0-47-generic amd64

$ ionic --version
5.4.13
$ cordova --version
9.0.0 (cordova-lib@9.0.1)

OK, looks like we're back in business.

dpcunningham commented 4 years ago

Resolve build errors

$ ionic cordova platform add ios

[ERROR] Cannot load Cordova config.

   Error: Cannot parse config.xml file: Error: Text data outside of root node.
   Line: 110
   Column: 13

[...stack trace follows...]

This turned out to be caused by the changes we made to enable iOS camera use:

<!-- Required for iOS 10: Camera permission prompt -->
<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
    <string>Used to take pictures</string>
</edit-config>

We take those out for now, and:

$ ionic cordova platform add ios Platform ios already exists. $ ionic cordova platform add android Platform android already exists.

And then slap them right back in, because we'll be needing them in a bit...

NB: Turns out the real reason for this is: the tutorial said: "add this to the end of config.xml.

It could have been much more clear and said something like: "inside the <widget>...</widget> specifier, so you don't waste a lot of time hunting down errors that look like weird-ass environment faults. And if in doubt, compare your code with the repo code (but don't just be tempted to blindly cut & paste, because you aren't gonna really learn much doing it that way, right?)

dpcunningham commented 4 years ago

Resolve npm warnings

$ sudo npm install @ionic-native/camera

npm WARN karma-jasmine-html-reporter@1.5.1 requires a peer of jasmine-core@>=3.5 but none is installed. You must install peer dependencies yourself. [...] found 3 moderate severity vulnerabilities run npm audit fix to fix them, or npm audit for details

$ sudo npm audit

                       === npm audit security report ===                        

# Run  npm install --save-dev @angular-devkit/build-angular@0.803.21  to resolve 2 vulnerabilities
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Cross-Site Scripting                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ serialize-javascript                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ @angular-devkit/build-angular [dev]                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ @angular-devkit/build-angular > copy-webpack-plugin >        │
│               │ serialize-javascript                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/1426                            │
└───────────────┴──────────────────────────────────────────────────────────────┘

┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Cross-Site Scripting                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ serialize-javascript                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ @angular-devkit/build-angular [dev]                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ @angular-devkit/build-angular > terser-webpack-plugin >      │
│               │ serialize-javascript                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/1426                            │
└───────────────┴──────────────────────────────────────────────────────────────┘

# Run  npm update terser-webpack-plugin --depth 3  to resolve 1 vulnerability
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Cross-Site Scripting                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ serialize-javascript                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ @angular-devkit/build-angular [dev]                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ @angular-devkit/build-angular > webpack >                    │
│               │ terser-webpack-plugin > serialize-javascript                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/1426                            │
└───────────────┴──────────────────────────────────────────────────────────────┘

found 3 moderate severity vulnerabilities in 17623 scanned packages
  run `npm audit fix` to fix 3 of them.
dpc@LT3-Insp17-2017:~/dpc.data/local.FS/lfs.00-Scratch/projects/ionic4.demos/photo-gallery$ 

$ sudo npm audit fix

core-js@3.2.1 postinstall /home/dpc/dpc.data/local.FS/lfs.00-Scratch/projects/ionic4.demos/photo-gallery/node_modules/@angular-devkit/build-angular/node_modules/core-js node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library! [...] npm WARN karma-jasmine-html-reporter@1.5.1 requires a peer of jasmine-core@>=3.5 but none is installed. You must install peer dependencies yourself. [...] npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

  • @angular-devkit/build-angular@0.803.21 added 127 packages from 71 contributors, removed 8 packages and updated 35 packages in 23.985s fixed 3 of 3 vulnerabilities in 17623 scanned packages

$ sudo npm audit

                       === npm audit security report ===                        

found 0 vulnerabilities
 in 19261 scanned packages

Note that this takes care of the npm warnings in issue #20: