title: Angular fails routing to lazy loaded modules after deploy
body: <p>I've recently published a new Angular app, which implements lazy loading.</p>
  
  <p>Now, app compilation goes well, no error is show and running it in local environment for debug or using <code>ng serve</code> (or <code>ng serve --prod</code> to emulate the behaviour while in production mode) the app works fine and I can succesfully navigate from an eager loaded module to a lazy loaded one and vice versa, without errors.</p>
  
  <hr>
  
  <h2>THE ISSUE:</h2>
  
  <p>If I run the app in the server (so using <code>ng build --prod</code> and then publishing it), I can't navigate from the first default eager loaded module (the homepage) to a lazy loaded module.</p>
  
  <hr>
  
  <h2>ERROR STACK</h2>
  
  <p>The errors I get in the console are the following:</p>
  
  <ol>
  <li><p><strong>error:</strong> </p>
  
  <blockquote>
    <p>ERROR Error: Uncaught (in promise): Error: Cannot enable prod mode after platform setup.
    Error: Cannot enable prod mode after platform setup.</p>
  </blockquote>
  
  <p><strong>displayed when…</strong> trying to navigate to any lazy loaded module, at the first time</p></li>
  <li><p><strong>error:</strong></p>
  
  <blockquote>
    <p>ERROR Error: Uncaught (in promise): Error: Cannot find 'LazyModule' in './lazy/lazy.module'
    Error: Cannot find 'LazyModule' in './lazy/lazy.module'</p>
  </blockquote>
  
  <p><strong>displayed when…</strong> I try to navigate to a lazy loaded component again, after the first error showed up</p></li>
  </ol>
  
  <p><strong>An interesting fact</strong> is that when displaying these errors (expecially the second), it doesn't throw an error 404 not found, it's just a "normal" Angular error without any 404 status.</p>
  
  <hr>
  
  <h2>MY CODE:</h2>
  
  <p><strong>project structure</strong></p>
  
  <pre><code>app.module.ts (&amp; app.routing.ts)
  |__lazy.module.ts (&amp; lazymodule.routing.ts)
  |__admin.module.ts (&amp; admin.routing.ts)
  </code></pre>
  
  <p><strong>app.routing.ts</strong></p>
  
  <pre><code>// ... imports …
  const appRoutes: Routes = [
    {
      path: '',
      redirectTo: '/dashboard',
      pathMatch: 'full',
    },
    {
      path: 'dashboard',
      component: DashboardComponent,
      canActivate: [AuthGuard]
    },
    {
      path: 'lazy',     
      loadChildren: "./lazy/lazy.module#LazyModule",
      canLoad: [AuthGuard]
    },
    {
      path: 'admin',     
      loadChildren: "./admin/admin.module#AdminModule",
      canLoad: [AuthGuard]
    },
    { path: '**', redirectTo: '/dashboard', canActivate: [AuthGuard] }
  ];
  
  export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { preloadingStrategy: SelectiveStrategy, useHash:true });
  </code></pre>
  
  <p><strong>selective.strategy.ts</strong></p>
  
  <pre><code>// ... imports ...
  @Injectable()
  export class SelectiveStrategy implements PreloadingStrategy {
  
      preload(route: Route, load: Function): Observable&lt;any&gt; {
          if (route.data &amp;&amp; route.data['preload']) {
              return load();
          }
          return Observable.of(null);
      }
  }
  </code></pre>
  
  <p><strong>lazymodule.routing.ts</strong></p>
  
  <pre><code>const routes: Routes = [
    { path: '', component: FooComponent, canActivate: [AuthGuard] },
    {
      path: 'foo',
      component: FooComponent,
      canActivate: [AuthGuard]
    },
    {
      path: 'new',
      component: NewElementComponent,
      canActivate: [AuthGuard]
    },
    { path: '**', redirectTo: '/dashboard', canActivate: [AuthGuard] }
  ];
  
  export const routing: ModuleWithProviders = RouterModule.forChild(routes);
  </code></pre>
  
  <hr>
  
  <h2>VERSIONS:</h2>
  
  <p><strong>server</strong> Windows Server 2012 R2
  <br> <strong>IIS</strong> 8.5.9600.16384
  <br> <strong>angular/common</strong> 6.1.5
  <br> <strong>angular</strong> &amp; <strong>angular-cli</strong> 6.1.4</p>
  
  <hr>
  
  <h2>MY TRIES:</h2>
  
  <p>1) Tried to execute locally the <code>ng build --prod</code> generated files. It works.
  <br> 2) Tried to execute the app (locally) with <code>ng serve --prod</code>, but nothing seems to work
  <br> 3) Tried to add <code>useHash:true</code> option as you can see in the <code>RouterModule.forRoot</code> of <code>app.routing.ts</code> file above. Didn't work.
  <br> 4) Tried to move the routing inside the <code>app.module.ts</code> file. Didn't work.
  <br> 5) Tried to use a root relative path as <code>src/app/lazy/lazy.module#LazyModule</code>. Didn't work.
  <br> 6) Tried to copy in the server folder the files generated from <code>ng serve --prod</code>, but nothing.
  <br> 7) Tried to update all of my npm packages, but nothing.</p>
  
  <hr>
  
  <p>What am I doing wrong? Is it a code issue or a server one?</p>
  
  <p><em>Let me knwo if you need more infos/code sections</em></p>