score:7

Accepted answer

mentioning the github issue here. the following solution worked for me.

import { browsermodule } from '@angular/platform-browser';
import { ngmodule } from '@angular/core';
import { appcomponent } from './app.component';

// angular highcharts imports
import {highchartsstatic} from 'angular2-highcharts/dist/highchartsservice'; 
import { chartmodule } from 'angular2-highcharts';

// factory function
export function highchartsfactory() {
  var hc = require('highcharts');
  return hc;
}

@ngmodule({
  declarations: [
    appcomponent
  ],
  imports: [
    browsermodule,
    chartmodule // import module here
  ],
  providers: [ // provide service here
    {
      provide: highchartsstatic,
      usefactory: highchartsfactory 
    },
  ],
  bootstrap: [appcomponent]
})
export class appmodule { }

score:0

i've encountered this same issue. try removing the gethighchartsmodule export from your app.module.ts and put the exported function in its own file. then import it into app.module.ts.

i have not figured out why this happens yet.

score:3

i'd like to propose an additional answer if it helps folks get past the error. i had two nearly identical applications on angular 11 sharing the same library module that has a static forroot method declaration for custom injection configuration.

@ngmodule()
export class themodule {
  static forroot(...) {
   ... 
  }
}

app a worked as expected, app b threw the error in question. of course my two apps were different in nature, so this narrows it down to infrastructure or configuration differences.

investigation

view the shared module's compiled code e.g. the-module.module.d.ts to see if there are differences there:

from the scope of the working application:

// the-module.module.d.ts
import * ...
...

export declare class themodule {
    static ɵmod: ɵngcc0.ɵɵngmoduledefwithmeta<themodule, [typeof ɵngcc4.acomponent, ...]
    static ɵinj: ɵngcc0.ɵɵinjectordef<themodule>;
}

note the emod (module) and einj (injection) definitions.

from the scope of broken app

it is missing these definitions :

// the-module.module.d.ts
export declare class themodule {
}

ok so why is the module empty for the broken app!? it must be something with compilation! looking at the root tsconfig.json

for the broken app:

the following angularcompileroptions setting was enabled:

// woops, remove this to use the newer compiler for angular versions > 9.0
"angularcompileroptions": {
    "enableivy": false
 }

this was flack left over from previous days. upon removing this, the error went away, and it enabled the compiler to interact with the shared library module and its types were populated.

when compiling aot take a look at the compiler options documentation: https://angular.io/guide/angular-compiler-options to see the details. the error message that @angularjs prints, treating it as a decorator is a "side effect", and unrelated.

score:8

this is a problem with angular in general. angular compiler wants the forroot code to be completely static.

as an example, in the following code even the assignment of the static variable will cause this error:

static forroot(config: myconfig): modulewithproviders {
    myconfigservice.config = config;// this line with cause an error
    return {
      ngmodule: httptrackerlibmodule,
    };
  }

if you are not library creator there is nothing much you can do but try library-specific solutions like the one above. but if you are a library creator you can try a static approach as follows:

  1. create an injection token:

    export const user_options = new injectiontoken<myconfig>('user_options');

  2. provide the token in your library module

static forroot(config: myconfig): modulewithproviders {
            return {
                ngmodule: httptrackerlibmodule,
                providers: [{
                    provide: user_options,
                    usevalue: config
                }],
            };
        }

  1. use the token using di elsewhere:

export class configservice {
  constructor(@inject(user_options) private _config: myconfig) {

  }
}


Related Query

More Query from same tag