Lazy loading modules angular 2 and asp-net core

Question

I am using asp-net core and angular 2 a web project. I want to implement module lazy loading concept in my current application but its not working for me tried almost every solution available.

ClientApp\app\components\home\ home.routing.module.ts

const routes: Routes = [
    {
        path: 'home', component: HomeComponent,
        children: [
            { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
            { path: 'dashboard', component: DashboardComponent }
        ]
    }
]

export const routableComponents = [DashboardComponent]
@NgModule({
    imports: [CommonModule, RouterModule.forChild(routes)],
    exports: [RouterModule],
    declarations: [routableComponents]
})
export class HomeRoutingModule {
}

app-routing-module.ts

const routes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'register-user', component: RegisterUserComponent },
    { path: 'home', loadChildren: "./components/home/home.routing.module#HomeRoutingModule" },
    { path: '**', redirectTo: 'login' }

i am getting the this error with above mentioned code

EXCEPTION: Uncaught (in promise): TypeError: webpack_require.i(...) is not a function TypeError: webpack_require.i(...) is not a function

also using this package as per suggested here

"angular2-router-loader": "0.3.4"

webpack.config.js

const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: ['.js', '.ts'] },
        output: {
            filename: '[name].js',
            publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                {
                    test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader',
                    'angular2-router-loader']
                },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: ['to-string-loader', 'css-loader'] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [new CheckerPlugin()]
    }

Please suggest what i am doing wrong.

The path to your home routing may need some assistance. This could be a lack of understanding on my part, but in a project I have lazy loading in I have the following... { path: 'recipes', loadChildren: 'app/recipes/recipes.module#RecipesModule' }, notice it gives the path starting with app and doesn't have the ./ in the front. Try that? — Jarvis
– Jarvis, Commented Feb 10, 2017 at 16:16
Also one thing you have failed to mention is what process you're running that gets you that error. Are you attempting to build / compile? Are you doing AoT? Are you just trying to get a local server running through npm run <command> or what? — Jarvis
– Jarvis, Commented Feb 10, 2017 at 16:19
after user login to app i am trying to redirect to home page which i am loading through lazy load that's where its not working — Ravi Mittal
– Ravi Mittal, Commented Feb 10, 2017 at 16:21

Americo Arvani · Accepted Answer · 2017-02-09 17:33:55Z

1

Check you webpack configuration should be like that , probably you missed the loaders for the webpack

    // Configuration in common to both client-side and server-side bundles
var sharedConfig = {
    context: __dirname,
    resolve: { extensions: [ '', '.js', '.ts' ] },
    output: {
        filename: '[name].js',
        publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
    },
    module: {
        loaders: [
            { test: /\.ts$/, include: /ClientApp/, loaders: ['ts-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] },
            { test: /\.html$/, loader: 'html-loader?minimize=false' },
            { test: /\.css$/, loader: 'to-string-loader!css-loader' },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } },
            { test: /\.json$/, loader: 'json-loader' }
        ]
    }

answered Feb 9, 2017 at 17:33

Americo Arvani

8761 gold badge8 silver badges16 bronze badges

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

3 Comments

Ravi Mittal Over a year ago

i have it like : use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] instead of loaders

Ravi Mittal Over a year ago

updated my question, you can check the complete configuration

Ravi Mittal Over a year ago

i am using "webpack": "^2.2.0", as per new webpack module.loaders is now module.rules, webpack.js.org/guides/migrating

Rahul Chauhan · Accepted Answer · 2018-03-21 04:46:55Z

0

It works for me.

Restart your server: ng serve --aot

cli needs to be reloaded when a lazy loaded module is added in routes.

https://github.com/angular/angular-cli/issues/9825

answered Mar 21, 2018 at 4:46

Rahul Chauhan

1,56415 silver badges13 bronze badges

Collectives™ on Stack Overflow

Lazy loading modules angular 2 and asp-net core

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related