Categories
Mastering Development

“Including” socket.io-client in vanilla typescript

I decided to use Typescript to create a class that will expose some methods which use socket.io-client. I have two Typescript source files and a socket.io.js (client) file: file1.ts file2.ts socket.io.js (client) file2.ts depends on file1.ts and file1.ts depends on socket.io.js. I would like to have one .js file in the end which I can […]

Categories
Mastering Development

I can’t not build react library using rollup

I am trying to build react hook library (usinguseState and useEffect from react). My rollup config is: import react from ‘react’ import peerDepsExternal from ‘rollup-plugin-peer-deps-external’ import resolve from ‘rollup-plugin-node-resolve’ import typescript from ‘rollup-plugin-typescript2’ import commonjs from ‘rollup-plugin-commonjs’ import {terser} from ‘rollup-plugin-terser’ import packageJson from ‘./package.json’ export default { input: ‘src/index.ts’, output: { file: packageJson.main, format: […]

Categories
Mastering Development

Angular 10: Path Mapping shows error in VSCode when import

So I updated a project that was in Angular 8.2 (a project template) to version 10 and followed the instructions from https://update.angular.io/ and everything was ok, but when implemented Path Mapping the pain started, I’m getting this error everywhere: Cannot find module ‘@environments/environment’ or its corresponding type declarations.ts(2307) And this error applies to @environments and […]

Categories
Mastering Development

You may need an appropriate loader to handle this file type, currently no loaders are configured to process file

I just created a project using create-react-app (in javascript). In that, I am linking one of my other repository like this { "name": "hh-frontend-example", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "hh-stylesheet": "file:../hh-stylesheet", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1" }, Here notice this line: "hh-stylesheet": "file:../hh-stylesheet", Now, When I start […]

Categories
Mastering Development

Property ‘toBeInTheDocument’ does not exist on type ‘Matchers

Trying to setup testing for a components library. I’ve tried many example and all similar threads on this with no luck. My setupTests.ts file is correctly being loaded (proven with a console.log), and the library seems to be available as if I add import { toBeInTheDocument } from ‘@testing-library/jest-dom/matchers’ and log toBeInTheDocument it is present. […]

Categories
Mastering Development

Issue trying to setup jest: application code compiles fine but test code doesn’t

I am trying to migrate to jest and I am facing typescript issues… I have 3 tsconfig files: tsconfig.json (base config) tsconfig.lib.json (application config) tsconfig.jest-spec.json (jest-dedicated test config) Please note that there are also karma/jasmine dedicated tsconfig files but those are irrelevant. I have separated the jest tests from the karma ones. tsconfig.json { "compileOnSave": […]

Categories
Mastering Development

Angular9 application app selector html not loading with prod build

I have migrated my angular application from angular8 to 9. package.json { “name”: “visur”, “version”: “1.4.7-alpha.3”, “scripts”: { “ng”: “ng”, “start”: “ng serve”, “build”: “ng build”, “test”: “ng test”, “lint”: “ng lint”, “e2e”: “ng e2e” }, “private”: true, “dependencies”: { “@angular-devkit/build-webpack”: “^0.901.7”, “@angular/animations”: “~9.1.2”, “@angular/cdk”: “^9.0.0”, “@angular/common”: “~9.1.2”, “@angular/core”: “~9.1.2”, “@angular/flex-layout”: “9.0.0-beta.31”, “@angular/forms”: “~9.1.2”, “@angular/http”: […]

Categories
Mastering Development

Angular9 application app selector html not loading with prod build

I have migrated my angular application from angular8 to 9. package.json { “name”: “visur”, “version”: “1.4.7-alpha.3”, “scripts”: { “ng”: “ng”, “start”: “ng serve”, “build”: “ng build”, “test”: “ng test”, “lint”: “ng lint”, “e2e”: “ng e2e” }, “private”: true, “dependencies”: { “@angular-devkit/build-webpack”: “^0.901.7”, “@angular/animations”: “~9.1.2”, “@angular/cdk”: “^9.0.0”, “@angular/common”: “~9.1.2”, “@angular/core”: “~9.1.2”, “@angular/flex-layout”: “9.0.0-beta.31”, “@angular/forms”: “~9.1.2”, “@angular/http”: […]

Categories
Mastering Development

Angular9 application app selector html not loading with prod build

I have migrated my angular application from angular8 to 9. package.json { “name”: “visur”, “version”: “1.4.7-alpha.3”, “scripts”: { “ng”: “ng”, “start”: “ng serve”, “build”: “ng build”, “test”: “ng test”, “lint”: “ng lint”, “e2e”: “ng e2e” }, “private”: true, “dependencies”: { “@angular-devkit/build-webpack”: “^0.901.7”, “@angular/animations”: “~9.1.2”, “@angular/cdk”: “^9.0.0”, “@angular/common”: “~9.1.2”, “@angular/core”: “~9.1.2”, “@angular/flex-layout”: “9.0.0-beta.31”, “@angular/forms”: “~9.1.2”, “@angular/http”: […]

Categories
Mastering Development

Angular + Cypress code coverage reporting not working

I have been trying to get Cypress code coverage working with my Angular production project to no avail. To try and help diagnose it, I have created a minimal implementation project to make sure I wasn’t introducing anything weird in the production version, which I don’t think I am as the same issue is still […]