Lazy Load Multiple Modules

Question

In my tsconsig file I'm declaring the path for the folder

"@somellc/application-layout": [ "modules/somellc-frontend-application-layout" ]

and in the mentioned folder's index file exporting 2 modules

    export {StoreLayoutModule} from './store/store-operations.module';
    export {FrontRegisterModule} from './front-register/front-register.module';

in my main core module I'm referring to those exported modules after checking with authguard service if the user is logged in. Please Note that in my particular case the absolute path for used modules doesn't work for me so I need to use the path declared in the tsconfig file 

   export const routes: Routes = [
    {
        path: '',
        canActivate: [AuthGuardService],
        canActivateChild: [AuthGuardService],
        canLoad: [AuthGuardService],
        children: [
            {
                path: '',
                loadChildren: '@somellc/application-layout#StoreLayoutModule',
            },
            {
                path: 'front-register',
                loadChildren: '@somellc/application-layout#FrontRegisterModule',
            },
        ]
    },
    {
        path: 'login',
        component: LoginComponent
    }
];

So in app build process I see no error but in the browser i got the error that one of the modules could not be found like this

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot find 'StoreLayoutModule' in '@somellc/application-layout',

after removing one of the modules everything works, so can anyone help me with this problem?

I don't think you can specify the path to the module that way. I'm almost certain you'd have to put in a relative path from the application root. — Brandon Taylor
– Brandon Taylor, Commented Sep 10, 2018 at 13:39
@Brandon of course it is allowed in that way. Checkout the official Angular docs. angular.io/guide/lazy-loading-ngmodules#routes-at-the-app-level — user3054630
– user3054630, Commented Sep 10, 2018 at 15:32
I meant using the @path syntax. That works for imports, but not for specifying a module in a route. — Brandon Taylor
– Brandon Taylor, Commented Sep 10, 2018 at 18:27

Християн Христов · Accepted Answer · 2018-09-10 17:41:18Z

Try to access the module from the root like ./app/somellc-fronent-application-layout.ts, (with the .ts suffix) this should fix the problem :)

Edit: All right , my bad obviously I didn't explained my self well enough.

First a snippet of a module that will be lazily loaded with a simple component (Noting interesting here, just a plain module with simple component)

import { NgModule, Component } from '@angular/core';
import { RouterModule } from '@angular/router';


@Component({
    template: '<h1>Lazy loaded component</h1>'
})
class LazyComponent { }


@NgModule({
    declarations: [LazyComponent],
    imports: [
        RouterModule.forChild(
            [{
                path: '',
                component: LazyComponent
            }]
        )
    ]
})
export class LazyModule { }

Now snippet of the app module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeComponent } from './components/home/home.component';

@NgModule({
  declarations: [
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    CommonModule,
    RouterModule,
    AppRouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And now comes the interesting part, just as you pointed in the comments reffering to the docs, by using the path to the module, that we wish to load lazily with suffix #{yourModuleHere}. As you can see I'm loading whatever#LazyModule where whatever doesn't look like a path to a module (in your case "@somellc/application-layout"). The magic happens in the last snippet.

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from '../components/home/home.component'; //<= this is just a placeholder component
import { NgModule } from '@angular/core';

const routes: Routes = [
    { path: '', component: HomeComponent, pathMatch: 'full' },
    { path: 'demo', loadChildren: 'whatever#LazyModule' }
];

@NgModule({
    imports: [
        RouterModule.forRoot(
            routes
        )
    ]
})

export class AppRouterModule { }

The other important/interesting and mandatory thing for the hall thing is happening is in the tsconfig.json . Here if you want to access a specific path via alias you must write the full pathname in the config (including the file suffix .ts in our case)

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "baseUrl": "src",
    "paths": {
      "whatever": [
        "./app/lazy-folder/lazy.module.ts"
      ]
    },
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

please take a look at Angular official docs, .ts is not needed there, and as mentioned previously my case need the path from tsconfig file ,not the absolute ones. angular.io/guide/lazy-loading-ngmodules

Collectives™ on Stack Overflow

Lazy Load Multiple Modules

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related