Error: NG0203 when using RouterModule in Angular library

Question

I'm trying to create an Angular v14 application that imports an Angular library that contains routing. My setup looks something like this:

app.module.ts: (Main app)

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {path: '' , loadChildren: () => import('@mytest/core').then(m => m.TestModule)}
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

test.module.ts (Library)

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      {path: '', pathMatch: 'full', component: TestComponentComponent}
    ]),
  ],
  declarations: [TestComponentComponent],
  exports: [TestComponentComponent],
})
export class TestModule { }

When I run ng serve everything compiles without any issue, however opening localhost:4200 I find a blank page and this error in the console:

Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `EnvironmentInjector#runInContext`.

If I omit the RouterModule.forChild() in test.module.ts the error dissappears, so it must be related to that (also, the stacktrace references RouterModule_Factory). I also have the same issue with the NGRX StoreModule.forFeature() when I try to use that. I've made sure to use all the same versions of @angular/..., since a version mismatch seems to cause this error in some instances, but that doesn't change anything.

Any ideas on what I'm missing?

What's inside your TestComponentComponent? Can you post the code? — Vasileios Kagklis, Sep 21 '22 at 20:59
@VasileiosKagklis It's just a standard generated Angular component without any modification. I can post the code later. — cube, Sep 21 '22 at 22:36

score 0 · Answer 1 · answered Nov 07 '22 at 01:45

I have the same problem but I don't know why because my app module is fine.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import {MatDialogModule} from '@angular/material/dialog';
import { ToastrModule } from 'ngx-toastr';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { OrdersComponent } from './orders/orders.component';
import { OrderComponent } from './orders/order/order.component';
import { OrderItemsComponent } from './orders/order-items/order-items.component';



@NgModule({
  declarations: [
    AppComponent,
    OrdersComponent,
    OrderComponent,
    OrderItemsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MatDialogModule,
    ToastrModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule
  ],
  
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

score 0 · Answer 2 · answered Jan 09 '23 at 10:23

0

My issue was fixed by adding preserveSymlinks: true option to main application angular.json:

{
  ..
  "projects": {
    ..
    "main": {
      "projectType": "application",
      ..
      "architect": {
        "build": {
          ..
          "options": {
            "preserveSymlinks": true,
..

answered Jan 09 '23 at 10:23

Maksim Sorokin

2,334
3
34
61

I've tried that too, but unfortunately it didn't fix the issue for me. – cube Jan 26 '23 at 09:15

Error: NG0203 when using RouterModule in Angular library

2 Answers2