Platform: [Migration failed] The road to v9 at @ngrx/router-store

[dtodt]

When I run ng update @ngrx/store, to migrate from 8.6 to the latest, the migration fails on @ngrx/router-store.
I'm not sure that its a bug, but the error log doesn't point me to any direction that I can do to fix it.

Here's the log:

The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via yarn.
Installed packages for tooling via yarn.
Using package manager: 'yarn'
Collecting installed dependencies...
Found 81 dependencies.
Fetching dependency metadata from registry...
    Updating package.json with dependency @ngrx/store @ "9.2.0" (was "8.6.0")...
    Updating package.json with dependency @ngrx/effects @ "9.2.0" (was "8.6.0")...
    Updating package.json with dependency @ngrx/entity @ "9.2.0" (was "8.6.0")...
    Updating package.json with dependency @ngrx/store-devtools @ "9.2.0" (was "8.6.0")...
    Updating package.json with dependency @ngrx/schematics @ "9.2.0" (was "8.6.0")...
    Updating package.json with dependency @ngrx/router-store @ "9.2.0" (was "8.6.0")...
UPDATE package.json (4052 bytes)
✔ Packages installed successfully.
** Executing migrations of package '@ngrx/effects' **

❯ The road to v9
  Migration completed.

** Executing migrations of package '@ngrx/router-store' **

❯ The road to v9
✖ Migration failed: Cannot read property 'kind' of undefined
  See "/private/var/folders/5q/vp21tsm932z9chmrch5ch6tc0000gn/T/ng-2jDG4n/angular-errors.log" for further details.

✨  Done in 45.30s.

Contents of:
/private/var/folders/5q/vp21tsm932z9chmrch5ch6tc0000gn/T/ng-2jDG4n/angular-errors.log

[error] TypeError: Cannot read property 'kind' of undefined
    at Object.isObjectLiteralExpression (/my-machine-path/my-project/node_modules/typescript/lib/typescript.js:11163:21)
    at findClassDeclaration (/my-machine-path/my-project/node_modules/@ngrx/router-store/schematics-core/utility/visitors.js:121:21)
    at visitNodes (/my-machine-path/my-project/node_modules/typescript/lib/typescript.js:18440:30)
    at Object.forEachChild (/my-machine-path/my-project/node_modules/typescript/lib/typescript.js:18673:24)
    at visitDecorator (/my-machine-path/my-project/node_modules/@ngrx/router-store/schematics-core/utility/visitors.js:99:12)
    at visitNgModules (/my-machine-path/my-project/node_modules/@ngrx/router-store/schematics-core/utility/visitors.js:95:9)
    at visitNgModuleProperty (/my-machine-path/my-project/node_modules/@ngrx/router-store/schematics-core/utility/visitors.js:77:9)
    at Object.visitNgModuleImports (/my-machine-path/my-project/node_modules/@ngrx/router-store/schematics-core/utility/visitors.js:69:9)
    at /my-machine-path/my-project/node_modules/@ngrx/router-store/migrations/9_0_0/index.js:20:35
    at Object.visitTSSourceFiles (/my-machine-path/my-project/node_modules/@ngrx/router-store/schematics-core/utility/visitors.js:17:22)
    at /my-machine-path/my-project/node_modules/@ngrx/router-store/migrations/9_0_0/index.js:18:31
    at MergeMapSubscriber.project (/my-machine-path/my-project/node_modules/@angular-devkit/schematics/src/rules/call.js:74:24)
    at MergeMapSubscriber._tryNext (/my-machine-path/my-project/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/mergeMap.js:69:27)
    at MergeMapSubscriber._next (/my-machine-path/my-project/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/mergeMap.js:59:18)
    at MergeMapSubscriber.Subscriber.next (/my-machine-path/my-project/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Subscriber.js:66:18)
    at Observable._subscribe (/my-machine-path/my-project/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/util/subscribeToArray.js:5:20)

Expected behavior:

It should update all packages, migrating them.

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

• macOs: 10.15.6
• node: v13.11.0
• npm: 6.14.6
• yarn: 1.22.4
• @angular/cli: 9.1.11

I would be willing to submit a PR to fix this issue

[X] Yes (Assistance is provided if you need help submitting a pull request)

[timdeschryver]

@dtodt would it be possible to share your routerstore config?

[dtodt]

Yeah sure.
Here it goes.

app.module.ts

  ...
  imports: [
    ...
    StoreModule.forRoot(REDUCERS_TOKEN, {
      metaReducers
    }),
    StoreRouterConnectingModule.forRoot({
      routerState: RouterState.Minimal,
      navigationActionTiming: NavigationActionTiming.PostActivation
    }),
    EffectsModule.forRoot(effects),
    ...
  ],
  ...

state config

export interface AppState {
  ...
  router: RouterReducerState<any>;
}

export const reducers: ActionReducerMap<AppState> = {
  ...
  router: routerReducer
};

export const REDUCERS_TOKEN = new InjectionToken<ActionReducerMap<AppState>>('App Reducers');
export const reducerProvider = { provide: REDUCERS_TOKEN, useValue: reducers };

export const metaReducers: MetaReducer<AppState>[] = [];

export const effects = [
  ...
  RouterEffects,
  ...
];

These are used in some effects to get route info.

router.selector.ts

import { AppState } from '@app/state';
import * as fromRouter from '@ngrx/router-store';
import { createFeatureSelector } from '@ngrx/store';

export const getRoute = createFeatureSelector<AppState, fromRouter.RouterReducerState<any>>('router');

export const {
  selectCurrentRoute,
  selectQueryParams, // select the current route query params
  selectQueryParam, // factory function to select a query param
  selectRouteParams, // select the current route params
  selectRouteParam, // factory function to select a route param
  selectRouteData, // select the current route data
  selectUrl // select the current url
} = fromRouter.getSelectors(getRoute);

router store usage on effects

  ConfigRouterNavigateLeave$ = createEffect(() =>
    this.actions$.pipe(
      ofType(ROUTER_NAVIGATED),
      map((action: RouterNavigatedAction) => action.payload.routerState.url),
      withLatestFrom(this.store$.select(getConfigState)),
      switchMap(([url, configState]) => {
        if (configState.root && !url.startsWith(`/${configState.root}`)) {
          return of(configCleanUpTree());
        }
        return EMPTY;
      })
    )
  );

This is everything involving @ngrx/router-store in my app.
I hope it helps.

Thanks.

[timdeschryver]

Thanks @dtodt, sadly I wasn't able to reproduce it with the given snippets.
When I take a look at the stacktrace, I think I did find the issue tho.
Do you perhaps have any ngModule decorators without argument?

@NgModule()

[dtodt]

Hi, yes I've some Fake Routing Modules to provide NgModuleRef due to ngx-bootstrap/modal lack of support of dynamic modals.

Is something like this:

@NgModule()
export class PageXModalRoutingModule {
  constructor(private moduleRef: NgModuleRef<any>, private routeModalService: RouteModalService) {
    this.routeModalService.setRoutes(PAGE_X_MODAL_ROUTE, this.moduleRef);
  }
}

Maybe when I get to Angular 9 version, I can remove this, I'm on my way to this with this migration.

I'll try to define it like this @NgModule({}), maybe it'll solve it, what do you think?

Thanks.

[timdeschryver]

That should resolve it, but thanks for confirm my thoughts.
It's something that #2632 will fix in the future.
Thanks for the help :)

[dtodt]

Thank you, see ya.