4

this very similar to the one mentioned here but every solution provided by in comments or answer did not solve my issue. Wanted to see if there is anything else i should look at. I tried different paths like

  • ./app/mycomponent/mycomponent.module#MyComponentModule,
  • .mycomponent//mycomponent.module#MyComponentModule

but nothing works. The biggest difference between mine and the original issue is, we recently added webpack and that's when the application broke. When we did not use any bundling service(webpack) and everything was individual files, it all worked just fine. Also my home.module which is the home page doesn't have this issue. Every other pages or modules throw the exact same issue. There is literally not much difference between the home and other modules in terms of implementation.

my routing module has this 

{
    path: 'mycomponent',
    loadChildren: 'app/mycomponent/mycomponent.module#MyComponentModule'
}

Full exception below

bootstrap:51 ERROR Error: Uncaught (in promise): Error: Cannot find module 'app/mycomponent/mycomponent.module' Error: Cannot find module 'app/mycomponent/mycomponent.module' at browser.es5.js:91 at ZoneDelegate.invoke (zone.js:392) at Object.onInvoke (animations.es5.js:7) at ZoneDelegate.invoke (zone.js:391) at Zone.run (zone.js:142) at zone.js:873 at ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (animations.es5.js:7) at ZoneDelegate.invokeTask (zone.js:424) at Zone.runTask (zone.js:192) at browser.es5.js:91 at ZoneDelegate.invoke (zone.js:392) at Object.onInvoke (animations.es5.js:7) at ZoneDelegate.invoke (zone.js:391) at Zone.run (zone.js:142) at zone.js:873 at ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (animations.es5.js:7) at ZoneDelegate.invokeTask (zone.js:424) at Zone.runTask (zone.js:192) at resolvePromise (zone.js:824) at resolvePromise (zone.js:795) at zone.js:873 at ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (animations.es5.js:7) at ZoneDelegate.invokeTask (zone.js:424) at Zone.runTask (zone.js:192) at drainMicroTaskQueue (zone.js:602)

below is my webpack config

const path = require('path');

module.exports = {   entry: './src/main.ts',  
devtool: 'source-map',  
module: {
    rules: [
      {
        test: /\.tsx?$/,
        loaders: ['ts-loader'],
        exclude: [/\.(spec|e2e)\.ts$/]
      },
      {
        test: /\.(html|css)$/, 
        loader: 'raw-loader',
        exclude: /\.async\.(html|css)$/
      }
    ]   },   
 resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]   },   
 output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')    } };
  • angular : 4.3.6
  • typescript: 2.9.2
Night Monger
  • 770
  • 1
  • 10
  • 33
  • can you try this loadChildren: 'src/app/mycomponent/mycomponent.module#MyComponentModule' – Muhammed Albarmavi Jul 22 '18 at 20:37
  • @MuhammedAlbarmawi yes. tried that.. did not work.. i tried all different variations :( – Night Monger Jul 22 '18 at 21:06
  • Can you confirm that WebPack is creating the bundles as expected. I think it will create numbered bundles for each lazy module so look for something like `1.bundle.js` in your dist folder. – Reactgular Jul 23 '18 at 00:23
  • We pack is indeed creating bundles but it is just bundles.js not individual chunks. And inside bundles.js I can see my component and its markup. – Night Monger Jul 23 '18 at 10:03

2 Answers2

3

For anyone else coming here.. I wasn't able to figure out what was the issue with my path.. My teammate got it working.. in routing module.. we changed to 

import { MyComponentModule } from './myComponentModule/MyComponent.module';

then called this class name in the load 

{
    path: 'myComponent',
    loadChildren: ()=> MyComponentModule
},

While this worked, i dont know why the old one did not work even though i gave the exact same path.

Night Monger
  • 770
  • 1
  • 10
  • 33
  • thanks for the solution, it also looks better like that... did you figure out what is causing the error? – Martin Sep 18 '18 at 08:50
2

You can use a relative path from where the routing module is located:

{
    path: 'mycomponent',
    loadChildren: '../mycomponent/mycomponent.module#MyComponentModule'
}

It appears that Angular 6 has changed the requirements so that loadChildren must always be relative. I ran into this problem migrating an app to the newer version.

See this change here:

https://github.com/angular/angular/commit/f44a2c730a84cd86695d1851395ad28423704bd0

The updated documents say "relative" now.

Reactgular
  • 52,335
  • 19
  • 158
  • 208