Develop Reference

Angular7 External Jquery Plugin - Unexpected Identifier

I'm having a hard time converting a jquery template to angular7. The original template has its own assets folder that contains several .js files that I need to load in order to get it to work.
When I start the application up with: ng serve I get the following error in the browser:
import $ from 'jquery';
Uncaught SyntaxError: Unexpected identifier
tsconfig.json
"types": [ "jquery" ],
angular.json, under scripts
"scripts": ["./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.js",
"./src/assets/js/SEVERAL_JS_FILES.js"]
package.json
"dependencies": {
"#angular/animations": "^5.2.0",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "^5.2.0",
"#angular/http": "^5.2.0",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"bootstrap": "^4.1.3",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"tslib": "^1.9.0",
"zone.js": "^0.8.19",
"popper.js": "^1.14.4",
"jquery": "^3.3.1",
},
Could someone help me to understand this better? I was thinking that I might use Babel or a separate package to handle this compilation.
Thanks.

I've managed to find a solution. It's quite simple but as Adrian commented earlier it's not advised. Thus said, I'm going to use Angular Ready plugins but just in case, here's the answer.
1 - Install Jquery.
npm install jquery — save
2 - Load in your angular.json or angular-cli.json under scripts.
"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]
3 - Download the Jquery plugin that you want via npm.
4 - Load the Jquery plugin min.js in your angular.json or angular-cli.json
5 - Consume your script in an external js file, not inside your typescript.

Issue after react native expo eject: No visible #interface for 'RCTAsyncLocalStorage' declares the selector 'initWithStorageDirectory:'

I just ejected from expo and everything went well but I'm now getting the following error when trying to run my ios app in Xcode :
No visible #interface for 'RCTAsyncLocalStorage' declares the selector
'initWithStorageDirectory:'
Here is part of my package.json
"dependencies": {
"axios": "^0.17.1",
"expo": "^23.0.6",
"lodash": "^4.17.4",
"moment": "^2.20.1",
"react": "16.0.0",
"react-native": "0.50.3",
"react-native-cloudinary": "^1.0.1",
"react-native-communications": "^2.2.1",
"react-native-elements": "^0.18.5",
"react-native-fetch-blob": "^0.10.8",
"react-native-gifted-chat": "^0.3.0",
"react-native-image-picker": "^0.26.7",
"react-native-image-to-base64": "^0.1.0",
"react-native-modal-datetime-picker": "^4.13.0",
"react-native-router-flux": "^4.0.0-beta.24",
"react-navigation": "^1.0.0-beta.22",
"redux-thunk": "^2.2.0"
}

I actually managed to fix it, this is how:
I updated my "react-native" dependency to the latest one available:
"https://github.com/expo/react-native/archive/sdk-23.0.0.tar.gz"
I removed all dependency that I had installed by mistake in my previous expo app that actually required react-native link using the npm uninstall --save command:
react-native-image-to-base64, react-native-cloudinary
Then I also had to remove them from the General > Linked Frameworks and Libraries
Now it works! I'm having issues with the Facebook Login now but at least it doesn't crash my app.
Good luck to you.

I feel really dumb for not realizing it sooner, but I had this issue when I forgot to run yarn after switching branches with a different Expo version.
Hope that saves someone else some debugging.

How to ditch Babel from Vue build chain?

I'm developing a Vue app solely for Chrome, which leads me to believe (please correct me if wrong) that I can write native ES6 and don't need to transpile.
The Vue CLI generates a package.json like this:
"devDependencies": {
"babel-core": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babelify": "^7.2.0",
"browserify": "^13.0.1",
"browserify-hmr": "^0.3.1",
"cross-env": "^1.0.6",
"envify": "^3.4.1",
"http-server": "^0.9.0",
"npm-run-all": "^2.1.2",
"uglify-js": "^2.5.0",
"vueify": "^9.1.0",
"watchify": "^3.4.0"
},
"browserify": {
"transform": [
"vueify",
"babelify"
]
}
But if I remove the 4 references to Babel, I get compile errors on my very first file. So really I just have two questions:
1) Am I correct in thinking that I can ditch Babel?
2) How do I do it?

I don't think browserify can handle ES6 imports without Babel. Usually, you could just get away with using something like gulp to uglify and minify without transpiling, because browserify is intended to allow require to be used in the browser, but if the browser supports import then you don't really need it. Unfortunately, this means that you won't be able to use vueify, so you lose the ability to use single file components, so I guess it's down to whether you think that trade-off is acceptable.
You may be interested in this discussion on GitHub: https://github.com/substack/node-browserify/issues/1186

setup.js is deleted in react-boilerplate when running npm run setup

I have a very strange problem. I have cloned the react-boilerplate repository from here:
https://github.com/mxstbr/react-boilerplate
I add the following dependencies:
"body-parser": "^1.15.0",
"cors": "^2.7.1",
"feathers-client": "^1.6.1",
"feathers-rest": "^1.5.0",
"material-ui": "^0.16.0-rc2",
"node-uuid": "^1.4.7",
"react-json-viewer": "^1.1.0",
"request-promise": "^4.1.1",
"rest-client": "^0.1.5",
"socket.io-client": "^1.4.8"
When I run 'npm run setup' the file internals/scripts/setup.js is deleted which means that I get an error the next time I run 'npm run setup'.
Any suggestion as to how this can happen will be appreciated.

It turns out that
npm run setup
is only intended to run once. Afterwards I assume I should
run npm install
I found out after reading this article:
https://github.com/mxstbr/react-boilerplate/issues/339

In the boiler plate you are working there will be a file setup.js that will be missing in your boilerplate and the path where it should be will be provided in the error, Copy that setup.js file from original boiler plate and paste there where it is missing. This solution worked for me perfectly

Why is global.Rx undefined when RxJs is linked to via script tag?

I am setting up an AngularJS 2 app that is bundled using webpack. The output is currently 2 files: app.bundle.js and vendor.bundle.js. The vendor.bundle.js contains my 3rd party dependencies and is around 1.8 MB currently (unminified). The dependencies in my package.json are given below.
"dependencies": {
"#angular/common": "2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "2.0.0-rc.1",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/platform-browser-dynamic": "2.0.0-rc.1",
"#angular/router": "2.0.0-rc.1",
"#angular/router-deprecated": "2.0.0-rc.1",
"#angular/upgrade": "2.0.0-rc.1",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12"
},
1.8 MB seems really big to me and would have a significant impact on the user experience as the app will only load for the user after several MB of data have been downloaded. For this reason I want to externalise my 3rd party dependencies to CDN URLs.
However, AngularJS 2.0.0-RC.1 files are not currently available on any CDN that I looked up (I tried cdnjs and Google). As an interim measure I thought I could just link to the bundled JS files in my node_modules directory, like so:
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.28/system.src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.28/system-polyfills.src.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/#angular/core/core.umd.js"></script>
I'm assuming these are the correct files to link to - particularly the core.umd.js. The structure in node_modules between 2.0.0-beta.17 and 2.0.0-RC.1 seems radically different, so whatever examples I could find on Google appear to no longer apply.
Also, I couldn't find angular2-polyfills in the RC package but without it the browser reported various errors, so I had to link to the beta-17 version. Is there a reason why it doesn't exist in RC?
The problem I'm left with is that global.Rx is undefined. I can see that global is set to the window object but Rx is undefined on it. What am I doing wrong?
In general, is it advisable to externalise all 3rd party dependencies to reduce overhead and take advantage of browser-caching of CDN-resources, or is it better to take the hit and just bundle them into your app so that dependency management is a bit cleaner and the window object isn't polluted?