Platform: "Cannot redefine property: __source" when adding router-store

[magnattic]

Minimal reproduction of the bug/regression with instructions:

When I add @ngrx/router-store to my existing project and set it up in the AppModule, I get the following output in Chrome:

Attempting to configure '__source' with descriptor '{"value":"AppComponent","configurable":true}' on object 'InjectionToken Platform ID' and got error, giving up: TypeError: Cannot redefine property: __source
zone.js:2257 Attempting to configure '__source' with descriptor '{"value":"OfferDetailsSmartComponent","configurable":true}' on object 'InjectionToken Platform ID' and got error, giving up: TypeError: Cannot redefine property: __source
core.js:3255 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
zone.js:2257 Attempting to configure '__source' with descriptor '{"value":"InlineSVGDirective","configurable":true}' on object 'InjectionToken Platform ID' and got error, giving up: TypeError: Cannot redefine property: __source
zone.js:2257 Attempting to configure '__source' with descriptor '{"value":"InlineSVGDirective","configurable":true}' on object 'InjectionToken Platform ID' and got error, giving up: TypeError: Cannot redefine property: __source
zone.js:2257 Attempting to configure '__source' with descriptor '{"value":"InlineSVGDirective","configurable":true}' on object 'InjectionToken Platform ID' and got error, giving up: TypeError: Cannot redefine property: __source
zone.js:2257 Attempting to configure '__source' with descriptor '{"value":"InlineSVGDirective","configurable":true}' on object 'InjectionToken Platform ID' and got error, giving up: TypeError: Cannot redefine property: __source
zone.js:2257 Attempting to configure '__source' with descriptor '{"value":"InlineSVGDirective","configurable":true}' on object 'InjectionToken Platform ID' and got error, giving up: TypeError: Cannot redefine property: __source
core.js:1598 ERROR TypeError: Cannot assign to read only property 'lang' of object '[object Object]'
    at SafeSubscriber._next (angular-l10n.js:2208)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:253)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:191)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:129)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93)
    at BehaviorSubject.push../node_modules/rxjs/_esm5/internal/BehaviorSubject.js.BehaviorSubject._subscribe (BehaviorSubject.js:26)
    at BehaviorSubject.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:176)
    at BehaviorSubject.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject._trySubscribe (Subject.js:96)
    at BehaviorSubject.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:161)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._subscribe (Observable.js:216)

Any idea what this could be or how to fix it?

Expected behavior:

I'd expect the application to start without problems.

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

Windows 10
Angular CLI 6.0.7
Angular 6.0.3
NgRx 6.0.1
Chrome 66

Other information:

The project is set up for SSR with Universal, but I am getting the error in the normal browser setup.
Some of the 3rd party libraries in use:

• angular-l10n
• ng-inline-svg
• ngrx-store-localstorage
• ngrx-store-freeze

[timdeschryver]

Hi, do you got a repro or could you create one (there is a stackblitz seed which you could use)?

[magnattic]

I tried, but it's a fairly big project and I don't know what kind of combination might be causing the problem. The warnings seem to be coming from zone.js and name Types from different libraries, so I am really unsure where to even start. They disappear as soon as I don't add router-store. Really strange.

Any pointers would be helpful. I will keep trying to reproduce it with a smaller setup, but it's very time-consuming.

[sandangel]

i have read through the error and guess this was because ng-inline-svg and router-store does not work together. could you please try disabling ng-inline-svg to see if it works?

[parallelo3301]

I can confirm the issue with ng-inline-svg. When I disabled it errors disappeared.

[timdeschryver]

@magnattic @fandaa I don't think this is an NgRx problem, but rather a ng-inline-svg problem.

What version of ng-inline-svg are you using?
That version should also be Angular 6 compatible.

[parallelo3301]

I got that errors a few minutes later again, so it was not necessarily caused by ng-inline-svg. The error is not occurring in production, so my guess was the usage of storeFreeze from the ngrx-store-freeze package because it's almost the only difference in configuration between dev/prod, so I just removed storeFreeze for now and the errors are gone.

@magnattic Do you use ngrx-store-freeze?

[sandangel]

oke let’s stop guessing like this. we need a repro. just use the ngrx seed and add those libs to see if it work.

[magnattic]

Sorry for being idle. I have now tried it again and got it working, even with ng-inline-svg enabled.

I don't know for sure what the issue was, but I made some major changes to our setup for ngrx-store-localstorage recently (switched from custom deserialize/serialize functions to array config) , so I suspect that there is some compatibility problem there.

If no one else suffers from this, I guess we can close for now until there is a way to build a small repro.

[irinelpascu]

It happened to me as well when I added the router store. It disappeared when I provided a custom router state serialiser in the app module.
providers: [{ provide: RouterStateSerializer, useClass: CustomSerializer }],

And here is how I defined it in the router.reducer.ts:

import {
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  Params,
} from '@angular/router';
import { createFeatureSelector, ActionReducerMap } from '@ngrx/store';

import * as fromRouter from '@ngrx/router-store';

export interface RouterStateUrl {
  url: string;
  queryParams: Params;
  params: Params;
}

export interface State {
  routerReducer: fromRouter.RouterReducerState<RouterStateUrl>;
}

export const reducers: ActionReducerMap<State> = {
  routerReducer: fromRouter.routerReducer,
};

export const getRouterState = createFeatureSelector<
  fromRouter.RouterReducerState<RouterStateUrl>
>('routerReducer');

export class CustomSerializer
  implements fromRouter.RouterStateSerializer<RouterStateUrl> {
  serialize(routerState: RouterStateSnapshot): RouterStateUrl {
    const { url } = routerState;
    const { queryParams } = routerState.root;

    let state: ActivatedRouteSnapshot = routerState.root;
    while (state.firstChild) {
      state = state.firstChild;
    }
    const { params } = state;

    return { url, queryParams, params };
  }
}

[sandangel]

Hi @irinelpascu could you please help us reproduce it with a small repro on stackblitz ?

[duard]

I got the same problem and I'm using some Serializer ... in my case I think is this problem is about material angular 2

Attempting to configure '__source' with descriptor '{"value":"MatSortHeader","configurable":true}' on object 'function MatSort() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        /**
         * Collection of all registered sortables that this directive manages.
         */
        _this.sortables = new Map();
        /**
         * Used to notify any child components listening to state changes.
         */
        _this._stateChanges = new rxjs__WEBPACK_IMPORTED_MODULE_4__["Subject"]();
        /**
         * The direction to set when an MatSortable is initially sorted.
         * May be overriden by the MatSortable's sort start.
         */
        _this.start = 'asc';
        _this._direction = '';
        /**
         * Event emitted when the user changes either the active sort or sort direction.
         */
        _this.sortChange = new _angular_core__WEBPACK_IMPORTED_MODULE_1__["EventEmitter"]();
        return _this;
    }' and got error, giving up: TypeError: Cannot define property __source, object is not extensible
zone.js:2257 Attempting to configure '__source' with descriptor '{"value":"MatSortHeader","configurable":true}' on object 'function MatSort() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        /**
         * Collection of all registered sortables that this directive manages.
         */
        _this.sortables = new Map();
        /**
         * Used to notify any child components listening to state changes.
         */
        _this._stateChanges = new rxjs__WEBPACK_IMPORTED_MODULE_4__["Subject"]();
        /**
         * The direction to set when an MatSortable is initially sorted.
         * May be overriden by the MatSortable's sort start.
         */
        _this.start = 'asc';
        _this._direction = '';
        /**
         * Event emitted when the user changes either the active sort or sort direction.
         */
        _this.sortChange = new _angular_core__WEBPACK_IMPORTED_MODULE_1__["EventEmitter"]();
        return _this;
    }' and got error, giving up: TypeError: Cannot define property __source, object is not extensible

[duard]

The error happens when I try to use MatSort and ngrx-store-freeze, if I remove :
@ViewChild(MatSort) sort: MatSort;
then I dont see any error.

[ianjamieson]

No repro from me, but confirmed in my case that ngrx-store-freeze is causing the issue.

Removing the above metaReducer has removed the error: "Cannot redefine property: __source"

[jonrimmer]

I encountered this and spent a while debugging it. It happens because:

1. By default the StoreRouterConnectingModule serializes the whole activated route into the store. The router state includes a reference to the current route config, which has a reference to the component for that route, which has a reference to the component's metadata, which has a reference to the dependency injection tokens for the component.
2. ngrx-store-freeze freezes the contents of the store, which via 1. means the DI tokens get frozen.
3. The Angular view layer expects the DI tokens to be mutable, as it appends a __source property to track where they've come from, or something. When it tries to this but discovers they're frozen, that's when this error is logged.

So the answer to ensure that either:

1. References to components never make their way into the store (customising the router serialization accomplishes this).

Or...

1. References to components in the store are never frozen (customising the freeze metareducer accomplishes this, although sadly there is no official API to do so). So you need something like:

const freezeEverythingExceptTheRouterState: MetaReducer<AppState> = (
  reducer: ActionReducer<AppState>
) => {
  const freeze = storeFreeze(reducer);

  return (state: AppState, action: Action): any => {
    // Skip entirely for router actions, as they contain the whole router state.
    if (action.type.startsWith('@ngrx/router-store')) {
      return reducer(state, action);
    }

    // For all other actions, skip freezing the router store bit.
    const router = reducer(state, action).router;

    const everythingElse = freeze(
      {
        ...state,
        router: undefined
      },
      action
    );

    return {
      ...everythingElse,
      router
    };
  };
};

export const metaReducers: Array<MetaReducer<AppState>> = !environment.production
  ? [freezeEverythingExceptTheRouterState]
  : [];

[raoufchebri]

I had the same problem. The problem occurred because of MatSort.
The error disappeared once I moved the mat-table to a new child component ;

[AbdallahBedir]

The following solves the issue,
StoreRouterConnectingModule.forRoot({ stateKey: 'router', routerState: RouterState.Minimal, }),
https://stackoverflow.com/questions/51410091/angular-and-error-of-attempting-to-configure-source-for-routeroutlet-and-ngif