Getting "StaticInjectorError(RootModule)[FileManagerEffectsService -> Actions]: " in console

[gotephodevishal]

Hi @qjon , First of all, Thanks for helping me in solving module import issue. Now I am stuck with 2 problems - 1.Now when running that file manager page in browser console gives an StaticInjectorError as below -

2. Can you explain or guide about how I can implement the back-end API side functionality to link tree folder structure to blob storage. I didn't find useful information anywhere on internet.

[qjon]

Ad. 1. It seems that you miss some other modules that have to be initialized:

imports: [
  ...,
  BrowserAnimationsModule,
  ConfirmationPopoverModule.forRoot(),
  EffectsModule.forRoot([]),
  FileManagerModule.forRoot(fileManagerConfiguration),
  StoreModule.forRoot({}),
  TreeModule.forRoot(),
  TranslateModule.forRoot(),
]

Ad.2 You have to implement on your backend endpoint to get list of items like this one

interface IOuterNode {
    id: string;
    treeId?: string;
    name: string;
    parentId?: string | null;
    children?: Array<string>;
    parents?: Array<string>;
}

Also endpoint for files should return list of items like

interface IOuterFile {
    id: string | number;
    folderId?: string;
    name: string;
    thumbnailUrl: string;
    url: string;
    width: number;
    height: number;
    type: string;
    data?: string;
    size?: number;
    selected?: boolean;
}

You can clone repository and run:

npm run backend npm run startWithBackend

Then you will see communication with node server it should be easy to implement, if you have any further question do not hesitate to write or send me email directly.

[gotephodevishal]

Hi @qjon , about my first question, I have initialized all the modules specified in demo example properly without any error. Take a look at my code and tell me if I am making any mistake.

import { FileManagerModule, IFileManagerConfiguration } from '@rign/angular2-filemanager';

import { TranslateModule, TranslateService } from 'ng2-translate';
import { HttpClientModule } from '@angular/common/http';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TreeModule } from '@rign/angular2-tree';
import { ConfirmationPopoverModule } from 'angular-confirmation-popover';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

const fileManagerConfiguration: IFileManagerConfiguration = {
    urls: {
        foldersUrl: '/api/folder',
        filesUrl: '/api/files',
        folderMoveUrl: '/api/folder/move'
    },
    isMultiSelection: true,
    mimeTypes: ['image/jpg', 'image/jpeg', 'image/png'],
    maxFileSize: 50 * 1024,
    allowChooseMultipleFiles: true
};

@NgModule({
    imports: [     
        FileManagerModule.forRoot(fileManagerConfiguration),
        BrowserAnimationsModule,
        ConfirmationPopoverModule.forRoot(),
        EffectsModule.forRoot([]),        
        FormsModule,
        HttpClientModule,
        StoreModule.forRoot({}),
        StoreDevtoolsModule.instrument(),
        TreeModule.forRoot(),
        TranslateModule.forRoot()
    ],
    declarations: [
       ...
    ],
    exports: [
        AddMemberModalComponent,
    ],
    providers: [
      ....
    ]
})
export class MyModule {
    public constructor(private translate: TranslateService) {
        this.setTranslationForEN();
        this.translate.use('en');
    }

    private setTranslationForEN(): void {
        this.translate.setTranslation('en', {
            RI_TREE_LBL_ADD_NODE: 'Add data',
            RI_TREE_LBL_EDIT_NODE: 'Edit data',
            RI_TREE_LBL_REMOVE_NODE: 'Delete data',
            RI_TREE_LBL_DROP_ZONE: 'Drop here to move data to root level',
            RI_FM_BTN_LANDSCAPE: 'Landscape',
            RI_FM_BTN_PORTRAIT: 'Portrait',
            RI_FM_BTN_SAVE: 'Save',
            RI_FM_LBL_CHOOSE_SELECTION: 'Choose selection',
            RI_FM_LBL_DELETE_SELECTION: 'Delete selection',
            RI_FM_LBL_INVERSE_SELECTION: 'Inverse selection',
            RI_FM_LBL_SEARCH_FOR: 'Search for...',
            RI_FM_LBL_SELECT_ALL: 'Select all',
            RI_FM_LBL_UNSELECT_ALL: 'Unselect all',
        });
    }
}

Here's the code on componont file -

import { Component, AfterViewInit, Injector, NgModule } from '@angular/core';
import { FileManagerConfiguration, FileManagerDispatcherService } from '@rign/angular2-filemanager';
export class MyComponent implements AfterViewInit{

    public constructor(
        injector: Injector,
        public fileManagerConfiguration: FileManagerConfiguration,
        private fileManagerDispatcher: FileManagerDispatcherService,
    ) {
        super(injector);
    }
    public toggleMultiSelection() {
        debugger;
        this.fileManagerConfiguration.isMultiSelection = !this.fileManagerConfiguration.isMultiSelection;

        if (!this.fileManagerConfiguration.isMultiSelection) {
            this.fileManagerDispatcher.unSelectAllFiles();
        }
    }
    ngAfterViewInit(): void {
    }
}

Here is the html -

<div class="container">
                        <h1>Filemanager</h1>
                        <div class="configuration-bar">
                            <button class="btn btn-primary" (click)="toggleMultiSelection()">
                                <i class="fa" [ngClass]="{'fa-check-square': this.fileManagerConfiguration.isMultiSelection, 'fa-square': !this.fileManagerConfiguration.isMultiSelection}"></i>
                                <span>Use multiselection</span>
                            </button>
                        </div>
                        <ri-filemanager>Loading...</ri-filemanager>
                    </div>

[qjon]

Hi,

This is good example. It should work. Based on the error, it seems that you have some problem with @ngrx/store. Could you attach package.json file?

[gotephodevishal]

package_json.txt

Hi, here is my package.json file.Take a look through it.

[qjon]

So, thanks for your package.json file. I tried to reproduce yours issue in such way:

1. I create new project with angular-cli 1.7.1
2. Replace original package.json by file that you send me
3. I modify original app component and html file
4. Attach CSS files from bootstrap, font awesome and filemanager
5. Run project - everything works fine

Please try do this by yourself. So based on that example I suppose that it is some problem with your application or configuration of other modules.

[gotephodevishal]

Hi @qjon , Thanks for your support and guidance.I will try this again from beginning to avoid this conflict. I appreciate your valuable support.