Related questions

Typescript throws a "Cannot read property 'length' of undefined" when run through gulp

2019-09-20 16:15 maninthecomputer imported from Stackoverflow

I am trying to build a project in Gulp that uses Typescript. However, when I try to do npm run gulp, the following error is thrown:

[09:03:17] Using gulpfile ~/Programming/Projects/ghars/gulpfile.js
[09:03:17] Starting 'default'...
[09:03:19] 'default' errored after 2.25 s
[09:03:19] TypeError: Cannot read property 'length' of undefined
    at Object.emit [as writeFile] (/home/bruhmoment/Programming/Projects/ghars/node_modules/gulp-typescript/release/compiler.js:81:33)
    at Object.writeFile (/home/bruhmoment/Programming/Projects/ghars/node_modules/typescript/lib/typescript.js:12099:14)
    at emitBuildInfo (/home/bruhmoment/Programming/Projects/ghars/node_modules/typescript/lib/typescript.js:86317:16)
    at emitSourceFileOrBundle (/home/bruhmoment/Programming/Projects/ghars/node_modules/typescript/lib/typescript.js:86284:13)
    at forEachEmittedFile (/home/bruhmoment/Programming/Projects/ghars/node_modules/typescript/lib/typescript.js:86071:28)
    at Object.emitFiles (/home/bruhmoment/Programming/Projects/ghars/node_modules/typescript/lib/typescript.js:86263:9)
    at emitWorker (/home/bruhmoment/Programming/Projects/ghars/node_modules/typescript/lib/typescript.js:92213:33)
    at /home/bruhmoment/Programming/Projects/ghars/node_modules/typescript/lib/typescript.js:92174:66
    at runWithCancellationToken (/home/bruhmoment/Programming/Projects/ghars/node_modules/typescript/lib/typescript.js:92264:24)
    at Object.emit (/home/bruhmoment/Programming/Projects/ghars/node_modules/typescript/lib/typescript.js:92174:20)

npm ERR! Linux 4.15.0-62-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "gulp"
npm ERR! node v8.10.0
npm ERR! npm  v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! ghars@1.0.0 gulp: `node node_modules/gulp/bin/gulp.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ghars@1.0.0 gulp script 'node node_modules/gulp/bin/gulp.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ghars package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node node_modules/gulp/bin/gulp.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ghars
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ghars
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/bruhmoment/Programming/Projects/ghars/npm-debug.log

I tried putting a console.log statement in typescript.js to try to see what files are being processed, but it seems like all of the obvious files were compiled. I'm not sure what I have to do to resolve this error, as I am unfamiliar with Typescript.

Here is my gulpfile.js:

var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');

gulp.task('default', function () {
    return tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest('dist'));
});

Here is my tsconfig.json:

{
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "./",
    "allowJs": true,
    "incremental": true,
    "target": "es5",
    "removeComments": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "strict": true,
    "strictNullChecks": false
  },
  "include": [
    "server"
  ]
}

1 answer

  • answered 2019-09-21 00:57 trypto

    Switch off "incremental": true,

See also questions close to this topic

  • Need help for writing Unit Tests using Jest for Express code

    I am new to frontend development and stuck to write Unit Test for a scenario where mocking is needed.

    My Service (Express):

    export class SaveDataService{
    async save() : Promise<any> {
        const response = {
            "file" : "<htm><body>This is sample response</body></html>"
        }
        try{
            return Promise.resolve(response);
        } catch(ex){
            throw new Error('some error occured')
        }
    }
}

    Middleware(to call service):

    
import { SaveDataService } from "./save-data.service"

export const getSaveDataMiddleware = () => {
    let saveService = new SaveDataService();

    return async (req, res, next) => {
        try {
            console.info('print req - ' + req)
            const response = await saveService.save();
            console.info('response :: ' + JSON.stringify(response))
            res.send(response)
        } catch (error) {
            console.error(error.message);
            return next(error);
        }
    }
}

    Route (from where middleware is called):

    
import { Router } from 'express';
import { getSaveDataMiddleware } from './save-data/save-data.middleware';

const router = Router();

export default function getRouter() {
    const saveMiddleware = getSaveDataMiddleware();
    
    router.post('/save', (req, res, next) => saveMiddleware(req, res, next));

    return router;
}

    I've written below test file, but I know - I'm writing it wrong. I've seen the documentation and few examples as well to test middleware but nothing is helping.

    Test/SPEC file:

    
import { getSaveDataMiddleware } from "./save-data.middleware";

describe('when save middleware is called', () => {
    it('getSaveMiddleware is retrieved', async () => {
        const mockedNext = jest.fn()
        const mockedReq = jest.fn().mockReturnValue({
            "key1": "value1"
        })
        const mockedRes = jest.fn().mockReturnValue({
            status: 200,
            json: jest.fn().mockReturnValue({
                "file": "an"
            })
        })
        const middleware = getSaveDataMiddleware()
        const response = await middleware(mockedReq, mockedRes, mockedNext);
        expect(response.send).toBeDefined()
    })
})

    Problem: I'm getting the response as undefined , I want to have mockedResponse. I'm not getting how can I set mocked response here in express middleware.

    enter image description here

    Please help!!

  • Handle typos in manual navigation to URLs in Angular

    Looking for a solution to the following problem:

    When the user manually navigates to a url, e.g www.website.com/logi and makes a typo, I'd like to have some logic to navigate him to the correct .../login url. My website has ~10 pages that have different navigation urls and I want to check for typos there as well. Logic that can check for 1-2 character differences and smartly navigate the user even when they make a typo.

    What would be a good solution to this problem?

  • Target requires X element(s) but source may have fewer. with function overloads

    I am trying to create a function that takes an array of observables and return their values mapping them to an array of their values but I am having problems with the overloads.

    I have defined 6 overloads, each overload takes one array item more, and as general a regular array with 'n' items.

    But I get the problem:

    No overload matches this call.
  The last overload gave the following error.
    Argument of type 'Observable<number>[]' is not assignable to parameter of type '[Observable<number>, Observable<number>, Observable<number>, Observable<number>, Observable<number>, Observable<...>]'.
      Target requires 6 element(s) but source may have fewer.

    I have made a stackblizt where the error happens, and this is the code:

    import { combineLatest, Observable, of, Subscription } from 'rxjs';

export type ValueOfObservable<T> = T extends Observable<infer U> ? U : never;

export function myFunction$<O1 extends Observable<unknown>>(
  sources: [O1]
): Observable<[ValueOfObservable<O1>]>;
export function myFunction$<
  O1 extends Observable<unknown>,
  O2 extends Observable<unknown>
>(
  sources: [O1, O2]
): Observable<[ValueOfObservable<O1>, ValueOfObservable<O2>]>;
export function myFunction$<
  O1 extends Observable<unknown>,
  O2 extends Observable<unknown>,
  O3 extends Observable<unknown>
>(
  sources: [O1, O2, O3]
): Observable<
  [ValueOfObservable<O1>, ValueOfObservable<O2>, ValueOfObservable<O3>]
>;
export function myFunction$<
  O1 extends Observable<unknown>,
  O2 extends Observable<unknown>,
  O3 extends Observable<unknown>,
  O4 extends Observable<unknown>
>(
  sources: [O1, O2, O3, O4]
): Observable<
  [
    ValueOfObservable<O1>,
    ValueOfObservable<O2>,
    ValueOfObservable<O3>,
    ValueOfObservable<O4>
  ]
>;
export function myFunction$<
  O1 extends Observable<unknown>,
  O2 extends Observable<unknown>,
  O3 extends Observable<unknown>,
  O4 extends Observable<unknown>,
  O5 extends Observable<unknown>
>(
  sources: [O1, O2, O3, O4, O5]
): Observable<
  [
    ValueOfObservable<O1>,
    ValueOfObservable<O2>,
    ValueOfObservable<O3>,
    ValueOfObservable<O4>,
    ValueOfObservable<O5>
  ]
>;
export function myFunction$<
  O1 extends Observable<unknown>,
  O2 extends Observable<unknown>,
  O3 extends Observable<unknown>,
  O4 extends Observable<unknown>,
  O5 extends Observable<unknown>,
  O6 extends Observable<unknown>
>(
  sources: [O1, O2, O3, O4, O5, O6]
): Observable<
  [
    ValueOfObservable<O1>,
    ValueOfObservable<O2>,
    ValueOfObservable<O3>,
    ValueOfObservable<O4>,
    ValueOfObservable<O5>,
    ValueOfObservable<O6>
  ]
>;
export function myFunction$<T>(sources: Observable<T>[]): Observable<T[]> {
  return combineLatest(sources);
}

const sub = new Subscription();

const wantedValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const wantedValuesAsObs$ = wantedValues.map(v => of(v));
let values: unknown[];
sub.add(myFunction$(wantedValuesAsObs$).subscribe(v => (values = v))); // error here

    as you can see, myFunction$(wantedValuesAsObs$) throws the error and I do not understand why because in my eyes, the implementation itself (export function myFunction$<T>(sources: Observable<T>[]): Observable<T[]>) should handle that.

    Ps: I am using combineLatest in the example just to have a functional example.

  • Trouble building and exporting TailwindCSS & NextJS

    I am having difficulty building & exporting my TailwindCSS & NextJS project. When working with npm run dev, the project works perfectly and I am able to use all the Tailwind classes. When I run npm run build && npm run export, all the Tailwind CSS stylings disappear and the generated index.html file does not have any CSS styling.

    Package.json: 

    {
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  },
  "dependencies": {
    "@headlessui/react": "^1.4.0",
    "@heroicons/react": "^1.0.2",
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.3.1",
    "eslint": "7.30.0",
    "eslint-config-next": "11.0.1",
    "postcss": "^8.3.6",
    "tailwindcss": "^2.2.7"
  }
}

    tailwind.config.js

    module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      zIndex: {
         '-10': '-10',
      }
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

    App.js

    import 'tailwindcss/tailwind.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

    I feel like the npm run build && npm run export is not calling any Tailwind build commands. I cannot find any instructions on how to actually build the TailwindCSS project with NextJS on their documentation.

  • Loader and ENOENT Errors after updating npm Modules

    When I try to compile (I am using webpack) my project after upgrading any module in my directory, using "npm update MyModule" (web3 in this case), I obtain the following errors (before any upgrade, the project is compiling properly):

    Module parse failed: node_modules/web3-core-method/src/index.js Unexpected token
You may need an appropriate loader to handle this file type.

Module build failed: Error: ENOENT: no such file or directory, open 
'/node_modules/web3-core-subscriptions/node_modules/eventemitter3/index.js'

    Similar errors for other modules. What could be the cause for these errors?

    Thank you. J

  • Why does npm rebuild in docker work but npm install doesn't

    I have a node project that accesses some private repos. When I submit the project to CircleCI with the following config file (inherited from another developer) and the following Dockerfile, the build works. However, if I replace the npm rebuild in the Dockerfile with npm install, the build fails due to not being able to fetch some private repos I'm using. I know (or think I know) this is the case cause if I run the docker image with a shell and remove the private repos from the package.json, npm install works just fine. Here's my assumption of what's going on.

    1. The npm ci in circleCi works because CircleCi has access to our Github SSH keys, and doing this installs the packages in the container this build is running in
    2. When I run the docker build command AFTER CircleCi runs npm ci, the node_modules already has all the packages I need (due to CircleCi installing them. If this is the case, I guess I technically don't need to do another npm install in the Dockerfile) 2.a This seems like I'm running a docker build (the penultimate "run" command in the circleci config file) within a docker "build" that's defined by the CircleCi config....
    3. When I run npm install in the Dockerfile, it errs because I can't pull down the private repos due to no SSH access. However, npm rebuild just re-compiles the already installed packages

    Is that correct or am I way off? And if that is correct, then I guess if we weren't using any private repos I could just have CircleCi run the build command (ie no npm install, apt get, etc that I'm also doing in the Dockerfile) and use the Dockerfile as the "config" rather than having essentially the same config defined in the circleci.yaml file, yeah?

    And yes, I know I can clean up that Dockerfile a bit... Just want to get an understanding of what's going on first.

    Hope that's somewhat clear and thanks in advance for any clarification.

        docker:
      - image: circleci/node:14.17.3
    environment:
      - DOCKER_TAG: dev
    steps:
      - checkout
      - run:
          name: Install npm v6.12.0
          command: sudo npm install -g npm@6.12.0
      - restore_cache:
          key: cache-{{ checksum "package.json" }}
      - run:
          name: npm install ci
          command: npm ci --only=production
      - save_cache:
          key: cache-{{ checksum "package.json" }}
          paths:
            - ./node_modules
      - run:
          name: npm prune
          command: npm prune --production
      - setup_remote_docker
      - run:
          name: Install dependencies
          working_directory: /
          command: |
            sudo apt-get update --fix-missing
            sudo apt install -y python-pip python-dev
            sudo pip install awscli
      - run:
          name: build
          command: docker build --no-cache -t <repo>:<tag>
      - run:
          name: push
          command: make push (push to ECR)

    
# Using official Node.js base image
FROM node:14.17.3-slim

# Create a directory for our application and one for its log files
# Update the image and install supervisord which we will use to run the application
RUN mkdir /opt/app \
  && mkdir /var/log/app \
  && apt-get update \
  && apt-get -y upgrade \
  && apt-get install -y supervisor bzip2 build-essential python python-pip \
  && pip install awscli \
  && npm install -g sequelize-cli

# Add our supervisord configuration file
COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf

WORKDIR /opt/app
ADD . /opt/app

# Run an npm rebuild
RUN npm rebuild

# Set NODE_PATH
ENV NODE_PATH /opt/app
# Expose the port the app listens on
EXPOSE 5000

# Inject the host's NODE_ENV environment variable
ENV NODE_ENV $NODE_ENV

# Run the app with supervisord
CMD ["bin/boot.sh"]
  • How to create an app that opens external URL then scroll the page down?

    I want to create an app using nodejs & Gulpjs that opens a specific URL then scroll the page of the URL down to the end of the page, is that possible ?

    Here is my code inside gulpfile.js

    const {series, src, dest} = require('gulp');
var fs = require('fs');
var path = require('path');
var open  =require('open');
var https = require('https');

async function getLinks(params) {
    var pageLink = 'https://youtube.com';
    var links = [];

    open(pageLink, {app: 'chrome'});

    https.get(pageLink, (res) => {
        let rawHtml = '';
        res.on('data', (chunk) => { rawHtml += chunk; });
        res.on('end', () => {
            try {
                console.log(rawHtml);
            } catch (e) {
                console.error(e.message);
            }
        });
    });

}

exports.default = getLinks;

    I would be thankful for some help!

  • gulp, webpack-stream and webpack-5: output is memory only

    [Community: will someone please create a tag?]

    I'm using gulp and webpack-stream to use webpack to build my react project into one .js file and I would like to break it down into multiple .js files. I specifically want to use the new webpack-5 entry options "input" and "dependOn" so I can put the react framework into its own .js file and have all the other .js files depend on it, instead of having all .js files have all the react code. I thought I had done exactly what I wanted, but then I discovered that the output files (assets) weren't actually being created.

    I have distilled my gulpfile.js into a minimum example of how a gulp task compiles two of my react files with webpack-stream's default webpack-4 and creates the output, and the same gulpfile.js using webpack-5 which does NOT create the output. (I chose to have the webpack options in the gulp file and use lodash.clonedeep, instead of having a webpack.config.js file).

    gulpfile.js using webpack-4:

        const gulp = require('gulp');
    const cloneDeep = require('lodash.clonedeep');
    const webpackStream = require('webpack-stream');
    const webpack5 = require('webpack');
    
    const filePermission = "0744";
    
    const webpackOptions = {
        mode: 'production', devtool: false,
        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: { presets: 
                            [   '@babel/preset-react'
                            ,   '@babel/env'
                            ,   { 'plugins': ['@babel/plugin-proposal-class-properties'] }
                            ] 
                        }
                    }
                }
            ]
        }
    };
    
    gulp.task('compile-react', () =>
    {
        let options = cloneDeep(webpackOptions);
        options['entry'] = {
            tabs: './javascript/react/_tabs.jsx',
            sidebar: './javascript/react/_sidebar.jsx',
        };
        options['output'] = {
            filename: '[name].bundle.js',
        };
        return webpackStream(options)
            .pipe(gulp.dest('javascript/dist', { mode: filePermission }));
    });

    The output from running gulp compile-react from the CLI:

    [09:46:32] Starting 'compile-react'...
[09:46:35] Version: webpack 4.46.0
Built at: 07/30/2021 9:46:35 AM
            Asset      Size  Chunks             Chunk Names
sidebar.bundle.js  8.78 KiB       0  [emitted]  sidebar
   tabs.bundle.js  8.58 KiB       1  [emitted]  tabs
Entrypoint tabs = tabs.bundle.js
Entrypoint sidebar = sidebar.bundle.js
[09:46:35] Finished 'compile-react' after 2.29 s

    In the /javascript/dist/ folder I see the two assets, sidebar and tabs.bundle.js, as expected. But if I switch to webpack-5 by adding it as an optional argument to webpack-stream, the assets are no longer created altho the output looks good. Here is the change to the return statement in the task to use webpack-5:

        [...]
        return webpackStream(options, webpack5)
            .pipe(gulp.dest('javascript/dist', { mode: filePermission }));
    });

    Here is the output from the CLI:

    [10:03:49] Starting 'compile-react'...
[10:03:52] asset sidebar.bundle.js 2.65 KiB [emitted] [minimized] (name: sidebar) 1 related asset
asset tabs.bundle.js 2.64 KiB [emitted] [minimized] (name: tabs) 1 related asset
    
webpack 5.47.1 compiled successfully
[10:03:52] Finished 'compile-react' after 2.93 s

    But of course, the assets aren't created. It seems like I'm missing a webpack-5 option to physically create the output, but if so I cannot find it. Help!

  • Cannot Read Property 'start' of undefined using gulp.js

    So, I have 1 error in my GULP when I use the following:

    node ./node_modules/gulp/bin/gulp.js test

    Here's the error I'm getting when I run: node ./node_modules/gulp/bin/gulp.js test

    PS C:\Users\myuser\repos\wwwroot\acqustn-aem-global-comps\ui.apps> node 
./node_modules/gulp/bin/gulp.js test
[09:41:14] Using gulpfile ~\repos\wwwroot\global-comps\ui.apps\gulpfile.js
[09:41:14] Starting 'test'...
[09:41:14] 'test' errored after 4.45 ms
[09:41:14] TypeError: Cannot read property 'start' of undefined
at C:\Users\myuser\repos\wwwroot\global-comps\ui.apps\gulpfile.js:12:11
at test (C:\Users\myuser\repos\wwwroot\global-comps\ui.apps\node_modules\undertaker\lib\set-task.js:13:15)     
at bound (domain.js:426:14)
at runBound (domain.js:439:12)
at asyncRunner (C:\Users\myuser\repos\wwwroot\global-comps\ui.apps\node_modules\async-done\index.js:55:18)     
at processTicksAndRejections (internal/process/task_queues.js:79:11)

    Here is my karma.conf.js file that's formatted in the following manner. I'm adding more text here because I have to as I cannot post unless I describe more information

    module.exports = function (config) {
  const process = require('process');
  process.env.CHROME_BIN = require('puppeteer').executablePath();
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine-jquery', 'jasmine'],

    plugins: [
      require('jquery'),
      require('karma-junit-reporter'),
      require('karma-coverage'),
      require('karma-jasmine-jquery-2'),
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-phantomjs-launcher'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
      require('karma-sonarqube-unit-reporter')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, './coverage/global-comps'),
      reports: ['lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true
    },
    // list of files / patterns to load in the browser
    files: [
      './src/main/content/jcr_root/etc/designs/global-components/footer/**/*.js',
      './src/main/content/jcr_root/etc/designs/global-components/header/**/*.js',
      './src/main/content/jcr_root/etc/designs/global-components/action/**/*.js'
    ],


    // list of files / patterns to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      './test/navigationClientLibs/js/header.spec.js': ['coverage']
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['junit', 'progress', 'kjhtml', 'coverage-istanbul', 'sonarqubeUnit', 'coverage'],
    sonarQubeUnitReporter: {
      sonarQubeVersion: 'LATEST',
      outputFile: 'reports/ut_report.xml',
      overrideTestDescription: true,
      testPaths: ['./test/navigationClientLibs/'],
      testFilePattern: '.js',
      useBrowserName: false
    },

    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity,

    junitReporter: {
      outputFile: 'reports/junit/TESTS-xunit.xml'
    },

    coverageReporter: {
      type: 'lcov',
      dir: 'reports',
      subdir: 'coverage'
    }
  })
}

    Now my GULP FILE which is failing with karma.start() whenever I run the following node ./node_modules/gulp/bin/gulp.js test at the command prompt in VS Code Terminal

        var gulp = require('gulp');
    var karma = require('karma').server;
    var replace = require('gulp-replace');

    var postprocessLCOV = function() {
        return gulp.src('reports/coverage/lcov.info')
            .pipe(replace('SF:.', 'SF:frontend-project'))
            .pipe(gulp.dest('reports/coverage'));
    };

    gulp.task('test', function () {
        karma.start({
            configFile: __dirname + '/src/test/js/karma.conf.ci.js'
        }, postprocessLCOV);
    });

    Of Note: My karma.conf.js and .ci.js are exactly the same so I don't have to post both files here.

    Finally, my package.json which shows everything I'm using. Whenever I added an new library, I have to delete the package.lock.json, after the new library is installed then re-run npm install.

    {
  "name": "global-comps",
  "version": "1.0.0",
  "description": "This is for the Navigator",
  "main": "qunit.js",
  "scripts": {
    "lint": "eslint '**/*.js'",
    "test": "qunit",
    "compodoc": "npx compodoc -p tsconfig.doc.json",
    "ng": "ng",
    "clean": "rm -rf node*",
    "ng-cli": "npm install --no-optional @angular/cli",
    "start": "ng serve --proxy-config proxy.config.json",
    "build": "ng build",
    "prod": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod --output-hashing none && npm run test && npm run clean",
    "e2e": "ng e2e",
    "sonar": "sonar-scanner"
  },
  "repository": {
    "type": "git",
    "url": "somerepo.git"
  },
  "author": "Some Author",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~9.0.2",
    "@angular/compiler": "~9.0.2",
    "@angular/core": "~9.0.2",
    "@angular/platform-browser": "~9.0.2",
    "@angular/platform-browser-dynamic": "~9.0.2",
    "@angular/router": "~9.0.2",
    "@types/mocha": "^9.0.0",
    "JSONPath": "^0.11.2",
    "browserify": "^17.0.0",
    "common-js": "^0.3.8",
    "eslint-plugin-qunit": "^6.1.1",
    "jquery": "^3.4.1",
    "jquery-browserify": "^1.8.1",
    "jsdom": "^16.5.3",
    "junit": "^1.4.9",
    "karma-junit-reporter": "^2.0.1",
    "ng-mocks": "^11.10.1",
    "node": "^15.12.0",
    "npm-check-updates": "^11.5.13",
    "phantomjs": "^2.1.7",
    "qunit-reporter-junit": "^1.1.1",
    "qunit-reporter-lcov": "^1.0.2",
    "require": "^2.4.20",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.1.3",
    "@angular-devkit/build-webpack": "^0.1201.3",
    "@angular/compiler-cli": "~9.0.2",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jsdom": "^16.2.13",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "grunt": "^1.3.0",
    "grunt-contrib-connect": "^3.0.0",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-qunit": "^4.0.0",
    "grunt-git-authors": "^3.2.0",
    "grunt-search": "^0.1.8",
    "gulp": "^4.0.2",
    "gulp-replace": "^1.1.3",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^6.3.2",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage": "^2.0.3",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-jasmine": "^4.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "karma-jasmine-jquery-2": "^0.1.1",
    "karma-mocha-reporter": "^2.2.5",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-qunit": "^4.1.2",
    "karma-sonarqube-unit-reporter": "0.0.23",
    "karma-webpack": "^5.0.0",
    "protractor": "~5.4.3",
    "puppeteer": "^1.20.0",
    "sonar-scanner": "^3.1.0",
    "sonarqube-scanner": "~2.7.0",
    "ts-node": "~8.3.0",
    "typescript": "~3.7.5"
  },
  "global": "window"
}

    So, that's where I'm at.