How to setup routing with angular-cli: 1.0.0-beta.22-1 and webpack

[hassanasad]

Hi

I am using angular-cli: 1.0.0-beta.22-1 AND NG2 v 2.3 on mac OS Sierra.

Most of the times when i update angular-cli my routing files start giving errors (even though they were working just fine previously). I just wanted to know what is the correct way to do routing?

Here is my file which i have been using and tweaking slightly with every major release but now i am pretty much stuck:

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

import { PageNotFoundComponent } from './shared/page-not-found/page-not-found.component';

export function loadCatalog() {
	return new Promise(resolve => {
		(require as any).ensure([], () => {
				resolve(require('./catalog/catalog.module').CatalogModule);
		})
	});
}

export function loadLogin() {
	return new Promise(resolve => {
		(require as any).ensure([], () => {
				resolve(require('./login/login.module').LoginModule);
		})
	});
}


export const routes: Routes = [
	{
		path: 'catalog',
		loadChildren: loadCatalog,
	},
	{
			path: 'login',
			loadChildren: loadLogin,
	},
	{ path: '', redirectTo: '/catalog', pathMatch: 'full' },
	{ path: '**', component: PageNotFoundComponent },
];


@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

This is the error i get when i use ng build

 10% building modules 2/2 modules 0 activeentry.split is not a function
TypeError: entry.split is not a function
    at Function.ModuleRoute.fromString (/Users/hassan/Code/project/node_modules/@ngtools/webpack/src/plugin.js:25:27)
    at /Users/hassan/Code/project/node_modules/@ngtools/webpack/src/plugin.js:274:43
    at Array.map (native)
    at AotPlugin._processNgModule (/Users/hassan/Code/project/node_modules/@ngtools/webpack/src/plugin.js:273:14)
    at /Users/hassan/Code/project/node_modules/@ngtools/webpack/src/plugin.js:242:39
    at process._tickCallback (internal/process/next_tick.js:103:7)

If i comment these three blocks:

{
	path: 'catalog',
	loadChildren: loadCatalog,
},
{
	path: 'login',
	loadChildren: loadLogin,
},
{ path: '', redirectTo: '/catalog', pathMatch: 'full' },

i can get the application to compile without issue.

Can someone please tell me what i am doing wrong?

P.S: It was a working application before angular-cli update to beta 22-1 and NG2 2.3

I know i am not alone when i say this that updating an app is getting increasingly frustrating when one has to debug so many issues after each update :'(

[hansl]

loadChildren takes a string of the form path/to/file#ModuleClass. Looks like in your case that would be './catalog/catalog.module#CatalogModule'.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}