Clarity 3 enhancement: Encounter of NullInjectorError with TreeFocusManagerService

Upon updating my project to Angular9/Clarity3 from Angular8/Clarity2, I encountered some issues while navigating the app. I was able to fix some problems, but now I'm facing a NullInjectorError:

    ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[TreeFocusManagerService -> TreeFocusManagerService -> TreeFocusManagerService]: 
  NullInjectorError: No provider for TreeFocusManagerService!
Error: NullInjectorError: No provider for TreeFocusManagerService!
    at NullInjector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.NullInjector.get (core.js:937) [angular]
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (core.js:11565) [angular]
    ...

The related template code is:

<clr-wizard-page #page1 [clrWizardPageNextDisabled]="pageOneDisabled">
    <ng-template clrPageTitle>Scelta asset</ng-template>
    <clr-tree-node *ngIf="assets">
        Asset
        <ng-template [clrIfExpanded]="true">
            <clr-tree-node *ngFor="let asset of assets" [(clrSelected)]="asset.selected">
                {{asset.description}}
            </clr-tree-node>
        </ng-template>
    </clr-tree-node>
</clr-wizard-page>

In addition, I'm also encountering another problem in the TS file:

this.wizard.navService.goTo(this.wizard.navService.pageCollection.firstPage);

Here is the logged error:

ERROR TypeError: Cannot read property 'navService' of undefined
    at FundTypeModelWizardComponent.push../src/app/modules/flows/components/fund-type-model/fund-type-model-wizard/fund-type-model-wizard.component.ts.FundTypeModelWizardComponent.initComponentsState (fund-type-model-wizard.component.ts:144)
    ...

At this point, I'm unsure if these two issues are related. Any suggestions on how to proceed would be greatly appreciated! Thank you.

typescripttreeviewangular9clarity

Answer №1

If you're encountering the same problem, make sure to use the entire hierarchy from clarity. I faced the exact issue and it took up half of my day. Your code structure should resemble the following:

<clr-wizard-page #page1 [clrWizardPageNextDisabled]="pageOneDisabled">
    <ng-template clrPageTitle>Scelta asset</ng-template>
       <clr-tree>
          <clr-tree-node *ngIf="assets">
          Asset
           <ng-template [clrIfExpanded]="true">
            <clr-tree-node *ngFor="let asset of assets" [(clrSelected)]="asset.selected">
                {{asset.description}}
            </clr-tree-node>
           </ng-template>
         </clr-tree-node>
       </clr-tree>
</clr-wizard-page>

By adding the clr-tree tag, this resolved the issue for me. Give it a try to see if it works for you too.

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

Adding a total property at the row level in JavaScript

Here is a JavaScript array that I need help with: [{ Year:2000, Jan:1, Feb: }, {Year:2001, Jan:-1, Feb:0.34 }] I want to calculate the total of Jan and Feb for each entry in the existing array and add it as a new property. For example: [{ Year:2000, Ja ...

javascripttypescript

Can you explain the inner workings of the recursive rendering in Material UI's TreeView?

I'm currently working on dynamically rendering the Material UI TreeView. My goal is to add new nodes when a node is expanded. I've encountered some issues while attempting to achieve this. I have a JSON data variable containing nodes, and I am ad ...

reactjsmaterial-uitreeview

Whenever I try to import a function, I encounter the error message "no exported member."

I am facing an issue with my node/typescript application where I am attempting to import a function from another file. In order to export it, I utilized exports.coolFunc = coolFunc, and for importing, I used import {coolFunc} from '../controller/coolS ...

javascriptnode.jstypescriptexport

Angular Form: displaying multiple hashtags within an input field

Utilizing Angular CLI and Angular Material, I have created a form to input new hashtags. I am facing difficulty in displaying previously added hashtags in the input field. Below is the code I have written: form.component.html <form [formGroup]="crea ...

angulartypescriptangular-material

Automatically injecting dependencies in Aurelia using Typescript

Recently, I started working with Typescript and Aurelia framework. Currently, I am facing an issue while trying to implement the @autoinject decorator in a VS2015 ASP.NET MVC 6 project. Below is the code snippet I am using: import {autoinject} from "aure ...

javascripttypescriptaurelia

Utilizing Class Types in Generics with TypeScript

Struggling to implement a factory method based on the example from the documentation on Using Class Types in Generics, but hitting roadblocks. Here's a simplified version of what I'm attempting: class Animal { legCount = 4; constructor( ...

typescript

Create a pinia state by defining it through an interface without the need to manually list out each property

Exploring the implementation of state management (pinia) within a single-page application is my current task. We are utilizing typescript, and I am inquiring about whether there exists a method to define a state based on an interface without needing to ret ...

typescriptvue.jsstate-managementpinia

Encountering an Issue with Vue 3 and Vue Router 4: Uncaught TypeError - Trying to Access Undefined Properties (specifically 'push')

I'm currently working with Vue 3, Vue Router 4, and TypeScript in my project. However, I've encountered an issue while trying to utilize router.push(). Every time I attempt this, I receive a console error stating: Uncaught (in promise) TypeError: ...

typescriptvue.jsvue-router

Angular HTTP post is failing on the first attempt but succeeds on the second try

Just started working on my first Angular exercise and encountered an issue where I am receiving an undefined value on the first attempt from an HTTP post request. However, on the second try, I am getting the proper response in Edge and Firefox. Thank you f ...

jsonangularhttptypescriptpost

The issue with Rxjs forkJoin not being triggered within an Angular Route Guard

I developed a user permission service that retrieves permissions from the server for a specific user. Additionally, I constructed a route guard that utilizes this service to validate whether the user possesses all the permissions specified in the route. To ...

angulartypescriptrxjs

The attribute 'title' cannot be found within the type 'IntrinsicAttributes & IProps'

Hello, I am currently facing an issue where I am trying to hide an item in a different view using interfaces. The specific error I am encountering is mentioned in the title of this query. Let me provide you with part of the code to give you more context: ...

reactjstypescript

Utilizing v-for in Vue with TypeScript to generate multiple checkboxes

My goal was to capture the values of checkboxes and store them in an array using v-model. However, I encountered an issue where the first time I toggle a checkbox, it doesn't register. Only after checking a second box and hitting submit does the secon ...

javascripttypescriptvue.js

When evaluating code with eval, properties of undefined cannot be set, but the process works seamlessly without

Currently, I am attempting to utilize the eval() function to dynamically update a variable that must be accessed by path in the format myArray[0][0[1][0].... Strangely enough, when I try this approach, I encounter the following error: Uncaught TypeError: ...

javascripttypescriptvue.jsvuejs3

Issue with Typescript Application not navigating into the node_modules directory

After attempting to load the app from the root directory of our server, it became clear that this was not a practical solution due to the way our application uses pretty URLs. For instance, trying to access a page with a URL like http://www.website.com/mod ...

javascripttypescriptangular

Tips for Modifying the currentUrl identifier in Angular 2

I am trying to change the ID property of my currentUrl object within my component. My goal is for the ID to update and then fetch the corresponding data based on that ID. However, I keep encountering this error message: "Cannot assign to read only propert ...

javascriptangulartypescript

The error message indicates that the property 'current' is not found in the type '[boolean, Dispatch<SetStateAction<boolean>>]'

During my React/Typescript project, I encountered an issue involving cursor animations. While researching the topic, I stumbled upon a CodePen (Animated Cursor React Component) that functioned perfectly. However, when attempting to convert it into a Types ...

javascriptreactjstypescript

Tips for sending back a response after a request (post | get) is made:

In the service, there is a variable that verifies if the user is authorized: get IsAuthorized():any{ return this.apiService.SendComand("GetFirstKassir"); } The SendCommand method is used to send requests (either as a post or get request): ApiServi ...

javascripttypescriptangular7

Issue with displaying entire object using Jest and console.dir

I'm having trouble displaying an error in my Jest test because it's not showing all the levels as expected. import util from 'util' describe('Module', () => { it('should display all levels WITHOUT util', () =& ...

javascripttypescripttestingjestjsconsole.dir

Having trouble resolving the typescript package while integrating with another module

Attempting to develop a basic npm package with TypeScript and bundle it using webpack. When trying to use the package in another module, such as a react application named 'module A.' Within module A, the 'myLibrary' package is installe ...

reactjstypescriptwebpack

Retrieve the child nodes from the array and organize them into a

Given an array of regions, where the highest region has key: 10 and parent_id: null, the goal is to restructure this array in order to return a tree representation. The desired regions tree structure for input [10] should be: Egypt Zone 1 Tagamo3 Giza H ...

javascripttypescript