6

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?

cube
  • 75
  • 6

2 Answers2

0

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 { }
0

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

{
  ..
  "projects": {
    ..
    "main": {
      "projectType": "application",
      ..
      "architect": {
        "build": {
          ..
          "options": {
            "preserveSymlinks": true,
..
Maksim Sorokin
  • 2,334
  • 3
  • 34
  • 61