Module throwing '"@angular/core/core"' has no exported member

[urishiraval]

I'm submitting a Bug

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

As soon as I run ng serve a whole bunch of errors pop up:

Failed to compile.

node_modules/ngrx-rtk-query/lib/store-rtk-query.module.d.ts:10:21 - error TS2694: Namespace '"C:/Users/9707015080089/Workspace/UT_InstructionUI/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.

10     static ɵmod: i0.ɵɵNgModuleDeclaration<StoreRtkQueryModule, never, never, never>;

I have tried numerous things including downgrading the version and installing it with both ng and npm but I have no idea how to solve this.

Expected behavior

To build without errors

Minimal reproduction of the problem with instructions

I am trying to run a default scenario:

RTK Query Api:

import { fetchBaseQuery } from '@reduxjs/toolkit/query';
import { createApi } from 'ngrx-rtk-query';


export const instructionsOrchestrationApi = createApi({
  reducerPath: 'instructionsOrchestrationsApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://<myurl>.com/contract/' }),
  tagTypes: ['Options'],
  endpoints: (builder) => ({
    getOptions: builder.query<object[], string>({
      query: () => 'get_contract_options/123',
    })
  })
})

export const {
  useGetOptionsQuery
} = instructionsOrchestrationApi;

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { MetaReducer, StoreModule } from "@ngrx/store";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AdditionalContributionsModule } from "./additional-contributions/additional-contributions.module";
import { StoreDevtoolsModule } from "@ngrx/store-devtools";
import { debug } from "./middleware/session-logging.meta.reducer";
// import { StoreRtkQueryModule } from 'ngrx-rtk-query';
export const metaReducers: MetaReducer<any>[] = [debug];

@NgModule({
	declarations: [AppComponent],
	imports: [
		BrowserModule,
		AppRoutingModule,
		BrowserAnimationsModule,
		AdditionalContributionsModule,
		StoreModule.forRoot({}, { metaReducers }),
		StoreRtkQueryModule.forRoot({ setupListeners: true }),
		StoreDevtoolsModule.instrument({
			maxAge: 25, // Retains last 25 states
			logOnly: false, // Restrict extension to log-only mode
		}),
		StoreRtkQueryModule.forRoot(),
	],
	providers: [],
	bootstrap: [AppComponent],
})
export class AppModule {}

Environment

Angular version: 11.1.1


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 14.18.3  
- Platform: Windows  

Others:

package.json file:

{
  "name": "instructions-ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.1.1",
    "@angular/cdk": "^11.2.13",
    "@angular/common": "~11.1.1",
    "@angular/compiler": "~11.1.1",
    "@angular/core": "~11.1.1",
    "@angular/forms": "~11.1.1",
    "@angular/material": "^11.2.13",
    "@angular/platform-browser": "~11.1.1",
    "@angular/platform-browser-dynamic": "~11.1.1",
    "@angular/router": "~11.1.1",
    "@ngrx/effects": "^13.1.0",
    "@ngrx/store": "^11.1.1",
    "@ngrx/store-devtools": "^11.1.1",
    "@reduxjs/toolkit": "^1.8.0",
    "bootstrap": "^4.6.1",
    "elements": "^0.1.2",
    "jquery": "^3.6.0",
    "ngrx-rtk-query": "^3.0.0",
    "popper.js": "^1.16.1",
    "redux": "^4.1.2",
    "redux-devtools-extension": "^2.13.9",
    "redux-replay": "^1.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1101.2",
    "@angular/cli": "~11.1.2",
    "@angular/compiler-cli": "~11.1.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.2"
  }
}

[SaulMoro]

Relate to this issue: Libraries built with Angular 13 cannot be consumed in Angular 11 applications

There are different solutions:

• Use a version of the library compiled with Angular 12 (You may lose some improvements added later)
• Update your project to the latest versions of angular

For our part, we can compile the library with an older version of Angular for now. But it will mean that in the future we will have to update it anyway

[SaulMoro]

This is the current version matrix:

Versions

Angular	ngrx-rtk-query	@reduxjs/toolkit	Support
13.x	3.x.x	1.8.x	Bugs / New Features
11.x - 12.x	2.3.0	1.6.2	None

Only the latest version of Angular in the table above is actively supported. This is due to the fact that compilation of Angular libraries is incompatible between major versions

[urishiraval]

Thanks so much! This resolved it