The error message pops up when an Angular Library being utilized by another application encounters an issue: "Function calls are not supported in decorators but 'LoggerModule' was called"

I developed an Angular library with services to be utilized in various Angular applications. The functionality works smoothly without the --prod flag, indicating it works fine without Ahead-of-Time (AOT) compilation.

However, when generating the library using ng-packagr or other methods like CLI or yeoman generators, I encounter a consistent error every time. Despite experimenting with different Angular versions (5.x.x, 6.x.x & 7.x.x), the same issue arises when invoking LoggerModule.forRoot() in the app.module of the application:

ERROR in Error during template compile of 'AppModule' 
Function calls are not supported in decorators but 'LoggerModule' was called.

I have extensively researched this problem and attempted various angularCompilerOptions in tsconfig. Any alternative suggestions from the community would be greatly appreciated. It's crucial for us that the module functions correctly with AOT (Ahead-of-Time) compilation...

NgModule declaration of the library:

@NgModule({
  declarations: [],
  imports: [],
  providers: []
})
export class LoggerModule {

  static forRoot(): ModuleWithProviders {
    return {
        ngModule: LoggerModule,
        providers: [LoggerService]
    }
  }
}

NgModule declaration of the application:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LoggerModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [AppComponent]
})
export class AppModule {
}

Answer №1

To properly set up your forRoot function, make sure to declare it outside of the module definition as shown below:

import { ModuleWithProviders } from ‘@angular/core’;
export const myForRoot: ModuleWithProviders = MyModule.forRoot();

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
        BrowserModule,
       AppRoutingModule,
       myForRoot
   ],
   providers: [],
   bootstrap: [AppComponent],
   entryComponents: [AppComponent]
})
export class AppModule {
}

Answer №2

insert

"angularCompilerOptions": { "fullTemplateTypeCheck": false, "strictInjectionParameters": true }

within your tsconfig.json file

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

Encountered a Vite issue while defining a component within an object: Unable to access properties of undefined

In my React component, I have a list of options that I am iterating through to create a UI. The issue arises when I include an icon value in the options list as Vite breaks during the build process while using QwikJS. import { IconHome, IconMail, IconPenci ...

TypeORM does not have the capability to specify the database setting within the entity decorator

As my TypeORM project grows in size and its components become more discreet yet interconnected, I am exploring ways to separate it into multiple databases while maintaining cross-database relations. To achieve this, I have been experimenting with the data ...

Storage method not found in current options

I am facing an issue with my Ionic app not functioning properly on IOS devices, even though it works fine on Android and web browsers like Chrome and Safari. The only error that is reported occurs when the application is starting related to storage creatio ...

Ways to retrieve or obtain the value of a CSS property in an Angular TypeScript file

Here is some code snippet from different files: <div #sampleComponent class="cdt-sample-component" [ngStyle]="{'height': (view_height) + 'px'}" > <app-component></app-component> </div> css ...

The issue of the list view button not responding to click events in Angular2 NativeScript

I have been working on implementing an onclick event for a listview item button. Below is the code snippet that I have tried, but unfortunately the console log is not being triggered when the button is clicked. I am unsure of what the problem might be in ...

Accessing specific elements in Typescript 3.5 using indexes

I am looking to create a type-safe getter function that has the ability to return modified values while still being sound. class Foo { a: number; b: boolean; } function getProp<K extends keyof Foo>(o: Foo, p: K): Foo[K] { switch (p) { ca ...

Struggling to upload files in .NET Core 3? The Request.Form.Files is coming up empty

After conducting extensive research and experimenting with various methods, I encountered an issue during the upgrade of my .NET Core site from version 2 to 3.2. Everything was functioning well on .NET Core 2, but upon migrating my Angular project to the n ...

The argument type '(prev: Phone[]) => Phone[]' cannot be assigned to a parameter of type 'Phone[]' in this scenario

Currently, I am utilizing the useState hook with a callback function as an argument: setLikedGadgets((prev: Phone[]) => [...prev, info]); However, I am encountering errors: Argument of type '(prev: Phone[]) => Phone[]' is not assignable t ...

Can Next.js accommodate server-side redirection with internationalization?

I'm working on a small Next.js app that has pages accessible only to logged in users. To manage the authenticated routes, I created an HOC (withAuth) that handles redirection on the server side to prevent page flashing on the client side. Everything i ...

Tips for sending data through BLE with Ionic 3 and Angular 4

Here is my first question. I am currently utilizing the cordova-plugin-ble-central plugin to transfer data through my BLE device. I am struggling to grasp the process of sending data. My objective is to transmit a group of 8 bytes using a Unit8Array. Th ...

Specify markers to suggest a literal object type that is not explicitly stated

Currently, I am developing a function that takes in a configuration parameter, which is essentially an object with a highly variable structure. Depending on the type of configuration provided, the function should output something of equally diverse structu ...

TypeScript combines strong typing for arrays into a unified array of objects

I developed a JavaScript function that can merge multiple arrays into an array of objects based on provided key names. Here’s an example: const mergeArraysToSeries = (arrs, keys) => { const merged = []; for (let dataIndex = 0; dataIndex < arrs ...

Leveraging Angular CLI in conjunction with the newest AspNetCore Angular 4 Single Page Application template

I'm currently experimenting with using Angular CLI alongside the latest JavaScriptServices AspNetCore Angular Spa template. In the past, I would simply copy and paste a .angular-cli.json file into my project's root directory, change "root" to "C ...

How to Nest Interfaces in TypeScript

I'm just starting to learn about Angular and I am having trouble getting the interface class to work properly. export interface Header { parentTitles: string; childHeaders: ChildHeader[]; titleIcon: string; url: string; } export interf ...

What led Google to create Puppeteer despite the availability of Protractor?

What was Google's reasoning behind the decision to create Puppeteer, despite the existence of Protractor, especially for Angular? ...

Is it possible to integrate Angular 2 with Thymeleaf in a single application?

I'm trying to combine Thymeleaf th: with Angular2 templates, but I'm having trouble getting them to compile together. Is there a way to make them work simultaneously? import {Component, NgModule} from '@angular/core' import {BrowserMod ...

Seeking a solution to the useRef problem. Encountering difficulties with React Hook useRef functionality within a NextJS application

Whenever I refresh the page, the 'Ref' value is displayed as null. This causes the if condition blocks not to work. I attempted to modify the useRef values but could only set it to null. When I console log the myDivRef.current, it returns "Ref: ...

Change the TypeScript type of the list in order to generate a type with key-value pairs

While experimenting with TypeScript type manipulation, I attempted to modify the type provided below type setOfFunctions = [{ name: 'hi', fun: () => number }, { name: 'world', fun: () => string }] in order to achi ...

Find components within an Angular website for WebDriver testing

I am facing a challenge with an Angular based website where elements do not have unique names or ids. The XPATH of elements keeps changing, making it difficult to create stable WebDriver tests that require constant modification after each site update. Is ...

I am experiencing difficulties with implementing Angular material components in my project

I recently encountered an issue while trying to integrate angular material into my project. Despite importing the MatFormFieldModule, I received the following error: ERROR in src/app/login/components/login/login.component.html:2:1 - error NG8001: &apo ...