CODEWITHSUNDEEP
angular
boredbear153
boredbear153

Reputation: 241

Uncaught (in promise): Error: Runtime compiler is not loaded Angular 8

I am trying to load the routes from a JSON file.There is also a lazy loaded module in the routes.Everything works as expected till the code is run in ng build --prod that is in aot mode. When i try to go to the lazy loaded module link, i get the below error. The code is as follows:

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';
import * as AppRoutingJson from '../assets/data/routing.json';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { RouteoneComponent } from './routeone/routeone.component';
import { RoutetwoComponent } from './routetwo/routetwo.component';

const routes: Routes =[];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  entryComponents: [PageNotFoundComponent, RouteoneComponent, RoutetwoComponent],
})
export class AppRoutingModule {
  constructor(private router: Router) {
    this.prepareRoutes(AppRoutingJson);
  }

  prepareRoutes(routesJson: any) {
    let routesArr = [] as Routes;

    routesArr = [
      {
        path: 'routeone',
        component: RouteoneComponent,
      },
      {
        path: 'routetwo',
        component: RoutetwoComponent,
      },
      { path: 'contact', loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule)},
      { path: 'dv', loadChildren: './modules/dv.module#DVModule' },
    ];
   // routesArr=AppRoutingJson;
    routesArr.forEach(route => {
      routes.push(route);
    });

    routes.push(
      {
        path: 'page-not-found',
        component: PageNotFoundComponent,
      },
      {
        path: '**',
        redirectTo: 'page-not-found',
      }
    );
    console.log(routes);
    this.router.resetConfig(routes);
  }
}

Error is as follows:

enter image description here

Upvotes: 3

Views: 4576

Answers (1)

Matt U
Matt U

Reputation: 5108

This seems to be a common issue. See here: https://github.com/angular/angular-cli/issues/10582 and here: https://github.com/angular/angular/issues/23878

I suggest using string syntax for the contact route, so:

loadChildren: './contact/contact.module#ContactModule'

That's what seems to fix it for others in those GitHub issues.

Upvotes: 3

Related Questions