The ng2-intl encounters an issue when trying to resolve symbol values statically

I'm struggling with a common issue and can't seem to find a solution that works.

My setup involves Angular 4.2.6 along with ng2-intl 2.0.0-rc.3.

Despite trying the following code, I am still facing issues:

export function intlFactory(http:Http) {
  return new IntlStaticLoader(http, '../../locale', '.json');
}

@NgModule({
  imports: [
    IntlModule.forRoot({ 
      provide: IntlLoader,
      useFactory: intlFactory,
      deps: [Http]
    })
  ]
});

The error message I receive is:

"Function calls are not supported, consider replacing the function or lambda with a reference to an exported function"

After looking at the source code, I noticed this pattern (any suggestions on how to modify it in a forked version?):

export class IntlModule {   
    static forRoot(providedLoader: any = {
      provide: IntlLoader,
      useFactory: i18nLoaderFactory,
      deps: [Http]   }): ModuleWithProviders {
    return {
      ngModule: IntlModule,
      providers: [providedLoader, IntlService]
    };   } }

Answer №1

Upon updating to the new ngc, it seems that there has been a change in optimization which is causing issues with the callback for forRoot and ngModule annotation.

I have come across a possible solution for resolving this issue, although it may not be foolproof. It involves a similar approach to how angular/route handles forRoot and forChild. Adding the following configuration to your tsconfig file for webpack.

tsconfig.yourbuild.ts.

"compilerOptions": {
  "declaration": true,
  "stripInternal": true,
  "moduleResolution": "node",
  "module": "es2015",
  "target": "es5",
  "lib": [
    "es2015",
    "es2017",
    "dom"
  ],
  "skipLibCheck": true,
  "types": [],
  "experimentalDecorators": true,
  "emitDecoratorMetadata": true,
  "sourceMap": true,
  "inlineSources": true,
  "baseUrl": "./tmp", //set your base directory here.
  "rootDir": "./tmp", //set your base directory here.
  "outDir": "dist/"
},
"angularCompilerOptions": {
    "annotationsAs": "decorators",
    "annotateForClosureCompiler": false,
    "strictMetadataEmit": false,
    "skipTemplateCodegen": true,
    "flatModuleOutFile": "router.js",
    "flatModuleId": "@angular/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 local date format for the Ionic DatePicker?

I have successfully implemented a DatePicker in my Ionic Project, but the date is displaying in the wrong time format. Here is my function: showDatePicker(){ this.datePicker.show({ date: new Date(), mode: 'date', allowOldDates: fal ...

Having trouble with my Angular application, seems to be stuck at the loading screen. Not sure what's causing it, possibly

Hey there, I'm hoping to create a straightforward app that showcases posts. However, I've encountered an issue when deploying the initial page which is stuck on "Loading...". I believe it's a minor problem and would appreciate your assistan ...

Custom positioning of Mui Snackbar in V5

I've been attempting to position a Snackbar in the top right corner with some customization for the top property, but I'm struggling to get it to display correctly. Here's what I've tried: import React from "react"; import { ...

ng2-table ways to customize the appearance of a particular row

Hey there, I'm currently new to Angular 2 and working with ng2-table. I've successfully added a table like the one shown here to my website. Now, I'm trying to figure out how to add color to specific rows within the table. Following the ste ...

Leverage functionalities from the rxjs npm package within an Angular application without the need for npm install

In the midst of updating my Angular 4 application to use rxjs version 6.3+, I discovered that many changes in rxjs are causing issues with my existing codebase. One of the new features we need to implement requires this update, but it's proving to be ...

Modify the property of the ChildComponent by utilizing the ViewChild method

I recently started exploring Angular and I've been experimenting with ViewChild and ViewChildren. In one scenario, I have a property called today = new Date() in my Component2. I'm accessing this property in Component1 using ViewChild and continu ...

Customizing output paths for script files in angular.json with Angular

Is there a way to set up the configuration in angular.json so that script files are output as shown in the directory tree below? Note: The file aaa.js has been renamed from main.js /assets/js/aaa.js ...

How can you run a function in JavaScript or TypeScript that is stored as a string?

Is there a way to call a function that is stored as a string? For example: var dynamicFun = `function Hello(person) { return 'Hello' + person; }` In this case, the dynamicFun variable can store any function definition dynamically, such as: var ...

Having trouble with @typescript-eslint/member-ordering feature not functioning properly?

Ensuring a precise ordering in TypeScript classes is my goal, with a specific emphasis on enforcing alphabetical order within groups. To achieve this, I am refering to the following documentation: Shown below is the member-ordering configuration extracte ...

Tips for defining a function across a Angular project

I have the following configuration set up in an Angular5 project using Angular-cli 1.5 within typings.d.ts declare interface String { toSentenceCase(): string; } declare function _debug(o, message?, type?): void; inside app/core/common.ts String.pro ...

What is the best way to eliminate the content of an element using javascript/typescript?

The progress bar I'm working with looks like this: <progress class="progress is-small" value="20" max="100">20%</progress> My goal is to use javascript to remove value="20", resulting in: <progre ...

Combining Two Related API Requests using Angular Observables and RxJS

If I have two API calls that return JSON: First call (rows): { {"row": 1, detailId: "a"} {"row": 2, detailId: "b"} } Second call (rowDetails): { details: { row details } } The task at hand is to fetch rows first, then iterate through each row o ...

What is the best way to pass a conditional true or false value to React boolean props using TypeScript?

I am currently utilizing the Material UI library in combination with React and Typescript. Whenever I attempt to pass a conditional boolean as the "button" prop of the component, I encounter a typescript error stating: Type 'boolean' is not assi ...

The Angularfire library encountered an issue when trying to access the 'push' property of a null object

I am currently in the process of creating a new object in the database for an assessment. Right now, I have hardcoded it to test its functionality, but ultimately, it will be dynamic based on user input from the view. However, I am encountering an error th ...

Jasmine has detected an undefined dependency

Testing out the following code: constructor(drawingService: DrawingService) { super(drawingService); //... } private writeOnCanvas(): void { this.drawingService.clearCanvas(this.drawingService.previewCtx); this.drawing ...

Is there a way to make PrismaClient return DateTime fields as Unix timestamps rather than JavaScript date objects?

When utilizing the PrismaClient for database interaction, DateTime fields are returned as JavaScript Date objects instead of Unix timestamp numbers. Despite being stored as Unix timestamp numbers in the database itself, I require the dates to be retrieved ...

Error encountered in Jest mockImplementation: Incompatible types - 'string[]' cannot be assigned to 'Cat[]' type

Recently, I've been writing a unit test for my API using Jest and leveraging some boilerplate code. However, I hit a snag when an error popped up that left me scratching my head. Here is the snippet of code that's causing trouble: describe(' ...

Unable to display complete content of Ionic 3 webpage

Trying to print a specific part of an Ionic page which contains a long list of items. However, encountering an issue where the entire list doesn't fit on one page and requires scrolling down to view all items. Expecting the print dialog, triggered by ...

The Ngrx selector fails to activate when the reducer modifies the portion

In my Angular 2 application, I heavily utilize Ngrx stores which have proven to be extremely beneficial. I have a well-structured system in place for my stores where I use selectors to retrieve specific parts of the state. Normally, all the selectors work ...

Displaying data issue with Typescript typed array

While working with Angular 7 and Typescript 3, I encountered an issue where I was trying to pre-populate an array of ingredients in a service for use in a component. However, when I checked the console output, the array was showing empty objects. If I ini ...