Я получаю ошибку ниже при реализации отложенной загрузки с использованием Angular 7. Всякий раз, когда выполняется команда ng serve ниже ошибка отображается в cmd.
20% строительных модулей 91/ 93 модулей 2 активных ... Web \ src \ assets \ bootstrap \ bootstrap.scss × ｢wdm｣: Ошибка: нет фабрики модулей для типа зависимости: ContextElementDependency при addDependency (E: \ Новая папка \ node_modules \ webpack\ lib \ Compilation.js: 671: 12) при итерацииOfArrayCallback (E: \ New folder \ node_modules \ webpack \ lib \ Compilation.js: 186: 3) в addDependenciesBlock (E: \ Новая папка \ node_modules \ webpack \ lib \ Compilation.js: 689: 5) в iterationOfArrayCallback (E: \ New folder \ node_modules \ webpack \ lib \ Compilation.js: 186: 3) в addDependenciesBlock (E: \ Новая папка \ node_modules \ webpack \ lib \ Compilation.js: 692: 5) в Compilation.processModuleDependencies (E: \ New folder \ node_modules \ webpack \ lib \ Compilation.js: 700: 4) в afterBuild (E: \ New folder \ node_modules \ webpack \ lib \ Compilation.js: 832: 15) на buildModule.err (E: \ Newпапка \ node_modules \ webpack \ lib \ Compilation.js: 876: 11) при обратном вызове (E: \ New folder \ node_modules \ webpack \ lib \ Compilation.js: 613: 5) на module.build.error (E: \ Newпапка \ node_modules \ webpack \ lib \ Compilation.js: 653: 12) в resolDependencies (E: \ New folder \ node_modules \ webpack \ lib \ ContextModule.js: 282: 4) в ContextModule.result.resolveDependencies (E: \ Newпапка \ node_modules \ @ngtools \ webpack \ src \ angular_compiler_plugin.js: 522: 25) в ContextModule.build (E: \ Новая папка \ node_modules \ webpack \ lib \ ContextModule.js: 203: 8) в Compilation.buildModule (E: \ Новая папка \ node_modules \ webpack \ lib \ Compilation.js: 618: 10) в factory.create (E: \ Новая папка \ node_modules \ webpack \ lib \ Compilation.js: 859: 14) в hooks.afterResolve.callAsync(E: \ Новая папка \ node_modules \ webpack \ lib \ ContextModuleFactory.js: 163: 16) E: \ Новая папка \ node_modules \ neo-async \ async.js: 14 выдает новую ошибку («Обратный вызов уже был вызван».);^
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)
app.routing.ts
const routes: Routes = [
{
path: '', redirectTo: 'login', pathMatch: 'full'
},
{ path: 'login', loadChildren: 'app/components/login/login.module#LoginModule'} <--- causing error
]
Однако использование маршрутизации, как показано ниже, работает следующим образом: -
const routes: Routes = [
{
path: '', redirectTo: 'login', pathMatch: 'full'
},
{ path: 'login', component:LoginComponent} <--- working fine
]
package.json
"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"
}
app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
NoopAnimationsModule,
AppRoutingModule
],
providers: [
HttpService,
AuthGuard,
WebsocketService
],
entryComponents: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
login.module.ts
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 { }
login.routing.ts
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);
tsconfig.json
{
"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"
}
}
ng --version
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