I am getting below error while implementing lazy-loading using angular 7.
Whenever running command ng serve below error is populated on cmd.
20% building modules 91/93 modules 2 active ...Web\src\assets\bootstrap\bootstrap.scss× ｢wdm｣: Error: No module factory available for dependency type: ContextElementDependency at addDependency (E:\New folder\node_modules\webpack\lib\Compilation.js:671:12) at iterationOfArrayCallback (E:\New folder\node_modules\webpack\lib\Compilation.js:186:3) at addDependenciesBlock (E:\New folder\node_modules\webpack\lib\Compilation.js:689:5) at iterationOfArrayCallback (E:\New folder\node_modules\webpack\lib\Compilation.js:186:3) at addDependenciesBlock (E:\New folder\node_modules\webpack\lib\Compilation.js:692:5) at Compilation.processModuleDependencies (E:\New folder\node_modules\webpack\lib\Compilation.js:700:4) at afterBuild (E:\New folder\node_modules\webpack\lib\Compilation.js:832:15) at buildModule.err (E:\New folder\node_modules\webpack\lib\Compilation.js:876:11) at callback (E:\New folder\node_modules\webpack\lib\Compilation.js:613:5) at module.build.error (E:\New folder\node_modules\webpack\lib\Compilation.js:653:12) at resolveDependencies (E:\New folder\node_modules\webpack\lib\ContextModule.js:282:4) at ContextModule.result.resolveDependencies (E:\New folder\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:522:25) at ContextModule.build (E:\New folder\node_modules\webpack\lib\ContextModule.js:203:8) at Compilation.buildModule (E:\New folder\node_modules\webpack\lib\Compilation.js:618:10) at factory.create (E:\New folder\node_modules\webpack\lib\Compilation.js:859:14) at hooks.afterResolve.callAsync (E:\New folder\node_modules\webpack\lib\ContextModuleFactory.js:163:16) E:\New folder\node_modules\neo-async\async.js:14 throw new Error('Callback was already called.'); ^
Error: Callback was already called.
at throwError (E:\New folder\node_modules\neo-async\async.js:14:11)
at E:\New folder\node_modules\neo-async\async.js:2805:7
at process._tickCallback (internal/process/next_tick.js:61:11)
const routes: Routes = [
{
path: '', redirectTo: 'login', pathMatch: 'full'
},
{ path: 'login', loadChildren: 'app/components/login/login.module#LoginModule'} <--- causing error
]
However, using routing as below is below is working finr:-
const routes: Routes = [
{
path: '', redirectTo: 'login', pathMatch: 'full'
},
{ path: 'login', component:LoginComponent} <--- working fine
]
"dependencies": {
"@angular/animations": "^7.0.3",
"@angular/common": "^7.0.3",
"@angular/compiler": "^7.0.3",
"@angular/core": "^7.0.3",
"@angular/forms": "^7.0.3",
"@angular/http": "^7.0.3",
"@angular/platform-browser": "^7.0.3",
"@angular/platform-browser-dynamic": "^7.0.3",
"@angular/platform-server": "^7.0.3",
"@angular/pwa": "^0.10.6",
"@angular/router": "^7.0.3",
"@angular/service-worker": "^7.0.3",
"@ng-bootstrap/ng-bootstrap": "^4.0.0",
"@types/lodash": "^4.14.116",
"core-js": "^2.5.7",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"ng-connection-service": "^1.0.4",
"ngx-perfect-scrollbar": "^6.3.1",
"ngx-toastr": "^9.1.0",
"ngx-ui-switch": "^1.6.0",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3",
"web-animations-js": "2.3.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.10.5",
"@angular/cdk": "^7.0.3",
"@angular/cli": "^7.0.5",
"@angular/compiler-cli": "^7.0.3",
"@angular/language-service": "^7.0.3",
"@angular/material": "^7.0.3",
"@types/jasmine": "^2.8.11",
"@types/jasminewd2": "~2.0.2",
"@types/node": "^10.12.6",
"codelyzer": "^4.5.0",
"jasmine-core": "^3.3.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^3.1.1",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-coverage-istanbul-reporter": "^1.4.3",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^1.4.0",
"node-sass": "^4.9.3",
"protractor": "^5.4.1",
"rxjs-tslint": "^0.1.5",
"ts-node": "~4.1.0",
"tslint": "^5.11.0",
"typescript": "^3.1.6",
"webpack": "^4.20.2"
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
NoopAnimationsModule,
AppRoutingModule
],
providers: [
HttpService,
AuthGuard,
WebsocketService
],
entryComponents: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login.component';
import { loginRouting } from './login.routing';
@NgModule({
imports: [
CommonModule,
loginRouting
],
declarations: [LoginComponent]
})
export class LoginModule { }
import { NgModule, ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login.component';
const routes: Routes = [
{ path: '', component: LoginComponent }
];
export const loginRouting = RouterModule.forChild(routes);
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"types": [
"node"
],
"lib": [
"es2017",
"dom"
],
"baseUrl": "./src",
"paths": {
},
"module": "es2015"
}
}
Angular CLI: 7.1.1
Node: 10.13.0
OS: win32 x64
Angular: 7.1.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, http, language-service, material, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.10.7
@angular-devkit/build-angular 0.10.7
@angular-devkit/build-optimizer 0.10.7
@angular-devkit/build-webpack 0.10.7
@angular-devkit/core 7.0.7
@angular-devkit/schematics 7.0.7
@angular/pwa 0.10.7
@ngtools/webpack 7.0.7
@schematics/angular 7.0.7
@schematics/update 0.11.1
rxjs 6.3.3
typescript 3.1.6
webpack 4.27.0
Try to set routing file this way.
const routes: Routes = [
{ path: '', loadChildren: './login/login.module#LoginModule'},
{ path: 'login', loadChildren: './login/login.module#LoginModule' },
];
And make sure in login.module.ts you have set it's component
declarations: [LoginComponent]
Update
While you update from 6 to 7. This issue may happen. For that please read and follow this commands and steps.