i have written a test case which aims to ensure that certain div is getting rendered which is wrapped in ng-container but i am unable to get that element using id,
and when i tried by creating a div inside that ng-contanier and gave id to it then it was working fine .
so the problem is i am unable to get element by id when the element is ng-container[image of test case]
(https://i.sstaticimage of html file.net/BHSB0RGz.png)

hacky solution

its running if i am adding a new div and accessing that div using id selector but i dont want to add any new div

So, I am making a very small extension, basically once you press a button inside the extension popup, an alert is sent (“alert(“ALERT”);”). Very simple.

The problem is that I have tried this on Youtube and couple of certain websites and they have worked, but on Twitch.tv this does not work. The extension is giving me the error:

• “Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist. popup.html:0”

I have read multiple StackOverflow problems regarding this, but for myself they have not helped. What I believe the problem is that Twitch is blocking my content.js from executing. Like I said before, my extensions has worked on Youtube and multiple other sites.

Popup.js:

document.addEventListener('DOMContentLoaded', function () {
    var alert_button = document.getElementById("alertbutton");

alert_button.addEventListener("click", function() {
    chrome.tabs.query({ active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, { action: 'sendalerttt'})
    });
});

content.js:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.action === 'sendalerttt') {
        alert("LOL");
        sendResponse({ message: 'Alert Sent.' });
        console.log("Alert Sent")    
    }
});

I tried changing everything in the popup.html, but after an hour I read that its just horrible Chrome Extension error.

I have tried reading about “Chrome Extension Twitch”, this leads to Twitch API articles but these articles talk about twitch’s inner code that is used to create automated chat moderation such as Nightbot.

I have tried changing my Manifest, my current manifest is like this:

{
  "manifest_version": 3,
  "name": "Alert Sender",
  "version": "1.0.0",
  "description": "Send a simple JS Alert!",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "service_worker": "background.js" // There is nothing in my background.js file btw
  },
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["*://*.twitch.tv/*"],
      "js": ["content.js"]
    }
  ]
}

I currently have this piece of react code to listen to call reconnectedCallback.

import { useEffect, useState } from "react";
import usePrevious from "../usePrevious";

  const useTabVisible = (reconnectedCallback: () => void) => {
    const [visible, setVisible] = useState<boolean>();
    const prevVisible = usePrevious(visible);

    useEffect(() => {
      const handleVisibilityChange = () => {
        setVisible(document.visibilityState === "visible");
      };

      window.addEventListener("visibilitychange", handleVisibilityChange);
      return () => {
        window.removeEventListener("visibilitychange", handleVisibilityChange);
      };
    }, []);

    useEffect(() => {
      if (prevVisible === false && visible) {
        reconnectedCallback();
      }
    }, [prevVisible, reconnectedCallback, visible]);
  };

  export default useTabVisible;

This part of the code
window.addEventListener("visibilitychange", handleVisibilityChange);
listens to visibility changes. So when I switch to another tab of google chrome and come back to my app’s tab, reconnectedCallback is called.

However, I also want the app to be mobile friendly, so if i am on safari on my iphone on my site, I leave it on the site for a while, switch to a different app like Subway Surfer or Whatsapp or to my phone home screen, when I switch back, I want to call reconnectedCallback but this visibilitychange is not triggered.

What event would listen to inter-app switches for mobile, especially when the safari ? I tried focus and blur but they both dont work. And what is term called when a site has been left stale for some time already?

This a solution, not a problem, but I’m still ranking in stackoverflow. When you paste this code, it will disappear the warning of “Third-party cookie will be blocked. Learn more in the Issues tab.”

document.cookie = "myCookie=cookieValue; SameSite=None; Secure";

Make disappear the warnings that google sends.

I’m trying to download a PDF file from my app when a button is clicked and open it immediately after the download completes. I’m using expo-file-system to save the downloaded file and I’m using expo-linking to trigger the opening of the file after it’s downloaded for iOS device. I’m also using the expo-intent-launcher to trigger the opening of the file on an android device. This works perfectly for android but this doesn’t work on iOS and I’ve been on this for hours. I’m unsure what I’m not doing right. My code snippets is shown below:

import * as FileSystem from "expo-file-system";
import * as Linking from "expo-linking";
import * as IntentLauncher from "expo-intent-launcher";
import { Button } from "react-native"

export default function PdfDocumentsScreen() {
   const { isAndroid } = useDevicePlatform();

   const downloadPDF = async () => {
    try {
      const uri =
        "https://${name}.s3.amazonaws.com/${bucket_name}/Certificate1.pdf";

      const fileUri = FileSystem.documentDirectory + "Certificate.pdf";

      const downloadObject = FileSystem.createDownloadResumable(uri, fileUri);

      const response = await downloadObject.downloadAsync();
      console.log(response);

      if (response?.status === 200) {
        openPDF(fileUri);
      } else {
        console.error("Failed to download the PDF");
      }
    } catch (error) {
      console.error("Error downloading the PDF: ", error);
    }
  };

 const openPDF = async (fileUri: string) => {
    try {
      const contentUri = await FileSystem.getContentUriAsync(fileUri);
      console.log("Content URI: ", contentUri);

      if (!isAndroid) {
        if (await Linking.canOpenURL(contentUri)) {
          Linking.openURL(contentUri);
        }
      } else {
        IntentLauncher.startActivityAsync("android.intent.action.VIEW", {
          data: contentUri,
          flags: 1,
        });
      }
    } catch (error) {
      console.error("Error opening the PDF: ", error);
    }
  };

  return (
    <Button title="Download PDF" onPress={downloadPDF} />
  )
}

{/* nav.js */}
<li className={"li-text"}>사이트 소개</li>

{/* info.js */}
<div className="top" id='here'> 
</div>

If you click

I’m encountering an issue with a custom tooltip component in my React application. The tooltip contains a set of radio buttons, and whenever I click on a radio button, the tooltip closes. However, I want the tooltip to remain open so that users can make multiple selections without the tooltip closing.

I’ve tried using event.stopPropagation() in the handleChange function to prevent the click event from bubbling up to the parent elements, including the tooltip. While this prevents the tooltip from closing on the first click, it still closes after clicking on a radio button multiple times.

Here’s a simplified version of my components:

import React from 'react';
import styled from '@emotion/styled';
import { Box, FormControlLabel, Grid, Radio, RadioGroup, Tooltip, TooltipProps, Typography, tooltipClasses,} from '@mui/material';

const CustomWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
  <Tooltip {...props} classes={{ popper: className }} />
))({
  [`& .${tooltipClasses.tooltip}`]: {
    maxWidth: 750,
    maxHeight: 250,
    overflowY: 'auto',
    border: '1px solid #dadde9',
    borderRadius: 10,
    backgroundColor: 'white',
    boxShadow: '10px 10px 20px rgba(0, 0, 0, 0.5)',
    '&::-webkit-scrollbar': {
      width: '0.5em',
    },
    '&::-webkit-scrollbar-thumb': {
      backgroundColor: 'grey',
    },
    '&::-webkit-scrollbar-track': {
      backgroundColor: 'white',
    },
  },
});

interface ShipModelProps {
  handleCellClick: () => void;
  howManyToShip: number;
}

const ShipModel = ({ handleCellClick, howManyToShip }: ShipModelProps) => {
  const [selectedValue, setSelectedValue] = React.useState('Ocean');  
  
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.stopPropagation();
    setSelectedValue(event.target.value);
  };

  const tooltipContent = (
    <Box component={'div'} className="text-black flex flex-col items-center" width={300}>
      <h1 className="text-lg font-bold">Ship Model</h1>
      <Box component={'div'}>
        <h4 className="text-sm opacity-50">Shipment Type</h4>
        <RadioGroup aria-label="ship-model" value={selectedValue} onChange={handleChange}>
          <Grid container spacing={2}>
            <Grid item xs={6}>
              <FormControlLabel
                value="Ocean"
                control={<Radio />}
                label={<Typography variant="body2">Ocean</Typography>}
              />
              <FormControlLabel value="Air" control={<Radio />} label={<Typography variant="body2">Air</Typography>} />
            </Grid>
            <Grid item xs={6}>
              <FormControlLabel
                value="Ocean Express"
                control={<Radio />}
                label={<Typography variant="body2">Ocean Express</Typography>}
              />
              <FormControlLabel
                value="Air Express"
                control={<Radio />}
                label={<Typography variant="body2">Air Express</Typography>}
              />
            </Grid>
          </Grid>
        </RadioGroup>
      </Box>
      <Box component={'div'} className="border-t-2" width={'100%'}>
        <h4 className="text-sm opacity-50">Optional</h4>
        <FormControlLabel control={<Radio />} label={<Typography variant="body2">Optional</Typography>} />
      </Box>
    </Box>
  );

  return (
    <CustomWidthTooltip title={tooltipContent} onClick={handleCellClick}>
      <Box component={'div'}>
        {howManyToShip}
      </Box>
    </CustomWidthTooltip>
  );
};

export default ShipModel;

via GIPHY

I want the tooltip to remain open even after clicking on a radio button multiple times. How can I achieve this behavior? Any suggestions or insights would be greatly appreciated.
Thank you!

const displayWrapper = document.getElementById('displayWrapper');
const resizeHandle = document.getElementById('resizeHandle');

let startX = 0;
let startWidth = 0;

function startDrag(e) {
  startX = e.clientX;
  startWidth = parseInt(document.defaultView.getComputedStyle(displayWrapper).width, 10);
  document.documentElement.addEventListener('mousemove', drag);
  document.documentElement.addEventListener('mouseup', stopDrag);
}

function drag(e) {
  const newWidth = startWidth + (e.clientX - startX);
  displayWrapper.style.width = newWidth + 'px';
}

function stopDrag() {
  document.documentElement.removeEventListener('mousemove', drag);
  document.documentElement.removeEventListener('mouseup', stopDrag);
}

resizeHandle.addEventListener('mousedown', startDrag);

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.container {
  display: grid;
  grid-template-columns: minmax(40px, 80px) 0.8fr 2fr;
  grid-template-rows: auto 1fr 1fr 1fr;
  height: 100vh;
}

.sidebar {
  background-color: white;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
}

.titles {
  background-color: #f0f0f0;
  border: 1px solid black;
  height: 40vh;
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  overflow: hidden;
}

.playlist {
  background-color: #f0f0f0;
  border: 1px solid black;
  grid-column: 3 / 4;
  grid-row: 2 / 4;
  height: 60vh;
  overflow: hidden;
}

.player {
  background-color: #f0f0f0;
  border: 1px solid black;
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}

.display-wrapper {
  overflow: hidden;
  display: flex;
  justify-content: center;
  resize: horizontal;
  min-width: 200px;
  max-width: calc(100% - 80px);
  border: 1px solid red;
}

.display {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.display img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resize-handle {
  width: 10px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  cursor: ew-resize;
  background: transparent;
}

.menu-items {
  list-style: none;
  justify-self: center;
  margin: 0;
  padding: 0;
}

.menu-item {
  width: auto;
  align-self: center;
}

svg {
  cursor: pointer;
  width: 33px;
  height: auto;
  display: block;
  margin: auto;
  margin-top: 11vh;
  fill: gray;
}

svg#heart:hover {
  fill: rgb(240, 86, 86);
}

svg:hover {
  transform: scale(1.2);
  transition: all 0.3s;
}

svg#home:hover {
  fill: orange;
}

svg#music {
  border: 1px solid gray;
  border-radius: 5px;
  padding: 1px
}

svg#music:hover {
  fill: rgb(253, 179, 119);
  border-color: rgb(253, 179, 119);
}

svg#search:hover {
  fill: rgb(63, 141, 141);
}

svg#add:hover {
  fill: rgb(46, 46, 46);
}

.logo {
  justify-self: start;
  align-self: start;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio Player</title>
</head>

<body>
  <div class="container">
    <div class="sidebar">
      <ul class="menu-items">
        <li class="menu-item">
          <img src="./src/icons/logo.png" class="logo" alt="logo">
        </li>
        <li class="menu-item">
          <svg id="home" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m9.08116 2.78259c1.71624-1.33679 4.12134-1.33679 5.83764 0l5 3.89445c1.1555.90001 1.8312 2.28276 1.8312 3.74736v7.0454c0 2.6234-2.1267 4.75-4.75 4.75h-10.00006c-2.62335 0-4.75-2.1266-4.75-4.75v-7.0453c0-1.4647.67569-2.84745 1.83119-3.74746zm.92174 1.18339c1.1743-.91464 2.8199-.91464 3.9942 0l5 3.89445c.7906.6158 1.2529 1.56189 1.2529 2.56397v7.0454c0 1.795-1.4551 3.25-3.25 3.25h-1.25v-4.25c0-1.7949-1.4551-3.25-3.25-3.25h-1c-1.79495 0-3.25003 1.4551-3.25003 3.25v4.25h-1.25003c-1.79493 0-3.25-1.455-3.25-3.25v-7.0453c0-1.00218.46231-1.94827 1.25292-2.56406zm1.4971 10.75382c-.9665 0-1.75003.7835-1.75003 1.75v4.25h4.50003v-4.25c0-.9665-.7835-1.75-1.75-1.75z" fill-rule="evenodd"></path>
                    </svg>
        </li>
        <li class="menu-item">
          <svg id="music" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g id="Layer_2" data-name="Layer 2"><path d="m24.5 61.5a10.5 10.5 0 1 1 10.5-10.5 10.512 10.512 0 0 1 -10.5 10.5zm0-18a7.5 7.5 0 1 0 7.5 7.5 7.508 7.508 0 0 0 -7.5-7.5z" fill-rule="evenodd"></path><path d="m33.5 52.5a1.5 1.5 0 0 1 -1.5-1.5v-40.25a6.115 6.115 0 0 1 3.238-5.4 6.016 6.016 0 0 1 6.269.306c3.875 2.587 8.493 7.698 8.493 17.344a1.5 1.5 0 0 1 -3 0c0-6.681-2.409-11.677-7.159-14.851a3.117 3.117 0 0 0 -4.841 2.601v40.25a1.5 1.5 0 0 1 -1.5 1.5z" fill-rule="evenodd"></path></g>
                    </svg>
        </li>
        <li class="menu-item">
          <svg id="search" viewBox="0 0 1800 1800" xmlns="http://www.w3.org/2000/svg"><g><path d="m1715.514 1630.048-368.416-368.402c-17.967-17.977-41.866-27.874-67.281-27.874-13.782 0-27.071 3.003-39.257 8.527l-94.596-94.594c133.584-119.751 217.789-293.534 217.789-486.634 0-360.375-293.193-653.561-653.572-653.561-360.38 0-653.568 293.186-653.568 653.561 0 360.382 293.188 653.57 653.568 653.57 146.069 0 281.087-48.174 390.033-129.453l96.854 96.862c-8.041 14.144-12.399 30.159-12.399 46.869 0 25.42 9.897 49.314 27.868 67.283l368.407 368.423c17.972 17.968 41.862 27.865 67.283 27.865 25.42 0 49.318-9.902 67.29-27.874 17.972-17.971 27.869-41.867 27.869-67.287.001-25.415-9.897-49.309-27.872-67.281zm-1596.968-968.977c0-326.224 265.405-591.627 591.634-591.627s591.638 265.403 591.638 591.627c0 326.231-265.408 591.636-591.638 591.636-326.228 0-591.634-265.405-591.634-591.636zm1553.174 1059.752c-6.272 6.277-14.62 9.733-23.492 9.733-8.879 0-17.222-3.456-23.489-9.726l-368.407-368.424c-6.272-6.272-9.728-14.614-9.728-23.488 0-8.873 3.455-17.215 9.732-23.488 6.269-6.273 14.605-9.726 23.48-9.726 8.869 0 17.211 3.452 23.488 9.733l368.415 368.406c6.276 6.273 9.733 14.615 9.733 23.484.001 8.876-3.456 17.22-9.732 23.496z"></path><path d="m733.941 187.121c145.201 0 427.813 158.624 427.813 449.396 0 17.104 13.863 30.967 30.968 30.967 17.104 0 30.968-13.863 30.968-30.967 0-145.848-64.515-281.118-181.66-380.892-93.039-79.241-213.969-130.439-308.088-130.439-17.104 0-30.967 13.864-30.967 30.967-.001 17.104 13.863 30.968 30.966 30.968z"></path></g>
                    </svg>
        </li>
        <li class="menu-item">
          <svg version="1.1" id="heart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M466.706,66.173c-29.609-29.609-69.224-45.914-111.56-45.914c-36.448,0-70.876,12.088-98.643,34.342 c-28.166-22.254-62.637-34.342-98.729-34.342c-42.532,0-82.252,16.312-111.86,45.914C16.305,95.776,0,135.398,0,177.727 c0,42.335,16.305,81.951,45.914,111.553l197.065,197.065c3.591,3.598,8.306,5.396,13.021,5.396c4.703,0,9.405-1.793,13.003-5.372 l197.224-196.623C495.75,259.561,512,219.89,512,178.034C512,135.791,495.965,96.12,466.706,66.173z M440.056,263.821 L256.018,447.294L71.956,263.238c-22.647-22.653-35.122-53.023-35.122-85.511s12.475-62.858,35.122-85.511 c22.653-22.647,53.128-35.122,85.818-35.122c32.169,0,62.705,12.53,85.966,35.269c7.207,7.054,18.767,6.992,25.895-0.147 c22.653-22.647,53.017-35.122,85.511-35.122c32.494,0,62.858,12.475,85.358,34.974c22.352,22.868,34.661,53.398,34.661,85.966 C475.165,210.209,462.642,240.738,440.056,263.821z"></path></g></g></svg>
        </li>
        <li class="menu-item">
          <svg id="add" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m408 256a12 12 0 0 1 -12 12h-128v128a12 12 0 0 1 -24 0v-128h-128a12 12 0 0 1 0-24h128v-128a12 12 0 0 1 24 0v128h128a12 12 0 0 1 12 12zm104 0c0 141.159-114.841 256-256 256s-256-114.841-256-256 114.841-256 256-256 256 114.841 256 256zm-24 0c0-127.925-104.075-232-232-232s-232 104.075-232 232 104.075 232 232 232 232-104.075 232-232z"></path></svg>
        </li>
      </ul>
    </div>
    <div class="display-wrapper" id="displayWrapper">
      <div class="display">
        <img src="../df207206bcec5091fc980cbefa300f0a.jpg">
        <div class="resize-handle" id="resizeHandle"></div>
      </div>
    </div>
    <div class="right-sidebar">
      <div class="titles">
        titles
      </div>
      <div class="playlist">
        playlist
      </div>
    </div>
    <div class="player" style="padding: 10px; border: 1px solid black;" hidden>
      player
    </div>
  </div>
</body>

</html>

I want to make a layout using a grid, but I ran into a problem that I need to expand/shrink the image (script at the top) and the container with this image (.display-wrapper) must be close to the container with .titles and .playlist (.right-sidebar). How can I implement this?

I tried to use AI to solve this problem, but they didn’t give any useful advice

Angular Build getting failed with below issues

`√ Browser application bundle generation complete.

Initial chunk files   | Names         |  Raw size
styles.css, styles.js | styles        | 531.96 kB |
scripts.js            | scripts       | 282.56 kB |
polyfills.js          | polyfills     | 228.53 kB |
vendor.js             | vendor        | 227.83 kB |
runtime.js            | runtime       |   6.52 kB |
main.js               | main          | 876 bytes |

                      | Initial total |   1.25 MB

Build at: 2024-05-16T10:20:58.313Z - Hash: 1f386b80c55bca7b - Time: 42309ms

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Maximum call stack size exceeded

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Maximum call stack size exceeded



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
`

tsconfig.app.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "lib": [
      "es2022",
      "dom"
    ],
    "resolveJsonModule": true,
    "useDefineForClassFields": false,
    "skipLibCheck": true
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "strictPropertyInitialization": false
  }
}

tsconfig.spec.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jasmine"
    ]
  },
  "files": [
    "src/test.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

Package.json

{
  "name": "webaccess-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.9",
    "@angular/cdk": "^17.2.0",
    "@angular/common": "^17.3.9",
    "@angular/compiler": "^17.2.0",
    "@angular/core": "^17.3.9",
    "@angular/forms": "^17.2.0",
    "@angular/material": "^17.2.0",
    "@angular/platform-browser": "^17.2.0",
    "@angular/platform-browser-dynamic": "^17.2.0",
    "@angular/router": "^17.2.0",
    "@ngtools/webpack": "^17.3.7",
    "@types/quill": "^1.3.10",
    "bootstrap": "^4.6.2",
    "echarts": "^5.5.0",
    "jquery": "^3.7.1",
    "jsencrypt": "^3.3.2",
    "ng-click-outside": "^8.0.0",
    "ng-otp-input": "^1.9.3",
    "ng-sidebar": "^9.4.3",
    "ngx-mask": "^12.0.0",
    "ngx-quill": "^25.3.2",
    "ngx-smart-popover": "^1.5.0",
    "ngx-toastr": "^13.2.1",
    "quill": "^2.0.2",
    "rxjs": "^7.8.1",
    "tslib": "^2.6.2",
    "xlsx": "^0.18.5",
    "xng-breadcrumb": "^11.0.0",
    "zone.js": "~0.14.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.2.0",
    "@angular/cli": "^17.2.0",
    "@angular/compiler-cli": "^17.2.0",
    "@types/jasmine": "^3.10.18",
    "@types/jquery": "^3.5.30",
    "@types/node": "^12.20.55",
    "ajv": "^8.12.0",
    "codelyzer": "^6.0.2",
    "jasmine-core": "~5.1.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.4.3",
    "karma-chrome-launcher": "^3.2.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~5.3.2"
  }
}

Have tried the below thing to build/run the application locally

1. we have migrated the application from angular 14 to 17
2. while tring to build the application getting this error

some one please review these error statements and config details and please do the needfull

Thanks Regards

Ajith

So I want use this code (.js file):
It is just a static javascript code

const { exportTraceState } = require("next/dist/trace");

const toggleBtn = document.querySelector('.toggle_btn')
 const toggleBtnIcon = document.querySelector('.toggle_btn')
 const dropDownMenu = document.querySelector('.dropdown_menu')
 

     toggleBtn.onclick = function(){
          dropDownMenu.classList.toggle('open')
          const isOpen = dropDownMenu.classList.contains('open')

          toggleBtnIcon.classList = isOpen
          ? 'fa-solid fa-xmark'
          : 'fa-solid fa-bars'
      }

in this code (.jsx file):
Where can I use the javascript code or how can I implement it?
Because <script> does not work either and the code needs to be a in a server state because of the next auth.

import Image from "next/image";
import Head from "next/head";
import Script from "next/script";
import { UserButton, auth } from "@clerk/nextjs";
import Link from "next/link";

export default function Home() {
 const {userId } = auth();
 console.log(userId);
 
 return (
     <>
     <meta charSet="UTF-8" />
     <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="styles.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <title>Responsive Navbar</title>
     <div className="body">
          <nav>
               <div className="navbar">
                    <div className="logo"><a href="#">TradeProject</a></div>
               
               <ul className="links">
                    <li><a href="#hero">Home</a></li>
                    <li><a href="#about">About </a></li>
                    <li><a href="#features">Features</a></li>
                    <li><a href="#pricing">Pricing</a></li>
               </ul>
               <a href="/sign-up" className="action_btn">Get Started</a>
               <div className="toggle_btn">
               <i class="fa-solid fa-bars"></i>
               </div>
               </div>
               <div className="dropdown_menu">
               <li><a href="#hero">Home</a></li>
                    <li><a href="#about">About </a></li>
                    <li><a href="#features">Features</a></li>
                    <li><a href="#pricing">Pricing</a></li>
                    <li><a href="/sign-up" className="action_btn">Get Started</a></li>
               </div>
          </nav>
     </div>

   </>
 );
}

That both code work together without any errors

A friend and I are working on a new website. Here’s the dev site as it currently stands on a publicly available staging server. If you look at one of the sourced js files (home.carousel.js), you’ll see (line 80) a console.log command which attempts to print out the length of a portion of a complex data structure that happens to be an array (the portion is an array).

console.log(hCarousel.logos.length);

The data we are working with is fetched from the server via AJAX and stored in memory under the hCarousel object (lines 47-83). Here’s the rub. Executing the above console.log() command in the console returns an integer as expected.

Executing the same command on line 80 of the code returns Undefined (you should be able to observe this yourself by simply loading the . Never mind that a console.log(hCarousel) (line 79) works just fine, and shows the data structure as expected. For whatever reason, in the context of the home.carousel.js file, we are unable to dereference this object as it seems we should be able to do.

Can someone take a look and tell us what we are missing? We need to be able to dereference this object in the home.carousel.js file in order to do what we still need to do.

Once we solve this problem, the staging server will eventually go away. However, in the interest of helping future programmers, once we understand the issue, we’ll gladly do the work of putting up a codepen or jsfiddle to demonstrate what is going on and the solution, and update this question.

I’m working on an Angular project where I’m lazy loading a module and providing multiple services at the route level. My expectation was that these services would be destroyed when the user navigates away from the route. However, I’m observing that the services are not being destroyed, and their instances persist in memory.

Here is a simplified version of my module and route configuration:

{
   path: 'test-page',
   loadChildren: () => import('lazy-loaded-module-path').then((m) => m. LazyLoadedModule)
}

Module:

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: '',
        component: MainPage,
        providers: [
          MyService,
        ]
      }
    ])
  ]
})
export class LazyLoadedModule {}

Service:

@Injectable()
export class MyService {
  constructor(
  ) {
    console.log('MY SERVICE IS CREATED')
  }

  ngOnDestroy(): void {
    console.log('MY SERVICE IS DESTROYED')
  }
}

const p = new Promise((resolve, reject) => {
    resolve('resolved');
});
p.then((r) => console.log(r));
console.log('hi!');

If you run this code here, you will see the output ‘hi!’ before ‘resolved’. I take this to mean the promise callback is run after console.log('hi!'). Which means that it’s probably not called in the promise constructor like this:

Promise(callback) {
    // setup promise
    callback(resolve, reject);
}

So then when IS callback called? What triggers it?

I am building a reusable UI Component library with Vuetify, Vue 3 and Vite following this guide: https://medium.com/@mattlcoleman88/crafting-a-reusable-ui-component-library-with-vuetify-vue-3-and-gitlab-f7364b0d4b79

Currently I can import the MyButton from the demo app, My question is, if I want to use VBtn from vuetify itself, how can I do it?

Can I export all the vuetify components in my Component library? If yes, how can I achieve it, via vite config or via manual code?

BTW, I know there is another solution is to separate vuetify and the customized library, and add ‘vuetify’ as a peer dependency in customized library.

I have an input field that should only accept valid HTTPS URLs. I’m having troubles finding the perfect regex pattern for this job, though. I have tried several options and also asked AI but it doesn’t seem to really understand regex just yet. Therefore I have decided to ask good old stack overflow.

The following two patterns where the closest I got to what I wanted, but they both still had their flaws.

1. pattern="https://([a-zA-Z0-9]+.)*[a-zA-Z0-9]{2,}(.[a-zA-Z0-9]{2,})+[/?]?.*$"
   This pattern worked perfectly for your standard URLs, e.g. https://www.example.com

However, I also want to allow port numbers instead of TLDs, mainly to allow localhost urls
Therefore I also tried option 2:

2. pattern="https://(?:w{1,3}.)?[^s.]+(?:.[a-z]+)*(?::d+)?(?![^<]*(?:</w+>|/?>))"
   With this, both URLs like https://www.example.com and localhost URLs like https://localhost:43500
   were accepted, but the pattern ended up being a bit too forgiving. It also accepted stuff like https://example, which is obviously NOT a valid URL. It also didn’t allow for subroutes after the / anymore for regular URLs

Now I’m no regex expert, but I hope there are some of y’all on this website that can help me! Basically what I want is a pattern that allows for all of the following types of URLs:

• https://www.example.com
• https://example.com
• https://localhost:43500

Also with the following prerequisites:

• The URL should always start with https
• The URL should allow subroutes after the /
• It should always have one of a TLD or port number. Never none of them and never both!