The Angular compiler seems to be unable to locate the jasmine.CustomMatchers despite its presence in the @types/jasmine package

I recently acquired a testing project example from the Angular guide at Angular documentation. You can get it here: https://angular.io/generated/zips/testing/testing.zip

Upon running ng serve, I encountered some errors:

src/testing/jasmine-matchers.d.ts(3,67): error TS2694: Namespace 'jasmine' has no exported member 'CustomMatcher'.

Given that I am quite new to Angular, could someone enlighten me on what might be causing this issue?

I've already performed npm install and while inspecting node_modules/@types/jasmine, I noticed that CustomMatchers is defined in index.d.ts.

My current setup includes:

Angular 7

Typescript 3.0

"@types/jasmine": "^2.8.14",
"@types/jasminewd2": "^2.0.4",
"@types/node": "~8.9.4",
"jasmine-core": "~2.99.1",
"jasmine-marbles": "^0.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",

Answer №1

The reason behind the errors is a result of mismatched versions between Typescript and @types/jasmine packages. To resolve this issue, make sure to use the following compatible versions:

Angular CLI: 7.3.1
Node: 12.6.0
OS: windows x64
Angular: 7.2.8
typescript                        3.4.5
"@types/jasmine": "3.3.0"

To correctly install these versions, follow these steps:

Delete the package-lock.json and node_modules/ folders, then run npm cache clean --force followed by npm install

Answer №2

My current versions of node and npm are:

node --version
v10.15.3

npm --version
6.9.0

An error message I encountered is as follows:

ERROR in src/app/model/testing/index.ts(1,15): error TS2307: Cannot find module './fake-hero.service'.
src/testing/jasmine-matchers.d.ts(3,67): error TS2694: Namespace 'jasmine' has no exported member 'CustomMatcher'.
src/testing/jasmine-matchers.ts(7,3): error TS2708: Cannot use namespace 'jasmine' as a value.
src/testing/jasmine-matchers.ts(12,32): error TS2694: Namespace 'jasmine' has no exported member 'CustomMatcher'.
src/testing/jasmine-matchers.ts(14,97): error TS2694: Namespace 'jasmine' has no exported member 'CustomMatcherResult'.

The issue was resolved by commenting out the following line in the file src/app/model/testing/index.ts:

//export * from './fake-hero.service';

Although it initially appeared to be related to jasmine and CustomMatcher, further investigation revealed that wasn't the case.

Interestingly, stopping the server and running ng serve resulted in another jasmin related error. However, simply adding a space in the commented line within the file (index.ts) allowed successful compilation!

Below are my devDependencies:

"devDependencies": {
  "@angular-devkit/build-angular": "^0.11.0",
  "@angular/cli": "^7.1.0",
  "@angular/compiler-cli": "^7.1.0",
  "@angular/platform-server": "^7.1.0",
  "@types/jasmine": "~2.8.8",
  "@types/jasminewd2": "^2.0.4",
  "@types/node": "~8.9.4",
  "jasmine-core": "~2.99.1",
  "jasmine-marbles": "^0.4.0",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "~3.0.0",
  "karma-chrome-launcher": "~2.2.0",
  "karma-coverage-istanbul-reporter": "~2.0.1",
  "karma-jasmine": "~1.1.2",
  "karma-jasmine-html-reporter": "^0.2.2",
  "lodash": "^4.16.2",
  "protractor": "~5.4.0",
  "ts-node": "~7.0.0",
  "tslint": "~5.11.0",
  "typescript": "~3.1.1"
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Typedoc: only export contents from a particular file are documented

Currently, I am working on developing two npm packages: https://github.com/euberdeveloper/mongo-scanner https://github.com/euberdeveloper/mongo-cleaner My goal is to create documentation for these packages using Typedoc. The main file is index.js p ...

Angular parent component struggles to manage control over multiple child components

As a newcomer to Angular, I have a question regarding my Page1 setup. Page1 has two menu options at the top: when the first option is clicked, Page1.html is displayed, and clicking the second menu displays another component (Page2) in the context area. I w ...

Get ready for 10 AM with the RxJS timer function

I am trying to figure out how to schedule a method in my code using rxjs/timer. Specifically, I want the method to run at precisely 10 AM after an initial delay of 1 minute. However, my current implementation is running every 2 minutes after a 1-minute d ...

Encountering the error message "Subscribe is not a function in Jasmine" while

Encountering an issue where I am receiving an error stating "subscribe is not a function" in Angular unit testing. Here is the call that I have implemented in my component: this.myService.employees.subscribe(emp => this.emp = emp); Despite creating a ...

Displaying PDF Preview when Button is Clicked using Angular

Is there a way to preview a PDF using Base64 data? Here's the HTML code: And here's the TypeScript code: let file = new Blob([byte64String],{type:'application/pdf'}); this.pdfSourceUrl = URL.createObjectURL(file); When I try to prev ...

Guide on retrieving specific values within an array and mapping them to separate arrays using the HttpClient service in Angular 7+

I'm having a tough time grasping the concept of handling data once it's returned from an Http Request in Angular 7+ The Service responsible for fetching each location is shown below: import { Injectable } from '@angular/core'; import ...

When an abstract method is invoked within the constructor of an abstract class, it does not have access to properties of

This code snippet is supposed to display 'Hello World!' on the screen, but instead it shows an error message: Error: Cannot read property 'id' of undefined. What could be the reason behind this issue? abstract class Parent { construc ...

The communication between Angular and Unity using SignalR for messaging is not functioning properly, as I am unable to

Trying to establish a connection between Angular and Unity has been challenging for me. I can't seem to get them to communicate with each other. My goal is to have Angular "announce" when someone enters a room, and have Unity "greet" the user enterin ...

What is causing the components in the NgModule to rearrange every time I hit the save button?

My goal is to maintain the items in my NgModule in a vertical list format, as shown below: @NgModule({ declarations: [ AppComponent, PostCreateComponent ], imports: [ BrowserModule, FormsModule, BrowserAnimationsModule, MatInputModule, ...

The useParams() function encounters difficulty in converting data to number typescript

Whenever I try to convert the heroId type from string to number in my code, I always encounter an error. Here is the code snippet: import useHero from '../../hooks/useHero'; import {useParams} from 'react-router-dom' function Herospag ...

What modifications have been made to package import scope in Angular 9?

During the migration process of a large V8 application to V9, I encountered errors related to components using Material components. Specifically, I received the following error message: error NG8001: 'mat-icon' is not a known element. To resolve ...

Issue with Memory Deallocation in Rust WebAssembly Custom Elements

I encountered an issue while working on my first Rust-produced WASM, and I am unsure how to debug it. wasm-000650c2-23:340 Uncaught RuntimeError: memory access out of bounds at dlmalloc::dlmalloc::Dlmalloc::free::h36961b6fbcc40c05 (wasm-function[23]:6 ...

Error: Gulp is using ts-node and returning 'void' instead of 'Task', but it cannot find the type 'Task'

Seeking assistance from experienced individuals in the realm of gulp.js and typescript - could someone provide guidance for a struggling newcomer? I am currently utilizing the most recent versions of all relevant tools (node, ts-node, gulp, ts, @types/gul ...

How can JSON be best connected in Angular for optimal performance?

My JSON structure is as follows: { items:[], errors:[], foundItems:9 } One part of my program requires access to "items", while another part needs access to "errors." To resolve this issue, I decided to create a new interface and a new class to hand ...

Why does the type checking for props in vue.js keep failing despite my use of "Object as PropType<GeographicCoordinate | null>"?

Scenario: Utilizing vue.js (^3.2.13) with Typescript and Composition API in Visual Studio Code File type.ts: export class GeographicCoordinate { latitude: number; longitude: number; altitude?: number; constructor(latitude: number, longitude: numb ...

Inhibit unselected choices when a user exceeds choosing a certain number of options

I want users to be able to select a maximum of 3 options from a list. If a form has four options, once the user selects three, the fourth should become disabled. Here is the setup I have: import { Component, Input, ViewChild, OnInit, AfterViewI ...

Customizable mongoDB database collection

Is there a more efficient way to make calls to different collections based on a function parameter? I'm exploring the possibility and if it's not feasible, I'll handle it case by case. Currently, I have this code and the goal is to have a u ...

Pass a boolean value using Angular2's routerLink functionality

Can't figure out how to pass a boolean value through a routerLink from a task-page to a team-page and use it in the HTML. Any ideas on what I might be doing wrong? This is how I've attempted it: <a [routerLink]="['/team', projectID ...

I am unable to simply import lodash.add into my Angular 4 project

I'm struggling to import the add method from the lodash library using Angular 4 and TypeScript. I've attempted various approaches: import { add } from 'lodash'; import { add } from 'lodash/add'; import * as add from 'l ...

Angular 2 table fails to refresh after callback updates collection, but a timer update triggers a full refresh of the collection

I am experiencing an issue with updating a string[] collection from the Observable subscription: heroes:string[] = ['milan']; // this works fine let current = this; (function theLoop (i: number) { setTimeout(() => { current.heroe ...