Angular 9 support

[Mysame]

• [x] I have read the README and API docs (if applicable); the issue is not covered there.
• [x] I have searched the repository issues and pull requests; my query is not covered there.

---

• Describe the feature: Since Angular 9 is in rc (rc-6 at time of writing), it's best to allow compatibility.

---

[Alorel]

Hey, there's a WIP pull request for ng9 @ #242, but I haven't had time to finish everything, it'll most likely get done over the weekend or early next week :+1:

[EKashpersky]

To use NgForage with Ivy you need to create own factory like so:

[EKashpersky]

@Mysame have a look

[EKashpersky]

@Alorel I think this issue can be closed because solution has been found.

[Mysame]

@EKashpersky I thank you for the work-around, however I wouldn't call it a solution. I'm sure @Alorel will get to it once he's well rested.

[nlappe]

@EKashpersky Thanks, this really helped me.

[debender495]

with Ivvy eneabled in Angular 9, I get below error, core.js:5871 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'getInstance' of undefined TypeError: Cannot read property 'getInstance' of undefined at NgForage.get store [as store] (ngforage.js:573) at NgForage.getItem (ngforage.js:670)

in the function get store() { if (this.storeNeedsRecalc || !this[store$]) { this[store$] = this.fact.getInstance(this.finalConfig); this.storeNeedsRecalc = false; } return this[store$]; }

this.fact is undefined

NgForage {config: {…}, baseConfig: undefined, fact: undefined} activeDriver: (...) description: (...) driver: (...) name: (...) size: (...) storeName: (...) version: (...) finalConfig: (...) store: (...) config: {} baseConfig: undefined fact: undefined proto: NgForage

Any suggestions pls!

[nlappe]

@debender495 did you try the code @EKashpersky provided? This worked for me.

i just added the following in the provider section of my app.module.ts

...
{
      provide: NgForage,
      // @ts-ignore
      useFactory: (ngForageConfig: NgForageConfig) => new NgForage({}, new InstanceFactory(ngForageConfig)),
      deps: [
        NgForageConfig,
      ]
    }
...

[SillyCoon]

@debender495 try the same provide options to NgForageCache instead of NgForage, if you use it. It works for me, but I still can't use custom config.

[debender495]

yes, the work around of adding below in the app.module.ts works,

{ provide: NgForage, useFactory: (ngForageConfig: NgForageConfig) => // @ts-ignore new NgForage({}, new InstanceFactory(ngForageConfig)), deps: [NgForageConfig] }

Thanks guys...

[wlucha]

The work arounds doesnt work for me. I still get the "Cannot read property 'getInstance' of undefined" error.

ngforage: 5.0.1 localforage: 1.7.3 @angular/core: 9.1.0-next.4

[debender495]

@wlucha can u share ur app.module poroviders section

[nlappe]

@wlucha can you provide your implementation please?

[wlucha]

Hey,

ngforage: 5.0.1 localforage: 1.7.3 @angular/core: 9.1.0-next.4 @angular/elements: 9.1.0-next.4 Target: ES2015

The project is using Angular Elements. I need to use angular v9.1.0-next.4 because of a current Angular Elements bug.

This is my app.module.ts:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserAnimationsModule, BrowserModule, ...modules, HttpClientModule, ReactiveFormsModule,
    NgForageModule.forRoot()],
  exports: [...modules],
  entryComponents: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: SdsHttpInterceptor,
      multi: true
    },
    {
      provide: ErrorStateMatcher,
      useClass: ShowOnDirtyErrorStateMatcher
    },
    {
      provide: NgForage,
      useFactory: (ngForageConfig: NgForageConfig) =>
        // @ts-ignore
        new NgForage({}, new InstanceFactory(ngForageConfig)),
      deps: [NgForageConfig]
    }
  ],
})
export class AppModule {

  constructor(private injector: Injector, ngfConfig: NgForageConfig) {
    ngfConfig.configure({
      name: 'AppPageApp'
    });
  }

Running the app with ng serve, I get the following error:

Thanks in advance! :)

[wottpal]

Can't get it to work either. Can somebody share his full working app.module.ts? Would be great!

[debender495]

import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {BrowserModule, Title} from '@angular/platform-browser'; import {APP_INITIALIZER, NgModule} from '@angular/core'; import {HttpClientModule} from '@angular/common/http'; import {AppRoutingModule} from './app-routing.module'; import {SharedModule} from './shared/shared.module'; import {CoreModule} from './core/core.module'; import {AuthModule} from './auth/auth.module'; import {NgxsReduxDevtoolsPluginModule} from '@ngxs/devtools-plugin'; import {NgxsRouterPluginModule} from '@ngxs/router-plugin'; import {NgxsResetPluginModule} from 'ngxs-reset-plugin'; import {NgxsModule} from '@ngxs/store'; import {PlanUpdaterGuard} from './plan-updater/plan-updater.guard'; import {AuthInitializer} from './auth/auth-initializer.service'; import {AuthGuard} from './auth/auth.guard'; import {ErrorPageNosfcComponent} from './error-page/error-page-nosfc/error-page-nosfc.component'; import {MainworkbenchComponent} from './mainworkbench/mainworkbench.component'; import {ErrorPageComponent} from './error-page/error-page.component'; import {HomeComponent} from './home/home.component'; import {AppComponent} from './app.component'; import {PreDefinedScenarioSelectState} from './core/store/editor/predefined-scenario-select.state'; import {SequenceCommentState} from './core/store/sequence-comment/sequence-comment.state'; import {ExporterDescriptorState} from './core/store/export/exporter-descriptor.state'; import {PreDefinedScenarioState} from './core/store/editor/predefined-scenario.state'; import {PrepareOperationState} from './core/store/prepare/prepare-operation.state'; import {ConfigurationItemTypeState} from './core/store/editor/options-view.state'; import {ExpressionEditorState} from './core/store/editor/expression-editor.state'; import {PlatformSelectState} from './core/store/platform/platform-select.state'; import {OperationsViewState} from './core/store/editor/operations-view.state'; import {PlanUpdaterState} from './core/store/plan-updater/plan-updater.state'; import {FormStatusState} from './core/store/form-status/form-status.state'; import {EditorLayoutState} from './core/store/editor/editor-layout.state'; import {ExpressionState} from './core/store/expression/expression.state'; import {AnchorNavState} from './core/store/ancore-nav/anchor-nav.state'; import {OperationState} from './core/store/operation/operation.state'; import {CommentState} from './core/store/editor/comment-view.state'; import {PlatformState} from './core/store/platform/platform.state'; import {PrepareState} from './core/store/prepare/prepare.state'; import {SideBarState} from './core/store/editor/sidebar.state'; import {UiLayoutState} from './core/store/ui/ui-layout.state'; import {ExportState} from './core/store/export/export.state'; import {EditorState} from './core/store/editor/editor.state'; import {AboutState} from './core/store/about/about.state'; import {AuthState} from './auth/auth.state'; import {APP_CONFIG, APP_DI_CONFIG} from './app-config.constants'; import {LabelState} from './core/store/git-store/label/label.state'; import {ReleasePackageBranchState} from './core/store/git-store/release-package-branch/release-package-branch.state'; import {BranchLabelState} from './core/store/git-store/branch-label/branch-label.state'; import {PersistentDataLoaderState} from './core/store/persistent-data-loader/persistent-data-loader.state'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import {InstanceFactory, NgForage, NgForageConfig} from 'ngforage'; import {FileMergeState} from './core/store/git-store/file-merge/file-merge.state';

@NgModule({ declarations: [ AppComponent, HomeComponent, MainworkbenchComponent, ErrorPageComponent, ErrorPageNosfcComponent ], imports: [ AuthModule, CoreModule, SharedModule, BrowserModule, HttpClientModule, BrowserAnimationsModule, NgxsModule.forRoot([ PrepareState, PlatformState, PlatformSelectState, ExporterDescriptorState, ExportState, EditorState, EditorLayoutState, UiLayoutState, ExpressionState, OperationState, CommentState, SideBarState, ConfigurationItemTypeState, PreDefinedScenarioState, LabelState, AuthState, PreDefinedScenarioState, ReleasePackageBranchState, FormStatusState, PreDefinedScenarioSelectState, OperationsViewState, BranchLabelState, AnchorNavState, PlanUpdaterState, ExpressionState, ExpressionEditorState, AboutState, SequenceCommentState, PrepareOperationState, PersistentDataLoaderState, FileMergeState ]), NgxsRouterPluginModule.forRoot(), NgxsReduxDevtoolsPluginModule.forRoot(), NgxsResetPluginModule.forRoot(), AppRoutingModule, FontAwesomeModule ], providers: [ AuthGuard, PlanUpdaterGuard, Title, AuthInitializer, { provide: APP_INITIALIZER, useFactory: (ai: AuthInitializer) => () => ai.load(), deps: [AuthInitializer], multi: true, }, { provide: APP_CONFIG, useValue: APP_DI_CONFIG }, { provide: NgForage, useFactory: (ngForageConfig: NgForageConfig) => // @ts-ignore new NgForage({}, new InstanceFactory(ngForageConfig)), deps: [NgForageConfig] } ], bootstrap: [AppComponent] }) export class AppModule {

}

[Alorel]

Library updated for Angular 13 :v: