AgWordCloudModule.forRoot returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type

[LordRembo]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request

Current behavior

When updating to Angular 9, you get an error in angular4-word-cloud/index.d.ts while building:
AgWordCloudModule.forRoot returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type

Expected behavior

No build errors

Minimal reproduction of the problem with instructions

• update to angular 9 with Typescript 3.8.3
• build your app

What is the motivation / use case for changing the behavior?

Need to keep up-to-date with Angular and typescript versions to be able to continue using this module

Environment

• Node version: v10.19.0
• npm version: 6.13.4
• Platform: Mac
• Angular version: 9.1.11

The explanation is found here:
https://angular.io/guide/migration-module-with-providers

[ucoban]

having same issue, anyone can help ?

[LordRembo]

@ucoban After updating to Angular 10, that the error went away.

[LordRembo]

You might have to fix some Angular changes in your own code but it went smoothly for me

[ucoban]

I'm already using Angular 10 but couldn't fix that issue

[ucoban]

in index.d.ts file there is an error, ModuleWithProviders could not match with angular/core

[ucoban]

which versions are you using for angular modules, like @angular/core, @angular/router

[LordRembo]

Angular stuff is on 10.0.2, Word Cloud is on 1.0.4

"dependencies": {
    "@angular/animations": "^10.0.2",
    "@angular/cdk": "^10.0.1",
    "@angular/common": "^10.0.2",
    "@angular/compiler": "^10.0.2",
    "@angular/core": "^10.0.2",
    "@angular/forms": "^10.0.2",
    "@angular/material": "^10.0.1",
    "@angular/material-moment-adapter": "^10.0.1",
    "@angular/platform-browser": "^10.0.2",
    "@angular/platform-browser-dynamic": "^10.0.2",
    "@angular/platform-server": "^10.0.2",
    "@angular/router": "^10.0.2",
    "@angular/tsc-wrapped": "^4.4.6",
    "@angular/upgrade": "^10.0.2",
    "angular-in-memory-web-api": "^0.11.0",
    "angular4-word-cloud": "^1.0.4",

Inside my app.module.ts file I have:

import { AgWordCloudModule }    from 'angular4-word-cloud';
@NgModule({
  imports: [
    AgWordCloudModule.forRoot()

The way I import the cloud in my component typescript file:

import { AgWordCloudModule, AgWordCloudData, AgWordCloudDirective }  from 'angular4-word-cloud';

and then inside my export class:

@ViewChild('wordCloudChart', { read: AgWordCloudDirective }) wordCloudChartComponent:AgWordCloudDirective;

Usage in the html:

<div AgWordCloud 
            #wordCloudChart=ag-word-cloud 
            [wordData]="wordData"
            [options]="options"
            [width]="cloudWidth"
            [height]="cloudWidth">
          </div>

Hope that helps.

[ucoban]

Thanks for sharing, im trying now.

[ucoban]

I changed all my packages with yours but didn't work for me. Did you change anything at node_modules/angular4-word-cloud/index.d.ts ? Because when I run npm install angular4-word-cloud it creates a file like:

import { ModuleWithProviders } from '@angular/core';
export * from './ag-wordcloud.directive';
export declare class AgWordCloudModule {
static forRoot(): ModuleWithProviders;
}

If you didn't change anything here, you should have receive same error with mine. I dont understand :)

[LordRembo]

The only thing I can thing of, is that I ran Angular 10's upgrade script àfter all my node modules were installed. That script might have added a fix for ModuleWithProviders automatically.
The link I pasted in the opening comment of this issue, mentions that Angular compatibility compiler (ngcc) 'should automatically transform any non-migrated libraries to generate the proper code'.
So maybe try running that again?

[ucoban]

I've added this script in package.json to enable ngcc , and then run npm install but didn't work either.

"scripts": {
    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
},

[LordRembo]

There's probably some compilation settings that are different then. I would suggest trying out a few different things, like enabling (or disabling) Ivy. Otherwise I have no clue.
Ideally, this module just gets fixed but seems the maintainer isn't following up anymore. Maybe make a fork for it?

[LordRembo]

@ucoban one thing you could try first, is to disable the linting for node module files. I'm away from my PC, but you should be able to find some kind of json file where you can set how the typescript is handled by Angular.

The setting should be something like this:

  "linterOptions": {
        "exclude": [
            "node_modules"
        ]
    }