title: Uncaught (in promise): ChunkLoadError: Loading chunk xxx-xxx-module failed. Angular 9
body: <h1>Angular 9: Lazy loading/router is not working properly</h1>
  <hr />
  <h3>Console error messages</h3>
  <p><a href="https://i.stack.imgur.com/VKyqg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VKyqg.png" alt="ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk frame-frame-module failed." /></a></p>
  <hr />
  <h3>Path URL: /author</h3>
  <pre><code>http://local.xxxxx.com/node/190/author
  </code></pre>
  <hr />
  <h3>Code</h3>
  <p><strong>app-routing.module.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { AppComponent } from './app/app.component';
  import { HomeComponent } from './home/home.component';
  import { BlankComponent } from './blank/blank.component';
  
  const childRoutes = [
    {
      path: 'author/preview',
      data: {
        routeLabel: 'preview'
      },
      loadChildren: () =&gt; import('./frame/frame.module').then(m =&gt; m.FrameModule)
    },
    {
      path: 'author',
      canActivate: [DraftContentGuard, ContentEditorAccessGuard],
      data: {
        routeLabel: 'edit'
      },
      loadChildren: () =&gt; import('./frame/frame.module').then(m =&gt; m.FrameModule)
    },
  ];
  
  const routes: Routes = [
    {
      path: ':locale/:type/:contentId',
      component: AppComponent,
      canActivate: [EnabledWebSegmentAccessGuard],
      children: childRoutes
    },
    {path: 'author', component: HomeComponent},
    {path: '', redirectTo: '/author', pathMatch: 'full'},
    {path: '**', component: BlankComponent}
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, {paramsInheritanceStrategy: 'always'})],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  <p><strong>frame.module.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  import { FrameRoutingModule } from './frame-routing.module';
  import { FrameComponent } from './frame.component';
  
  @NgModule({
      imports: [
          CommonModule,
          FrameRoutingModule
      ],
      declarations: [FrameComponent]
  })
  
  export class FrameModule { }
  
  </code></pre>
  <p><strong>frame-routing.module.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { FrameComponent } from './frame.component';
  
  
  const routes: Routes = [
      {
          path: '',
          component: FrameComponent,
      }
  ];
  
  @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
  })
  
  export class FrameRoutingModule { }
  
  </code></pre>
  <hr />
  <h3>Project structure</h3>
  <p><a href="https://i.stack.imgur.com/DQ2jk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DQ2jk.png" alt="Project folders" /></a></p>
  <hr />
  <h3>What do I think?</h3>
  <p>The majority of the documentation, articles, tutorials, are using a different localhost server, so I am not sure if my server configuration should change to work properly with the lazy loading.</p>
  <p><a href="https://i.stack.imgur.com/nOdv5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nOdv5.png" alt="The file is not in my server" /></a></p>