How to use Angular 2 lazy loading in Visual Studio 2015 ASP.NET Core Template Pack

Question

I try to implement router lazy loading in angular 2, so that I can do something like

const routes: Routes = [
 { path: '', redirectTo: '/home', pathMatch: 'full',
 { path: 'about', loadChildren: './+about/about.module#AboutModule' }
];

It requires set up like

webpack.config.js
loaders: [
{
    test: /\.ts$/,
    loaders: [
      ‘awesome-typescript-loader’, 
      ‘angular2-template-loader’, 
     ‘angular2-router-loader’]
    },
  ...
]

The problem is I am using Visual Studio 2015 ASP.NET Core Template Pack, which got completely different contents in webpack.config.js. How can I set up to make the lazy loading working?

Should I be using ASP.NET Core Template Pack in the long run for developing angular 2 applications? I am not sure whether ASP.NET Core Template Pack is the right path for me. Thanks

ben yip · Accepted Answer · 2017-02-20 11:18:11Z

1

It turns out to be quite simple

const routes: Routes = [
{
    path: 'hero', loadChildren: () => {
        return Promise.resolve(require('./components/hero/hero.module')['HeroModule']);
    } }

];

rather than

const routes: Routes = [
{  path: 'hero', loadChildren: './components/hero/hero.module#HeroModule' }
]

The idea is coming from http://qiita.com/Quramy/items/e3e6d63a2b155aec2067

answered Feb 20, 2017 at 11:18

ben yip

1171 silver badge6 bronze badges

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

Collectives™ on Stack Overflow

How to use Angular 2 lazy loading in Visual Studio 2015 ASP.NET Core Template Pack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related