Unable to resolve all parameters for the RouterUtilities class

My goal is to develop a RouterUtilities class that extends Angular's Router. Despite the app running and compiling smoothly, when I run ng build --prod, it throws an error message like this:

ERROR in : Can't resolve all parameters for RouterUtilities in .../utils/router/router-utilities.ts: (?, [object Object], [object Object], [object Object], [object Object], [object Object],
[object Object], ?).

router-utilities.ts

import { Compiler, Injectable, Injector, NgModuleFactoryLoader, Type } from '@angular/core';
import { Location } from '@angular/common';
import { Router, UrlSerializer, ChildrenOutletContexts, Routes } from '@angular/router';
import { formatPattern } from 'url-matcher';

import { Dictionary } from '../../../shared/interfaces/common.interface';

@Injectable()
export class RouterUtilities extends Router {
  constructor(rootComponentType: Type<any> | null,
              urlSerializer: UrlSerializer,
              rootContexts: ChildrenOutletContexts,
              location: Location,
              injector: Injector,
              loader: NgModuleFactoryLoader,
              compiler: Compiler,
              config: Routes) {
    super(rootComponentType, urlSerializer, rootContexts, location, injector, loader, compiler, config);
  }

  static getAbsoluteRoute(routePath: string, params: Dictionary<string> = {}): string {
    return 'something';
  }
}

Do you have any insights on why this error occurs?

  1. I've added RouterUtilities to the module's providers.
  2. I haven't injected this service into any component or service yet.
  3. The error persists even though the service hasn't been utilized.

Answer №1

When you opt for the --prod build, there is a noticeable difference. The Compiler is only accessible in Just-in-Time (JIT) compilation mode, while using the --prod flag enables Ahead-of-Time (AOT) compilation. As a result, when Angular attempts to compile your service into factory, it may struggle to locate the necessary Compiler dependency.

You might find some insights in this lengthy discussion on GitHub: long github discussion

Answer №2

To resolve the issue, it was necessary to add the Router in dependencies as shown below:


providers: [
  {
    provide: RouteHandler,
    useClass: RouteHandler,
    deps: [Router]
  }
]

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

What is the process for including a custom Jasmine matcher definition in Typescript?

I've been searching around for information on creating custom Jasmine matchers using TypeScript and it seems like a common issue. However, none of the solutions I've come across have worked for me. My setup includes: { "typescript": "2.3.2", ...

Retrieve the specified data stored within the ngValue attribute of an Angular 4 component

I am currently working on an Angular 4 project and I have a requirement to extract the value of the selected option from a dropdown menu in my component. Specifically, I am trying to retrieve the value of policyType.id, which is stored in the [ngValue] att ...

An effective method for adding information to a REDIS hash

My current computing process involves storing the results in the REDIS database before transferring them to the main database. At the moment, I handle operations in batches of 10k items per chunk using a separate GAE instance (single-threaded computing wi ...

The Response Header for JWT in Angular2 Spring Boot is not appearing

I am encountering an issue with my Angular2 client, Angular-cli, Spring Boot 1.4.0, and jwt setup. When I sign in from my Angular2 client, I am unable to retrieve the jwt token. My security configuration is as follows: @Configuration @Order(SecurityPrope ...

Troubleshooting: In Angular 9 Material, the span element is not properly displaying the value selected from

Currently, I am tackling a project that involves creating a custom component to incorporate Angular Material's mat-select. The issue at hand is that while the data and value for select options (mat-option) are correctly populated in the business logic ...

Can you explain the variance between the (Record<string, unknown>) and object type?

Can you explain the distinction between type Record<string, unkown> and type object? Create a generic DeepReadonly<T> which ensures that every parameter of an object - and its nested objects recursively - is readonly. Here's the type I c ...

When a reaction function is triggered within a context, it will output four logs to the console and

My pokemon API application is encountering some issues. Firstly, when I attempt to fetch a pokemon, it continuously adds an infinite number of the same pokemon with just one request. Secondly, if I try to input something again, the application freezes enti ...

Is there a way to adjust the width of a table cell in Material UI using React?

I encountered a problem where I am attempting to adjust the width of a table cell, specifically in Typescript. However, I am only able to choose between medium and small sizes for TableCellProps. Is there a workaround for this issue? I am looking to expand ...

Ensuring typescript req.user in Passport JS is always defined: Best practices

When utilizing Passport JS, the req.user within the route is considered potentially undefined. However, the middleware prior to my route method ensures that this scenario does not occur. How can I convey this information to TypeScript? Object may be &apos ...

What causes the inconsistency in TypeScript's structure typing?

It is well-known that TypeScript applies structure typing, as demonstrated in the following example: interface Vector { x: number; y: number; } interface NamedVector { x: number; y: number; name: string; } function calculateLength(v: Vecto ...

Troubleshooting problem with Angular 2 in Internet Explorer related to the use of [style]="

I've encountered a challenge while using angular 2 (2.0.0-beta.17). The app works perfectly on most browsers, but as expected, IE 11 is causing trouble. The scripts included in the head for angular are: <script type='text/javascript' sr ...

WebStorm is not implementing the exclude option as specified in the tsconfig.json file

Is there a way to exclude a directory from TypeScript compilation in WebStorm? Despite specifying the exclusion in the tsconfig.json file, it seems that WebStorm doesn't respect the setting and compiles everything in the root directory. However, runn ...

How to Create a Dependency on Tabs for Selecting Items in an Angular 7 Materials Dropdown List

I am currently working with angular 7 in combination with angular materials. In my project, I have implemented a tab as well as a selection list. What I aim to achieve is that the items displayed in the selection list are dependent on the chosen tab in th ...

What is the best method for setting a dash as the default value in a template?

My HTML code in Angular 8 includes the following: <span>{{post.category || '-'}}</span> If post.category is empty, a dash is shown as expected. However, I am facing two other situations: <span>{{post.createdAt || '-&apo ...

What is the best way to set up environments for Google App Engine (GAE

After developing a web app with server and client components, I decided to deploy it to Google Cloud using App Engine. Although the deployment process was successful, the main issue lies in the non-functioning env_variables that are crucial for the applic ...

Creating a distinct input for each row in a table using Angular 2

I am encountering an issue with inputs being created for each row in my PrimeNG/datatable. The problem arises from the local variable #itsmIncident, which causes confusion when trying to pass values to the "Save" button as there are multiple rows involve ...

Error encountered during Typescript compilation in Angular9 using Babylon4.1.0 - Unable to locate 'react' module or namespace 'JSX' not found

I am currently encountering compilation issues with Babylon4.1.0 within an angular9 app. It appears that the inspector is having trouble importing the internally used "react" module. To reproduce the issue: * Create a new angular9 app using the CLI * Add @ ...

Is it possible to retrieve a static resource within server-side code in NextJs?

Exploring the static render feature of NextJS to generate a static version of my website has led me to ensure that all necessary data is provided for the initial page render. I have stored several blog posts as .md files in /static and aim to access them ...

Having difficulty subscribing to multiple observables simultaneously using withLatestFrom

I am facing an issue where I have three observables and need to pass their values to a service as parameters. I attempted to do this using WithLatestFrom(), but it works fine only when all values are observables. this.payment$.pipe( withLatestFrom(this.fir ...

What is the purpose of using both forRoot() and forChild() in the RouterModule

What is the purpose of Angular RouterModule using forRoot() and forChild() methods? I recently learned about the forRoot pattern and how it protects provider singletons from being imported multiple times (https://angular.io/guide/singleton-services#the-fo ...