Angular 12 support

[lajith111]

I'm submitting a Feature request

Motivation / Use Case

Please update library to support angular12

Expected Behavior

I have upgraded my application to angular12. Am using server side slick grid of 2.29.1 . But Slick grid is working fine except export to excel option..

Other Information

Please update to support angular 12

[ghiscoding]

well I can't wait for your contribution... This is an Open Source project

[ghiscoding]

wow I ask for a small contribution from your side and you answer back by closing the issue and downvoting the lib. Amazing!!! What a nice way to say thanks for all the time I spent on the project... The beautiful world of Open Source (sic) 🤦

[lajith111]

Actually I am from .net background.. javascript technology learning from scratch...so I would not possible to contribute to project. am struggling for implementing feature of slickgrid...so future may be try to contribute....sory for creating issue in the repo..thanks

[ghiscoding]

The start of the problem is also that there isn't enough information provided in the original issue to really be sure that it's just related to Angular 12. For example

1. you said that you upgraded to Angular 12 but what was the previous version?
2. You also said it doesn't work but without mentioning if there's any error of any kind or it just silently fails!?
3. Also I've never used Angular-Slickgrid on server side, so I'm not sure what you mean there.

I can tell you, it's really hard to maintain an Open Source library, especially more so when the lib is big enough and is maintained and mostly coded by only 1 person (me) with very few contributions.

[sapnildessai]

Hi @ghiscoding , We are using this library with angular11 as of now and it works pretty fine. Even we are curious to know if upgrade to angular12 is possible with current version of the grid? Sorry, but haven't gone through the framework changes that has been done in angular12. Thanks

[ghiscoding]

@sapnildessai Let's put it this way, I have serious doubt in thinking that it doesn't work with Angular 12 but until someone tries it then we won't know. That won't be me, I don't have time to look at that time until quite some time.

If you want to help and pushing this further, you could upgrade either the Angular-Slickgrid itself or the Angular-Slickgrid-Demos fork and contribute, that would help a lot and would be the perfect project to test with, I update them once in a while (last I've done was to upgrade to Angular 11, it's not that old).

[sapnildessai]

Hi @ghiscoding , I have tried upgrading angular version to 12 on Angular-Slickgrid project and it was a smooth transition on the first attempt itself. npm test was also successful. I can push my changes in the feature branch if you want to take a look. However when upgrading Angular-Slickgrid-Demos I got error with ng-select which does not support Angular 12 as of now. So I think we will have to wait for ng-select upgrade to support Angular 12 first and then upgrade the demo project.

Thanks

[ghiscoding]

oh very good to hear that @sapnildessai, I thought it would work too :smile: ng-select is only in Example 22 and is not at all part of Angular-Slickgrid itself (it's in the devDepencies section). It looks like they already have a PR on the ng-select lib to fix this so it's probably going to be out within couple days.

I would be happy to get 1 or 2 PRs (Pull Request) for this, I can leave it open until ng-select release their new version, which is probably going to be soon. I'll reopen the issue so we can reference the PR to it

That is good news, thank you for doing this

[ghiscoding]

@sapnildessai have you also tried the Excel Export (which was this issue related to)?

[sapnildessai]

@ghiscoding Yes. excel export seems to be working fine after upgrading to angular 12.

[jr01]

I know Angular 12 support is in the works (thanks @ghiscoding and @sapnildessai for working on that!), but anyway I wanted to report on my findings & workaround, hoping it helps someone.

I'm on Angular Slickgrid 2.25.0 and got this error after upgrading to Angular 12:

./node_modules/excel-builder-webpacker/node_modules/jszip/lib/readable-stream-browser.js:9:0-34 - Error: Module not found: Error: Can't resolve 'stream' in '...\ClientApp\node_modules\excel-builder-webpacker\node_modules\jszip\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

That excel-builder-webpacker is included by Angular slickgrid. From my package-lock.json:

"angular-slickgrid": {
      "version": "2.25.0",
      ...
      "excel-builder-webpacker": "^1.0.6",

I found a similar bug report here: https://github.com/angular/angular-cli/issues/20819 and that led me to the following workaround:

1. npm install stream-browserify

2. Add a path mapping in tsconfig.json:

   {
   ...
   "compilerOptions": {
   "paths": {
     "stream": [ "./node_modules/stream-browserify" ]
   },

3. Add stream to allowedCommonJsDependencies in angular.json:

   "options": {
           "allowedCommonJsDependencies": [
             "angular-slickgrid", "stream"
           ],

Everything works including Excel export.

[ghiscoding]

Awesome thanks to both of you for the findings and testing, I will add these valuable info to the README. Thanks a lot 🚀

EDIT Here's the link for the new instruction in the README

[lajith111]

The start of the problem is also that there isn't enough information provided in the original issue to really be sure that it's just related to Angular 12. For example

1. you said that you upgraded to Angular 12 but what was the previous version?
2. You also said it doesn't work but without mentioning if there's any error of any kind or it just silently fails!?
3. Also I've never used Angular-Slickgrid on server side, so I'm not sure what you mean there.

I can tell you, it's really hard to maintain an Open Source library, especially more so when the lib is big enough and is maintained and mostly coded by only 1 person (me) with very few contributions.

1. I have created new project and copied all files from angular 11 projects except few config files (tslint.cong).( previously i have upgraded my old anguar 11 project to angular 12 but so many error came so i have decided to create new project rather than update project)
2. It silently fails ,no error/info showing in console
3. I will share my code for reference purpose.

I am using "rxjs": "^7.1.0" may be issue in that.

But when i click to export nothing will happen before excel was downloaded.

Below is my code.

 <angular-slickgrid gridId="transactionGrid" [columnDefinitions]="columnDefinitions"
                            [gridOptions]="gridOptions" [dataset]="dataset"
                            (onAngularGridCreated)="angularGridReady($event)">
                        </angular-slickgrid>

ts.file

const GRAPHQL_QUERY_DATASET_NAME = 'transactions';

@Component({
  templateUrl: './transaction-list.component.html',
  styleUrls: ['./transaction-list.component.css']
})
export class TransactionListComponent implements OnInit {
  angularGrid: AngularGridInstance;
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset = [];
  private readonly editTransaction: string[] = ['Admin'];

  constructor(private transactionDataService: TransactionDataService,
    private authService:AuthService,
    private router: Router, private pageService: PageService) {
  }

  ngOnInit(): void {
    this.columnDefinitions = [

  { id: 'branch', field: 'branch.name', name: 'Branch', filterable: true, sortable: true, formatter: Formatters.complexObject },
 { id: 'ain', field: 'account.ain', name: 'Account No', filterable: true, sortable: true, formatter: Formatters.complexObject },
 { id: 'customerName', field: 'account.customerName', name: 'Customer Name', filterable: true, sortable: true, formatter: Formatters.complexObject },

  ];

    this.gridOptions = {
      enableAutoResize: true,
      backendServiceApi: {
        service: new GraphqlService(),
        options: {
          columnDefinitions: this.columnDefinitions,
          datasetName: GRAPHQL_QUERY_DATASET_NAME,         
        },
        process:  (query):any => this.getTransactions(),
      }
    };

  }

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
  }

  getTransactions(): Observable<GraphqlPaginatedResult> {
    var args = this.pageService.getPageArgs(this.angularGrid);

    return this.transactionDataService.searchTransactions(args)
      .pipe(map(
        (page:any) => {
          var result: GraphqlPaginatedResult = {
            data: {
              [GRAPHQL_QUERY_DATASET_NAME]: {
                nodes: page.items,              
                totalCount: page.totalCount,
              }
            }
          };

          return result;
        }));
  }

}

EDIT: my current ts.config

compilerOptions": {

    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": false,
    "strict": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": true,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": false
  }

[ghiscoding]

@lajith111 RxJS 7 is not supported, at least not yet, maybe in a new major version but that is few months away as discussed in that other issue. Don't try to upgrade too many things at the same time, unless you want disaster to go your way all the time :P

[ghiscoding]

closing since I just merged #774 and added possible ways to fix Angular 12 / WebPack 5 issues (if any). Thanks to all for the feedback provided

[ghiscoding]

hey guys, I just shipped a new version and announced the next major version that is in progress, take a look at the new Release section

EDIT

Angular-Slickgrid new major 3.x version is out, take a look at the Release section

[irfanManiyar]

do npm i url

[ghiscoding]

Awesome thanks to both of you for the findings and testing, I will add these valuable info to the README. Thanks a lot 🚀

EDIT Here's the link for the new instruction in the README

Please read carefully, the instructions should be clear enough. I'm locking the issue since the original issue was resolved long time ago