NgRx 4 released

New version of NgRx finally released with new cool features 
19 July 2017   2018
JavaScript

Lightweight interpreted or JIT-compiled programming language with first-class functions.

NgRx 4 is finally out. This is reported by the Angular Blog.

Main features are: 

  • Official support for lazy loading
  • Simplified testing
  • Redesigned router integration

Let's take a better look on it and figure out, what developers brought to user.

Support for Lazy Loading

Earlier it was not very comfy to use lazy loading with NgRx. Coders faced manual loading management and unloading reducers. With this release developers added official support for lazy loading.

@NgModule({
  imports: [
    StoreModule.forRoot(appReducers),
    EffectsModule.forRoot([SourceA, SourceB]),
    RouterModule.forRoot([
      { path: ‘lazy’, loadModule: ‘./lazy.module#LazyModule’ }
    ])
  ]
})
export class AppModule { }
@NgModule({
  imports: [
    StoreModule.forFeature(‘lazy’, lazyReducers),
    EffectsModule.forFeature([SourceC]),
    RouterModule.forChild(childRoutes)
  ]
})
export class LazyModule { }

Improved Testing

NgRx now clearly separates the UI, state management, and side effects. This alone makes testing more straightforward and enjoyable.

Since reducers are synchronous pure functions, testing them was always as easy. But testing effects classes, which heavily rely on RxJS, was tricky.

The RxJS community came up with a great solution to simplify testing RxJS observables — marble testing, which makes tests visual and easy to read. Previously it was not easy to use marbles for testing effects classes, but it has changed with NgRx 4.

describe(‘My Effects’, () => {
  let effects: MyEffects;
  let actions: Observable<any>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        MyEffects,
        provideMockActions(() => actions),
        // other providers
      ],
    });

    effects = TestBed.get(MyEffects);
  });

  it(‘should work’, () => {
    actions = hot(‘—a-’, { a: SomeAction,  … });
    const expected = cold(‘—b’, { b: AnotherAction });
    expect(effects.someSource$).toBeObservable(expected);
  });
});

Redesigned Router Integration

NgRx help coders to solve one of the most difficulty development issues - state management. But it is not the only part of the state management story. The other one is the router. And, that is why, making sure that NgRx and the router work well together was a high priority for NgRx team.

Main issue of NgRx 2 router integration was that the store and the router were synchronized after that fact. This meant that resolvers and guards could not access the new state, which made them less useful. This also meant that the store could not cancel the navigation.

In order to fix it, developers had to make the Angular router more pluggable.

Learn more at Angular Blog

AngularJS to Angular Migration Tools to be Released

New tools are called ngMigration Assistant and ngMigration Forum
17 August 2018   207

The JS-development team AngularJS has released two customers' "helper" - ngMigration Assistant and Forum. The tools show which migration from AngularJS to Angular is correct, how to simplify the process as much as possible and avoid mistakes.

ngMigration Assistant is a command-line tool that analyzes any AngularJS application, regardless of size, and recommends an optimal migration path. It provides statistics on the complexity, size, and patterns of an app. Based on this data, the program offers a list of clear recommendations that simplify the transition from AngularJS to Angular, taking into account the size and complexity of the code.

You can find an example of using the ngMigration Assistant for the AngularJS phone catalog application below. Using the ngma command, registered in the directory, analysis is performed and recommendations are written.

Displaying ngMigration Assitant statistics
Displaying ngMigration Assitant statistics

Initially, the tool shows statistics of the available data, and after - the stages of preparation for migration to Angular.

NgMigration Assitant Recommendations
NgMigration Assitant Recommendations

The new ngMigration Forum collects up-to-date information on migration paths and tools that provide the transition from AngularJS to Angular. ngMigration Forum is a place for sharing experiences, solving problems and asking questions.

The last update of Angular 6.1 was released in late July 2018. In Angular, support for TypeScript 2.8 and 2.9 was added, as well as the ability to configure the router to store and restore the scrolling position