Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Runtime compiler is not loaded with Angular 8 and lazy module

I've created a new Angular 8 project with @angular/cli -> ng new, added a new lazy module, with ng serve is working fine, but with ng build --prod it raises the following error:

enter image description here

Here is my app.module.ts

@NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Here is my app-routing.module.ts

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path: 'dashboard',
    loadChildren: () => import(`./dashboard/dashboard.module`).then(m => m.DashboardModule),
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

Here is my dashboard.module.ts

@NgModule({
  imports: [
    DashboardRoutingModule
  ],
  declarations: [
    DashboardComponent,
  ]
})
export class DashboardModule { }

Here is my dashboard-routing.module.ts

const ROUTES: Routes = [
  {
    path: '',
    component: DashboardComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(ROUTES)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

This is my tsconfig.json (default)

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}
like image 676
user2010955 Avatar asked Jun 06 '19 07:06

user2010955


People also ask

How do you add Lazy Loading in Angular 8?

To lazy load Angular modules, use loadChildren (instead of component ) in your AppRoutingModule routes configuration as follows. content_copy const routes: Routes = [ { path: 'items', loadChildren: () => import('./items/items.module').then(m => m.ItemsModule) } ];

How do I know if Lazy Loading is working in Angular 8?

In web developer tools look for file/component (for which lazy-loading is applied). If the file is present even before loading of the module then lazy loading is not working (component shouldn't be visible before module is loaded). The same file will be shown after that module has been loaded.

What is Lazy Loading and how it is implemented in Angular?

Lazy loading helps us to download the web pages in chunks instead of downloading everything in a big bundle. To implement the Lazy Loading in Angular we need to create a routing module and a module. ts file for the component we need to lazy load. In the above image, we have created two files which are posts-routing.

What is Lazy Loading module in Angular?

Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the speed of the application load time by splitting the application into several bundles. When the user navigates through the app, the bundles are loaded as required.


1 Answers

I think I've solved the issue, the problem was with this line:

loadChildren: () => import(`./dashboard/dashboard.module`)

I was using the backticks, replacing them with the normal single-quote '', it works fine.

like image 139
user2010955 Avatar answered Oct 26 '22 06:10

user2010955