Error in Angular 11: The 'emod' property is missing in Type MatDialogRef

I made the mistake of updating my Angular project to the latest version, fully aware that it would be a challenging process. Unfortunately, things are going as expected.

An unfamiliar error has surfaced in my console despite the app compiling successfully. However, the browser is not displaying anything and this error persists.

I will provide all relevant information I can gather but have yet to find a solution for this issue.

Any assistance or guidance on this matter would be greatly appreciated.

Uncaught Error: Type MatDialogRef does not have 'ɵmod' property.
at getNgModuleDef (core.js:1022)
at recurse (core.js:24966)
at recurse (core.js:24977)
at registerNgModuleType (core.js:24962)
at new NgModuleFactory$1 (core.js:25076)
at compileNgModuleFactory__POST_R3__ (core.js:28679)
at PlatformRef.bootstrapModule (core.js:28922)
at Module.zUnb (main.ts:11)
at __webpack_require__ (bootstrap:79)
at Object.0 (main.js:475)

package.json

"dependencies": {
"@angular-devkit/core": "^11.2.2", 
... // The rest of the package.json remains the same
 },

"devDependencies": {
"@angular-devkit/build-angular": "^0.1102.2", 
... // The rest of the devDependencies information stays unchanged
}

app.module.ts

import {MatDialogModule, MatDialogRef} from '@angular/material/dialog';
imports: [
      MatDialogRef],
 providers: [LocationService,
{provide: LocationStrategy, useClass: HashLocationStrategy},
{ provide: MatDialogRef, useValue: {} }]

implementation

import {MatDialogRef} from '@angular/material/dialog';
export class DialogComponent implements AfterViewInit{}
constructor(public dialogRef: MatDialogRef<DialogComponent>

 this.dialogRef.afterClosed().subscribe((sendNow) => {...}

Answer №1

Make sure to include the MatDialogModule in your imports section of module.ts, but do not add MatDialogRef.

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

Using TypeScript with React Redux, encountering issue of property not being available in the Reducer from the ActionType

Currently, I am learning how to implement a Reducer in Redux while using React with TypeScript. I have encountered an issue that I need help with. Below are the action types that I am working with: import { LoginResponseInterface } from "../../interfaces ...

Error: Identifier 'LibraryManagedAttributes' is already in use

I am facing a similar issue to: React typescript (2312,14): Duplicate identifier 'LibraryManagedAttributes' and TypeScript error: Duplicate identifier 'LibraryManagedAttributes' Despite upgrading to the latest node/npm/yarn/typescript v ...

Passing a variable from a child component to a parent component in Angular 2 using EventEmitter and a

I am experiencing a challenge with the Event Emitter in my child component. My goal is to pass a variable with EventEmitter to the parent component, but I would like to include a timeout function. Currently, the code looks like this: CHILD: export class ...

Solution for dealing with error 'Cannot find Property length on type {} in React using TypeScript

Any ideas on how to fix the error "Property 'length' does not exist on type '{}'"? Below is the code snippet causing the issue: //component const SearchResults = ({ results }: { results: {} }) => { let pageCount = results? ...

Exploring the process of extracting information from a JSON file using Angular Observables

I have a JSON file named reportConfig that I need to access using Angular and TypeScript. Below is the content of my JSON file: { "accessToken": "12345", "style": "color", "projection": "globe&q ...

Merge MathJax into SystemJS compilation

I utilize SystemJS to construct an Angular 2 project and I am interested in incorporating MathJax into a component. To start using it, I executed the following commands: npm install --save-dev mathjax npm install --save @types/mathjax Now, I have success ...

Beginner: Add "shared" module elements to app.module and include them in app.component.html as part of the app's layout

I am trying to incorporate three components from a "shared" module into app.component.html. Here is my current setup: <header></header> <div class="main-wrapper"> <div class="bg-trick"></div> &l ...

Divide and display data efficiently with query cursors in Firebase

`export const firestoreCollectionDocumentsJoin = (firestore: AngularFirestore, joins: Join[], clazz: any) => { return (source: Observable) => defer(() => { let documents: any[]; const cache = new Map(); return source.pipe( distinctUntilChanged( ...

Issue with Path Alias Functionality in Bun Project Despite Accurate Configuration

I followed a guide to configure path alias at , but unfortunately, it's not working as expected. Recently I started a new Bun project with the intention of migrating a Node app to Bun. Here are the steps I took: Create a directory and initialize t ...

Can anyone provide a workaround for bypassing ts 2339 error in order to access class methods? Alternatively, is it feasible to define class methods outside of the class in typescript?

My plan is outlined below class A { constructor() { bind(this); } hello(){ this.method1(); // <-- I will get error at this line saying method one does not exist on typeOf A } } function bind(thisReference) { function method1() { ...

Preventing Circular Dependencies in RollupJS and TypeScript: Ensuring Build Failure When Circular Dependencies are Detected

I recently created a React component library using RollupJS (2.7) and TypeScript (3.9.10), and I encountered an issue with circular dependencies being reported: >> yarn build (!) Circular dependency src/index.ts -> src/components/index.ts -> sr ...

In the search for "action.payload" using Redux Toolkit

const userSlice = createSlice({ name: 'user', initialState, reducers: { // Setting the user setUser: (state, action: PayloadAction<string | null>) => { state.user.email = action.payload; }, setLoading: (state, ...

Steps for sending JSON data to a specific endpoint in an API

I recently developed a simple API using Node.js. Here is the code snippet: const Post = require('../models/article'); ... router.post('/contribute', (req, res) => { console.log('Adding new article'); let userPost = ...

in an Angular 2/5 template, when the value is not defined

When the variable user.gender is undefined, I want to automatically select the first option in a drop-down menu. <select class="form-control" formControlName="gender" [(ngModel)]="user.gender"> <option [attr.selected]="user.gender == undefined ...

When making a GET request using Angular HttpClient, an error message stating "No overload matches this call" may

One issue I am facing is with a GET method in my backend. When sending a request body as input, I receive a list of results in return. However, the problem arises in my frontend: search(cat: Cat): Observable<Cat[]> { return this.httpClient.ge ...

Searching and filtering through a paginated rest API with infinite scroll in Ionic 4+

In my Ionic app version 5.4.5, I have a RestApi set up with Node and Express.js. The issue I'm facing is that when I try to search for data, the app only looks for results on the first page. I want it to search through all the available data. How can ...

An easy guide on utilizing ngSwitch for datatype selection in Angular

While working in angular2, I came across a question regarding the usage of ngSwitch to load <div> tag based on the datatype of a variable. Is it possible to achieve something like this: <div [ng-switch]="value"> <p *ng-switch-when="isObj ...

What is the importance of nesting properties in TypeScript when transferring a complete object as a prop in React?

Let's explore an example that will result in an error: interface PersonData { name: string age: number country: string } function PersonName({data}: PersonData) { return ( <div> <h2>{data.name}</h2> </ ...

Angular 6 PUT request encountering a Cross-Origin Resource Sharing problem

I have successfully implemented GET, POST, and DELETE requests in my application, but I am encountering an issue with my first PUT query. I have confirmed that there are no issues when querying directly from Postman to my API. It seems like the problem mi ...

Troubleshooting the issue with the AWS CodeBuild SAM esbuild integration not functioning

I currently have a Lambda's API Gateway repository in CodeCommit that I successfully build using esbuild with CLI (SAM BUILD and then SAM DEPLOY). Now, I am looking to streamline the building process by integrating it with CodePipeline. I started exp ...