We Keep Coding

Property 'cause' does not exist on type 'Error' in new Vue 3 project

I created a new Vue app via npm init vue#latest with the following setup
I replaced the content of the App.vue file with
<script setup lang="ts">
const e = new Error("something failed");
console.log(e.cause);
</script>
I get the following error
Property 'cause' does not exist on type 'Error'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2022' or later.ts(2550)
Based on the docs the cause property should exist. I added "lib": ["ESNext"], to tsconfig.vitest.json, tsconfig.config.json and tsconfig.app.json ( I don't know which one needs it ). Then I get the error
Cannot find name 'console'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.ts(2584)
so I add it too and it seems to be fine now. It feels wrong to me since this already is a web project and I don't think the basic setup is lacking essential features...
So are there any better solutions for this?
I also tried to set this field inside the tsconfig.json file like so
{
"files": [],
"compilerOptions": {
"lib": ["ESNext", "DOM"],
},
"references": [
{
"path": "./tsconfig.config.json"
},
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
}
]
}
but this didn't work, then cause does not exist on type Error again.
I just want to have access to the cause property of Error inside a new Vue project :)

You need to first set an cause for the error and later you can console log it.
const myError = new Error('Databse status:503')
myError.cause = 'Database failed to connect!'
console.log(myError.cause)

Sencha cmd, closure compiler error: how to locate the offending code

When running Sencha cmd 6.5, and I get the following error:
[ERR] C2001: Closure Compiler Error (Parse error. undefined label "f") -- compression-input:1:4095
How can I locate the code at compression-input:1:4095 ?
This happens when I include a custom javascript file in app.json using:
"js": [
{
"path": "app.js",
"bundle": true
},{
"path": "custom.js",
"includeInBundle": true
}
],
The error disapears when I remove the reference to custom.js in app.json.
If I interpret the error correctly, it means that closure compiler finds an error on line 1, character 4095 of the compression-input. But the first line of custom.js is not such long.
How can I locate the offending code ?
And by the way, what is an undefined label in closure compiler ?

I had the same issue a year ago, and I was told you cannot locate it from the error message.
Assuming that you have already tried to open your uncompiled project directly in the browser, and not getting a syntax error, there's not much you can do except narrowing it down further by splitting the custom.js content in two parts and check these independently.
In my case it was Ext.define where should have been Ext.create, and the syntax error is thrown because usage of Ext.define is rewritten into other commands during generation of the compression-input. Maybe if you look for this specifically, you can find it.

I faced similar problems too.
I disabled compression in app.json file:
"testing": {
"compressor": {
//"type": "closure",
"type": "none",
"warningLevel": "quiet"
},
"output": "...."
}
And I separately checked the output app.js file with the compiler (which can be downloaded):
java -jar closure-compiler-v20210302.jar --js app.js --js_output_file compiled_output.js

Uncaught ReferenceError: webpackJsonpac__name_ is not defined in webpack3/angular 4

Hi I am using Webpack 3 and Angular 4 app. below is my base.config for webpack. I am creating a seperate bundle for a js file in my typescript project.
'entry': {
'main': [
'./src/main.ts'
],
'polyfills': [
'./src/polyfills.ts'
],
'styles': [
'./src/styles/styles.scss'
],
'javascriptlib': [
'./src/javascriptlib.js'
]
},
Also, I am adding that to commonchunks plugin:
new CommonsChunkPlugin({
'name': 'javascriptlib',
'chunks': ['javascriptlib']
}),
In my project folder structure under src I have javascriptlib.js file.
In HTML of my app I am referring that file:
<script type="application/javascript" src="javascriptlib.bundle.js"></script>
After running webpack dev server on app's load time I am getting below error:
VM1261 javascriptlib.bundle.js:2 Uncaught ReferenceError: webpackJsonpac__name_ is not defined
at VM1261 javascriptlib.bundle.js:2
What is wrong here? I don't understand what I am missing here.
My intention here is to use javascriptlib.js in my ts project. javascriptlib.js doesn't have typings and it's very big file to convert to ts due to time constraint. I want to use javascriptlib.js as is. if there is any otherway I can achieve please help me out.
Thanks.

How to properly use JQuery and Bootstrap in latest Angular versions

Yes, this question may be repeated. But I just don't get this setup working in any way.
I tried prettty much everything:
Getting the libraries directly into the index.html through a CDN.
Installing them via NPM and then adding them to angular-cli.json script field.
Importing the modules directly into my components, both with aliased JQuery (import * as $ from 'jquery') and just plain import (import 'jquery').
I tried other setups, like doing the imports in the root component, importing these libraries in various locations... but I don't get this working.
Currently, I need to get working one Bootstrap modal, and one Datepicker component which also works with JQuery, but it's being impossible for me. Sometimes I get the '$ is undefined' and sometimes I get other errors.
So now, I will ask: which is the real solution for this problem in latest Angular versions? How should I make the imports?
Thank you!
EDIT: Current situation:
Added the dependencies to the angular-cli.json file:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],
I try to call the .modal() function that bootstrap has to add to Jquery:
( $('#myModal')).modal({
backdrop: true,
focus: true,
show: true
})
But it just throws...:
SegmentsComponent.html:15 ERROR ReferenceError: $ is not defined
at SegmentsComponent.openModal (segments.component.ts:55)
at Object.eval [as handleEvent] (SegmentsComponent.html:15)
at handleEvent (core.js:13255)
at callWithDebugContext (core.js:14740)
at Object.debugHandleEvent [as handleEvent] (core.js:14327)
at dispatchEvent (core.js:9704)
at eval (core.js:10318)
at HTMLAnchorElement.eval (platform-browser.js:2614)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4620)
Any help?

mmmmm .. it looks very strange .. the only reason why it can gives to you $ is not defined is because you DON'T INCLUDE IT well..
so what i can suggest to you is to DOUBLE check your jquery path in the scripts :[] section ..
REMEMBER .. the path is intended from the src(or your root: entry) folder!
ALSO check the jquery version .. I saw that NPM don't include jquery when you do install bootstrap ... so install jquery manually and get the right version ..
AND in your .ts file .. have you declare var $ : any in the head of your ts file? ...
Hope it helps you!

You need to install Jquery and bootstrap (popper for Bootstrap 4) with package managers or CDN. Your .angular-cli.json file must look like this:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
Make sure these three files exist.

I found the answer, it can be solved by two methods one is included js file in index.html or ou can include like this, also you can include js as well as jquery.
ngOnInit() {
$(document).ready(function () {
$.getScript('../../assets/frontend/js/app.js', function (w) { });
}); }

Add external JS file in component to render images in browser with Angular 2

I make a site with Angular 2 and will add a JavaScript file to the component. This script must render the height of some images equal to the height of the window of the browser.
How could I add this script to the component?
The solutions I found on SO or anywhere else, looks like this:
import './home.component.js';
But it's not what I need! I need this in my home.component.ts file:
#Component({
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
jsUrls: ['./home.component.js']
})
or something...
Update 1: In my site I use Angular CLI and TypeScript.
Update 2: You could find my project on GitHub: https://github.com/WatchFriends/Web

This works, and works well:
In the angular-cli.json file, there is a section, "scripts". Add the path to your script in that array (as a double-quoted string).
Here's a frag from that file:
"mobile": false,
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css",
"styles.css"
],
"scripts": ["./app/my_script.js"],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
my_script is this:
function sayHello ( ) {
console.log ( 'I am saying hello' );
}
Then just call it like you'd expect from anywhere. To beat the annoying "not found" error you may get in your IDE, you can either just do this:
window [ 'sayHello' ] ( );
Or create a utility class that contains a reference to that function, such that you can import the class and call the function as usual (you are basically just providing a framework facade for your "my_script.js" functions).
I tried both, it worked just fine, no errors (you are using ng serve or ng build of course etc).