Consider replacing the function or lambda with a reference to an exported function angular CLI

Question

I just updated my project to Angular-CLI and I am on:

"@angular/cli": "1.0.0", "@angular/compiler-cli": "4.0.1",

I am getting an error saying:

Consider replacing the function or lambda with a reference to an exported function angular CLI

from this .ts file:

userManagement/userManagement.routing.ts

import {RouterModule, Routes} from "@angular/router"; export const routes: Routes = [ { path: '', redirectTo: 'unlockUserID', pathMatch: 'full' }, { path: 'unlockUserID', loadChildren: ()=> System.import('./unlockUserID/unlockUserID.module') .then((imports: any)=> imports.UnlockUserIdModule) }, { path: 'changePassword', loadChildren: ()=> System.import('./changePassword/changePassword.module') .then((imports: any)=> imports.ChangePasswordModule) }, { path: 'maintainOfficeHierarchy', loadChildren: ()=> System.import('./maintainOfficeHierarchy/maintainOfficeHierarchy.module') .then((imports: any)=> imports.MaintainOfficeHierarchyModule) }, ]; export const routing = RouterModule.forChild(routes);

Than in my module:

@NgModule({ imports: [ SmartadminModule, routing, ], providers: [], }) export class UserManagementModule { }

--------------------------------Update 1-----------------------------

Had to change it to this:

export const routes: Routes = [ { path: '', redirectTo: 'unlockUserID', pathMatch: 'full' }, { path: 'unlockUserID', loadChildren: './unlockUserID/unlockUserID.module', data: {pageTitle: 'unlockUserID'} }, { path: 'changePassword', loadChildren: './changePassword/changePassword.module', data: {pageTitle: 'changePassword'} }, export const routing: ModuleWithProviders = RouterModule.forRoot(routes, {useHash: true});

Now I am getting the following error:

Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.

---------------------------Update 2---------------------------

I changed it to

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

Now I am getting an error saying:

 Cannot find 'default' in './changePassword/changePassword.module'

If I click on the changePassword tab, same for the other links.

eko · Accepted Answer · 2017-04-25 16:03:59Z

4

According to https://github.com/rangle/angular-2-aot-sandbox#arrow-function-exports-top

Arrow function does not work with AoT when it is passed to an NgModule.

So you shouldn't define Arrow functions inside your Routes.

answered Apr 25, 2017 at 16:03

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mike3355 Over a year ago

So I have to completely change the way routing is done in this project. By looking at the above, do you have any suggestions on a less painful way.

eko Over a year ago

@Drew1208 I've never used lazy loading like that so I can't recommend anything but that seems to be the problem :/ If you want to read the routes from somewhere, you can maybe create a config file and add them there.

eko Over a year ago

@Drew1208 are you using forRoot twice? Any sub routing modules?

eko Over a year ago

@Drew1208 you need to have 1 root forRoot routing module and if you are using nested routing modules they need to be forChild. And I don't even know what your changePassword.module looks like

Mike3355 Over a year ago

I just updated my post with that in update 2. Thank you for the response though. I got another error after I did that though. Upgrading to CLI has been a complete pain.

|

pka246 · Accepted Answer · 2019-08-20 18:49:37Z

For lazy loaded modules via the router, importing via string is deprecated.

ng update will take care of this automatically. The new syntax leverages the ecosystem wide support for import rather than our custom rewrites.

Your loadChildren route configs should be changed from a string such as

loadChildren: './admin/admin.module#AdminModule'

to an import statement such as

loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)

Collectives™ on Stack Overflow

Consider replacing the function or lambda with a reference to an exported function angular CLI

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related