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

LordRembo commented 4 years ago

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 commented 3 years ago

having same issue, anyone can help ?

LordRembo commented 3 years ago

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

LordRembo commented 3 years ago

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

ucoban commented 3 years ago

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

ucoban commented 3 years ago

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

ucoban commented 3 years ago

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

LordRembo commented 3 years ago

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 commented 3 years ago

Thanks for sharing, im trying now.

ucoban commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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"
        ]
    }

alhazmy13 / Angular4-word-cloud