We Keep Coding

Parcel creates a new hashed file after updating a dynamically imported module

I'm using the verion 2.7 of Parcel for bundling my client side javascript. I have a index.ts where I group all my code. In some cases I have to use dynamic import statements:
example:
const { Menu } = await import('./Menu');
The issue that I can't solve: after each update on Menu.ts, Parcel creates a newly hashed Menu.[hash].js file instead of updating it.
npm run watch:js:
"watch:js": "parcel watch --no-hmr ./public/ts/index.ts --dist-dir ./public/js --public-url ./"
public folder structure:
.
└── public/
├── [...]
├── js/
│ ├── index.js
│ ├── index.js.map
│ ├── Menu.[hash-1].ts **! that's an issue !**
│ └── Menu.[hash-2].ts **! that's an issue !**
└── ts/
├── [...]
├── index.ts
└── Menu.ts

Cannot find react-native

I get this odd error:
ERROR in ./node_modules/react-native-maps/lib/MapMarkerNativeComponent.js 14:48-113
Module not found: Error: Can't resolve 'react-native/Libraries/Utilities/codegenNativeCommands' in '/home/ubuntu/pdev/me/website/node_modules/react-native-maps/lib'
However, I have react-native installed:
ubuntu#foo:~/pdev/me/website$ npm list | grep react-native
├── #react-native-async-storage/async-storage#1.17.10
├── #react-native-picker/picker#2.4.4
├── react-native-elements#3.4.2
├── react-native-expo-viewport-units#0.0.8
├── react-native-gesture-handler#2.6.0
├── react-native-maps#1.3.1
├── react-native-safe-area-context#4.3.3
├── react-native-text-size#4.0.0-rc.1
├── react-native-vector-icons#9.2.0
├── react-native-web#0.18.9
├── react-native#0.70.0

How and when are the esm5 and esm2015 directories of a "ng build"-generated lib folder used?

In the folder generated by ng build simple-lib, I see a more complex structure than my other node modules. Instead of an index.js exporting and importing other members, I see a bundles, esm2015, esm5, and public_api.d.ts.
I see the compiled versions of simple-lib in both the esm5 and esm2015 folders. I'm wondering how the esm .js files are used and when esm2015 would be used instead of esm5. From what I understand, esm2015 allows for smaller bundles and tree-shaking, but I'm not sure when the choice is made about which module to use. I'm hoping to generate a lib that I can use in a node project and any help to understand if and how that would be possible would be appreciated. Thanks.
$ tree simple-lib/
simple-lib/
├── bundles
│   ├── simple-lib.umd.js
│   ├── simple-lib.umd.js.map
│   ├── simple-lib.umd.min.js
│   └── simple-lib.umd.min.js.map
├── esm2015
│   ├── lib
│   │   ├── simple-lib.component.js
│   │   ├── simple-lib.module.js
│   │   └── simple-lib.service.js
│   ├── public_api.js
│   └── simple-lib.js
├── esm5
│   ├── lib
│   │   ├── simple-lib.component.js
│   │   ├── simple-lib.module.js
│   │   └── simple-lib.service.js
│   ├── public_api.js
│   └── simple-lib.js
├── fesm2015
│   ├── simple-lib.js
│   └── simple-lib.js.map
├── fesm5
│   ├── simple-lib.js
│   └── simple-lib.js.map
├── lib
│   ├── simple-lib.component.d.ts
│   ├── simple-lib.module.d.ts
│   └── simple-lib.service.d.ts
├── package.json
├── public_api.d.ts
├── simple-lib.d.ts
└── simple-lib.metadata.json

While updating my angular version, I think I may have found the answer. The library that will be used is dependent on the browser requesting the application - The esm5 build will be used for older browsers that require more polyfills and the esm2015 libraries will be used for newer browsers that require fewer polyfills
"The CLI's build command now automatically creates a modern ES2015 build with minimal polyfills and a compatible ES5 build for older browsers, and loads the appropriate file based on the browser. You may opt-out of this change by setting your target back to es5 in your tsconfig.json. Learn more on angular.io."
From https://update.angular.io/#7.1:9.0

As per the "Angular Package Format" specs -
In today’s JavaScript landscape, developers will consume packages in
many different ways. For example, some may use SystemJS, others could
use Webpack. Still, others might consume packages in Node or maybe in
the browser as a UMD bundle or through global variable access.
Read more from this link - https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview

Modal dialog based on Ionic and AngularJS leads to freezing the app

I took over a project with AngularJS, Ionic and Cordova (plugins).
Due to another problem, I had to update my infrastructure (including an update to XCode 7.2.1), which looks like the following now:
npm list -g --depth=0
├── bower#1.7.7
├── cordova#6.0.0
├── grunt-cli#0.1.13
├── grunt-sass#1.1.0
├── ionic#1.7.14
├── ios-deploy#1.8.5
├── ios-sim#5.0.6
├── n#2.1.0
├── to#0.2.9
└── update#0.4.2
npm list --depth=0
├── cordova#6.0.0
├── grunt#0.4.5
├── grunt-angular-templates#0.5.9
├── grunt-autoprefixer#0.4.2
├── grunt-bump#0.3.4
├── grunt-cli#0.1.13 extraneous
├── grunt-concurrent#0.4.3
├── grunt-contrib-clean#0.5.0
├── grunt-contrib-concat#0.3.0
├── grunt-contrib-connect#0.5.0
├── grunt-contrib-copy#0.4.1
├── grunt-contrib-cssmin#0.7.0
├── grunt-contrib-htmlmin#0.1.3
├── grunt-contrib-jshint#0.7.2
├── grunt-contrib-uglify#0.2.7
├── grunt-contrib-watch#0.5.3
├── grunt-conventional-changelog#1.2.2
├── grunt-githooks#0.3.1
├── grunt-htmlhint#0.4.1
├── grunt-jscs#1.5.0
├── grunt-newer#0.6.1
├── grunt-ng-annotate#0.2.3
├── grunt-ng-constant#0.5.0
├── grunt-ngdocs#0.2.9
├── grunt-sass#1.1.0
├── grunt-usemin#2.0.2
├── grunt-wiredep#1.7.1
├── ionic#1.7.14
├── jshint-stylish#0.1.5
├── load-grunt-tasks#0.2.1
├── lodash#2.4.2
├── node-sass#3.4.2
└── time-grunt#0.2.10
npm ERR! extraneous: grunt-cli#0.1.13
cordova platform version
Installed platforms: android 4.1.1, ios 4.0.1
Available platforms: amazon-fireos, blackberry10, browser, firefoxos, osx, webos
cordova plugin list
cc.fovea.cordova.purchase 4.0.0 "Purchase"
cordova-plugin-console 1.0.2 "Console"
cordova-plugin-crosswalk-webview 1.5.0 "Crosswalk WebView Engine"
cordova-plugin-inappbrowser 1.2.1 "InAppBrowser"
cordova-plugin-splashscreen 3.1.0 "Splashscreen"
cordova-plugin-statusbar 2.1.2-dev "StatusBar"
ionic-plugin-keyboard 1.0.8 "Keyboard"
Now when i.e. jumping into a "saving-function" based on JavaScript, the app stalls and the modal dialog is not hiding anymore. Here is some sample code:
HTML
<div class="buttons">
<a class="button button-icon icon ion-checkmark-circled" ng-click="save()"></a>
</div>
JavaScript
$scope.save = function ()
{
if ($scope.dosomething.length < 1)
{
$scope.$emit('toast', 'Do not do this!');
return;
}
}
Any idea how to fix this?

cordova-ionic 4.1.0-dev was the "solution". More can be seen here.

Setting up Angular phonecat application on node

Im newbie to Angular and trying to setup angular phonecat application.
I have downloaded the code from here
https://docs.angularjs.org/tutorial/
and installed a nodejs.
Now, I'm not sure how to map the angular application to run with nodejs.
From other links, I see everyone run a webserver.js file but I don't see anything under the scripts directory.
scripts]$ tree .
.
├── private
│   ├── old
│   │   ├── format-json.sh
│   │   ├── goto_step.bat
│   │   ├── goto_step.sh
│   │   ├── README.md
│   │   ├── ScrapeData.js
│   │   └── snapshot.sh
│   ├── push-to-github.sh
│   ├── README.md
│   ├── retag.sh
│   ├── test-all.sh
│   └── update-gh-pages.sh
└── update-repo.sh
How can I run the application in nodejs.

If you look at the page you linked, you are supposed to run npm start in the main directory after installing NPM dependencies with npm install.
EDIT: After checking their package.json, you can actually just run npm start. It will also run dependency installation.