angular 5 project release - angular5

I'm using angular-cli and implemented nanogallery in my project,
now i'm going to build my project:
if i run
ng build --prod
after uploading file to host it throws these errors in console:
jQuery.Deferred exception: i is not a function R/</</<#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:148258
each#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:22422
R/</<#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:145805
R/<#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:145721
R#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:145629
h#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:108785
l#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:108322
r/this.initiateGallery2#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:237166
t.nanogallery2/i.init#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:263620
t.nanogallery2#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:263679
jQuery.fn.nanogallery2/<#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:271921
each#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:22422
each#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:21097
jQuery.fn.nanogallery2#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:271900
M4vW/j</l.prototype.loadBranches/</<#http://ankiweb.ir/4.1155fed864443988871c.chunk.js:1:19424
u#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:48959
r/</h<#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:49257
ZSR1/</</</u</t.prototype.invokeTask#http://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:19495
onInvokeTask#http://ankiweb.ir/main.36efe7b363f6a9952e89.bundle.js:1:603433
ZSR1/</</</u</t.prototype.invokeTask#http://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:19408
ZSR1/</</</i</e.prototype.runTask#http://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:14671
ZSR1/</</</c</e.invokeTask#http://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:20589
e/this.invoke<#http://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:20474
u/n.args[0]#http://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:35813
undefined
ERROR TypeError: "i is not a function"
Rhttp://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:148258eachhttp://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:22422Rhttp://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:145805Rhttp://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:145721Rhttp://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:145629hhttp://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:108785lhttp://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:108322initiateGallery2http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:237166inithttp://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:263620nanogallery2http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:263679nanogallery2http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:271921eachhttp://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:22422eachhttp://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:21097nanogallery2http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:271900loadBrancheshttp://ankiweb.ir/4.1155fed864443988871c.chunk.js:1:19424uhttp://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:48959hhttp://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:49257invokeTaskhttp://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:19495onInvokeTaskhttp://ankiweb.ir/main.36efe7b363f6a9952e89.bundle.js:1:603433invokeTaskhttp://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:19408runTaskhttp://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:14671invokeTaskhttp://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:20589invokehttp://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:204740http://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:35813
jQuery.Deferred exception: l.branches[u].gallery is undefined M4vW/j</l.prototype.loadBranches/</<#http://ankiweb.ir/4.1155fed864443988871c.chunk.js:1:19176
u#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:48959
r/</h<#http://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:49257
ZSR1/</</</u</t.prototype.invokeTask#http://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:19495
onInvokeTask#http://ankiweb.ir/main.36efe7b363f6a9952e89.bundle.js:1:603433
ZSR1/</</</u</t.prototype.invokeTask#http://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:19408
ZSR1/</</</i</e.prototype.runTask#http://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:14671
ZSR1/</</</c</e.invokeTask#http://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:20589
e/this.invoke<#http://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:20474
u/n.args[0]#http://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:35813
undefined
ERROR TypeError: "l.branches[u].gallery is undefined"
loadBrancheshttp://ankiweb.ir/4.1155fed864443988871c.chunk.js:1:19176uhttp://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:48959hhttp://ankiweb.ir/scripts.0334935c44e8c4e6422d.bundle.js:1:49257invokeTaskhttp://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:19495onInvokeTaskhttp://ankiweb.ir/main.36efe7b363f6a9952e89.bundle.js:1:603433invokeTaskhttp://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:19408runTaskhttp://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:14671invokeTaskhttp://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:20589invokehttp://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:204740http://ankiweb.ir/polyfills.d248127361c9f04ac793.bundle.js:1:35813
every thing work's correctly except "gallery"
but if i run
ng build
every thing is ok include "Gallery"
any body know what's the problem!?
thank you!

I resolved this production issue by referencing the none minified versions of jquery and nanogallery in angular.json
so change this...
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/nanogallery2/dist/jquery.nanogallery2.min.js"
]
to this...
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/nanogallery2/dist/jquery.nanogallery2.js"
]
I don't understand why but the minification and bundling of the already minified nanogallery jquery plugin was causing this issue.

Related

Browserlist config do not include Map polyfill

As I understand Browserlist tool is automatically adds needed polyfills if older browser support required. I'm trying to run ES6 js code in old Android Chrome Webview v.30 but got error:
Uncaught ReferenceError: Map is not defined", source: http://localhost/js/chunk-vendors.ed003893.js
My .browserslistrc set to:
Chrome > 20
Running npx browserslist shows that in includes chrome from 21 version and above. But after building production and running in WebView I got the same error that Map is not defined. Do I need manually add ES6 polyfill?
P.s. I'm using Vuejs 2
Found solution by adding es.map polyfill to babel.config.js file:
presets: [
['#vue/cli-plugin-babel/preset', {
polyfills: [
'es.map',
],
}],
],
}```

MapboxGL with Webpack: "ReferenceError: e is not defined" (in vue-cli app)

I'm developing a vue-cli 2.9.3 app with the webpack template. I have a component which uses MapboxGL, imported with import mapboxgl from 'mapbox-gl;'.
Everything works fine in dev using npm run dev.
I can build the project without issue with npm run build. However, I get the following error on the console when navigating to the component using MapboxGL:
ReferenceError: e is not defined
The DevTools from Firefox or Chrome are unable to make the link to the sourcemap (.js.map) files, so the error message is not very helpful.
I was able to make the bundle work by using devtool: eval-source-map instead of devtool: source-map in ./config/index.js, but the bundle size becomes > 8Mb which is not acceptable and it is not recommended in production.
I have also tried without sourcemaps but I got the same cryptic error.
How can I debug this error in the packaged bundle? I would like to at least be able to see where the error comes from.
It seems that it is a known bug with MapboxGL and Webpack.
It can be solved by adding the following in ./build/webpack.prod.conf.js:
module: {
...
noParse: /(mapbox-gl)\.js$/,
...
}

aurelia-cli Unexpected token "<" error when loading plugin

Getting an error trying to load aurelia-dragula (and other plugins) from aurelia-cli.
cli
au-install aurelia-dragula
aurelia.json
{
"name": "aurelia-dragula",
"path": "../node_modules/aurelia-dragula/dist/amd",
"main": "index"
},
...
.js
import { Dragula } from 'aurelia-dragula';
Error :
vendor-bundle.js:23616 ERROR [app-router] Error: Unexpected token <
Evaluating http://localhost:9000/aurelia-dragula
(it's grabbing the index.html in wwwroot folder and failing on parsing the "DocType" tag)
First thing I'd recommend you to do is upgrade aurelia-cli to the latest version (currently 0.33.1).
The unexpected token < is a silly error but it simply means that a non-existing file/url was requested from server (aurelia-dragula in your case). Server returns a standard 404 html page which the app then tries to parse as javascript, and that doesn't work.
Your aurelia.json looks fine (tested it locally on a fresh aurelia-cli project) so it's likely to be either a version or caching issue. After upgrading aurelia-cli I'd recommend deleting the lock files and clearing node_modules, followed by a fresh install.

Upgrade to react-native 0.16 error

I upgraded my app from react-native 0.15 to 0.16 but after that I'm getting an error and I don't know how to solve it.
TypeError:undefined is not an object (evaluating 'GLOBAL.Text={
get defaultProps(){
throw getInvalidGlobalUseError('Text')}}')
In Chrome Debugger:
Uncaught Error: Uncaught TypeError: Cannot set property 'Text' of undefined
Thanks
OBS: I'm running on Android.
I notice that changing app name solves the problem, I'm using Evently as app name today. I tried to recreate my virtual machine but didn't solve it.
In my case, I was able to narrow the cause down to one item in my .babelrc file:
{
"presets": ["es2015"]
}
As soon as I removed that and restarted the packager (making sure to also use the --reset-cache flag), I stopped getting the error.
Update 2:
It looks like React Native is making some changes to their .babelrc in version 0.20.0. So, if you are using that version or newer, you should follow the instructions at: https://github.com/facebook/react-native/tree/master/babel-preset in order to specify your .babelrc settings.
Update:
I've narrowed this down further to transform-es2015-modules-commonjs, which React-Native sets some options on, specifically {"strict": false, "allowTopLevelThis": true}. The es2015 preset does not set this option, and it seems that the React-Native .babelrc does not override it. If you want to use es6 modules and transform them to commonjs, you'll need to put the following in your .babelrc:
{
"plugins": [
["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}]
]
}
Note, Babel 6, which I updated to along with react-native 0.16.0, no longer contains any transforms by default. What I didn't initially realize is that the React-Native packager provides most of the transforms you might ever need (listed in their docs at: https://facebook.github.io/react-native/docs/javascript-environment.html#javascript-syntax-transformers), and I'm thinking that the "es2015" plugin interferes with some of those transformers.
I also tried using "babel-preset-react" (http://babeljs.io/docs/plugins/preset-react/), and that plugin did not seem to cause any errors.
I solve the problem. I think it was because permissions in project folder. I ran chown in my folder to correct the permissions problems and now all are working.
Thanks
In my case the problem was a rogue .babelrc two folders up (my root code folder); I had initiated a yeoman generator to scaffold out a new project using babel-6...accidentally running yeoman from the root code folder. Apparently babel traversed upwards from my project folders until it hit this .babelrc which borked the react-native babel configs...
^ this was originally an edit to my initial answer, which was deleted WHILE I WAS UPDATING IT

How do you spin up a new spine app using the spine.app cli?

I'm attempting to use the spine.app cli and I'm encountering a couple of errors and I'm uncertain what the root cause actually is.
The guide found at: http://spinejs.com/docs/started gives these steps
spine app my-app
cd my-app
npm install .
hem server
following these steps, initially yields this error on the terminal:
Cannot find module: es5-shimify. Have you run `npm install .` ?
Investigating, it seems es5-shimify has been deprecated in favor of es5-shim, so my initial inclination was to replace the dependency to es5-shim. So I updated setup.coffee to require('es5-shim'), and I updated the referenced slug.json module and restarted the server. This seems to get me a little further, but still produces an error ( though not in the terminal, instead in the chrome console )
Uncaught TypeError: Property 'jQuery' of object [object Object] is not a function
This appears to be occurring on line 8 of public/index.html. I did some debugging here and it appears that require('jqueryify') is returning undefined, and I'm not certain what the expected result is. Any guidance on the right way to approach this process or perhaps information on what the root issue might be would be greatly appreciated.
Use the latest version try again.
The package.json as following
{
"name": "app",
"version": "0.0.1",
"dependencies": {
"spine": "~1.3.0"
}
}
all others dependencies has been removed,and it works for me.