An issue has occurred with the template parsing: It is unable to bind to 'ngOutletContext' because it is not a recognized property of 'ng-template'. This may be due to it not being an Angular property

We recently upgraded our Angular app from version 4.3.2 to version 7.1.3. All packages were successfully migrated and the angular.json file is pointed to the correct location. However, we are encountering an error in the console stating "Can't bind to 'ngOutletContext'". We have not used this attribute anywhere in the app itself, but it is appearing only in the Vendor.js file. The error message is as follows:

compiler.js:2427 Uncaught Error: Template parse errors: Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'. ...

Our current Angular setup includes the following dependencies:

"devDependencies": {
    "@angular-devkit/build-angular": "^0.11.3",
    ...
    "typescript": "3.1.6"
  }

Answer №1

Substitute ngOutletContext with ngTemplateOutletContext.

This change is highlighted in the Angular update guide. For a comprehensive explanation, please refer to

https://update.angular.io/

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

Angular 7: struggling to locate the type declaration file

Everything seemed to be working fine with my project yesterday, but today I ran into an issue right after installing the ngx-pagination module: ERROR in src/app/views/dashboard/step1/step1.component.ts(1,23): error TS2688: Cannot find type definition ...

Nested Tagged Union Types in Typescript

Imagine having the following types (syntax similar to Elm/Haskell): type Reply = LoginReply | LogoutReply type LoginReply = LoginSucceeded | AlreadyLoggedIn String When trying to represent this in Typescript using discriminated unions, a challenge arises ...

Issue with API and Middleware: unable to access /api/auth/providers

Currently, I am following an educational video tutorial on Next Auth V5. Despite being a beginner in coding, I am doing my best to keep up. I am currently stuck at 2 hours, 9 minutes, and 45 seconds into the 8-hour-long video. The issue arises during th ...

A guide to implementing "Intl.DateTimeFormat" within a Next.js React component

I have a component that is being rendered on the server, making "Intl.DateTimeFormat" accessible. What is the proper way to use "Intl.DateTimeFormat" in a Next.js React component? The error message I am encountering is: Error: There was an error while hy ...

Angular: how to manually trigger change detection without using Angular's dependency injection system

Is there a way to globally initiate angular change detection without having to inject something like ApplicationRef? I am looking to utilize the functionality as a standard JavaScript function rather than a service method, in order to avoid the need for ...

Encountering a problem where the alert popup does not appear when refreshing Chrome for the first time on the homepage in an Angular application

Firstly, I want to express my gratitude for your response to my previous inquiry. I am currently encountering an issue. When landing on the homepage for the first time, the alert popup does not work. However, once inside the application, it functions prop ...

Using Angular 2+, learn how to effectively utilize and monitor the output emitter when utilizing the createComponent factory method

When I dynamically create a component in ParentComp, the code looks like this: const factory = this.resolver.resolveComponentFactory<ChildComp>(component); this.componentRef = this.container.createComponent(factory); this.componentRef.instance.dataC ...

Access PDF document in a fresh tab

How can I open a PDF file in a new tab using Angular 6? I have tried the following implementation: Rest controller: @RestController @RequestMapping("/downloads") public class DownloadsController { private static final String EXTERNAL_FILE_PATH = "/U ...

Encountering the "ERROR TypeError: Cannot read property 'id' of undefined" with Angular 4 FormArray

I have a specific requirement where checkboxes need to be added dynamically on my page. Currently, I am utilizing the Angular Reactive Forms method. The browser console displays the following error, even though the checkboxes are successfully added afterwa ...

Guide to adding npm semver to an Angular project in Ionic

Currently, I am working on an Angular project that utilizes the Ionic framework. My goal is to employ Semvar to compare the local version with the API version in order to prompt users to update. Following the installation of semver: npm install semver I ...

Tips for utilizing the React Redux useDispatch hook within a RTL test

After incorporating a redux dispatch, I am seeking to conduct testing on a React component. To achieve this, I have adopted a personalized render function from the "test-utils.ts" document: import { ReactElement } from 'react' import { render, Re ...

Troubleshooting issues with unit testing a component that utilizes a mocked service

I recently delved into testing Angular components and services. After watching a course on Pluralsight, I tried implementing some ideas from the tutorial available at . Unfortunately, I encountered an issue with testing the component method. Despite my eff ...

Is there a way in Typescript to convert an array of variables from class A to class B, where class B is an extension of class A?

Hopefully this question is unique, as I couldn't find anything similar. I have created a definition for Array<Tag>, but now I want to change it to Array<TogglableTag>. The only difference between the two classes is an additional property. ...

Sequentially subscribe to observables and execute tasks in between them

Struggling to properly chain 3 interdependent observables using the rxjs concat operator. Need to perform actions between the first and second observable, as well as after the last one. The challenge lies in passing the result of the first observable to th ...

Switching a react virtualized table from JavaScript to TypeScript can uncover some type-related challenges

I have implemented the following demo in my React project: https://codesandbox.io/s/react-virtualized-table-checbox-stackoverflow-rbl0v?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js However, I am encountering issues with the code sni ...

Creating randomized sample information within a defined timeframe using JavaScript

I'm looking to create mock data following a specific structure. Criteria: The time interval for start and end times should be either 30 minutes or 1 hour. Need to generate 2-3 mock entries for the same day with varying time intervals. [{ Id: ...

When processing JSON data, Typescript is unable to interpret a map<string,string> structure

I am currently working with Angular5 within a spring boot application and I am attempting to retrieve a Map object in JSON format. Spring : //sample method return ResponseEntity.ok((new Gson()).toJson(/*My map object*/)); Angular5 : sql_list = new Map& ...

Is it possible to define an object literal type in typescript that permits unspecified properties?

I am looking to make sure that an object argument has all the necessary properties, while also allowing for additional properties. For instance: function verifyObject(input: { key: string }) : number { return input.key; } verifyObject({ key: 'va ...

Troubleshooting: Angular2 fails to send HTTP GET requests

There seems to be an issue with the code provided in (A) where it fails to send its HTTP request when `test()` is called. In contrast, the similar code in (B) functions properly. Do you have any insights into what might be causing this problem? I can confi ...

Guide on integrating an Angular 10 Component into a cell in Ag-Grid

I am currently working with an Angular10 component, specifically a toggle switch, that I need to integrate into a specific column within my ag-grid cell. Currently, I am using a basic HTML checkbox in the following manner: colDefs: ColDef[] = [ { fiel ...