Angular7

Question

我在使用 angular 7 实现延迟加载时出现以下错误。每当运行命令 ng serve 下面的错误出现在 cmd.

20% building modules 91/93 modules 2 active ...Web\src\assets\bootstrap\bootstrap.scss× ‘wdm’: 错误：没有可用于依赖类型的模块工厂：ContextElementDependency 在 addDependency (E:\New folder\node_modules\webpack\lib\Compilation.js:671:12) 在 iterationOfArrayCallback (E:\New folder\node_modules\webpack\lib\Compilation.js:186:3) 在 addDependenciesBlock (E:\New folder\node_modules\webpack\lib\Compilation.js:689:5) 在 iterationOfArrayCallback (E:\New folder\node_modules\webpack\lib\Compilation.js:186:3) 在 addDependenciesBlock (E:\New folder\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 folder\node_modules\webpack\lib\Compilation.js:876:11) 在回调 (E:\New folder\node_modules\webpack\lib\Compilation.js:613:5) 在 module.build.error (E:\New folder\node_modules\webpack\lib\Compilation.js:653:12) 在 resolveDependencies (E:\New folder\node_modules\webpack\lib\ContextModule.js:282:4) 在 ContextModule.result.resolveDependencies (E:\New folder\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:522:25) 在 ContextModule.build (E:\New folder\node_modules\webpack\lib\ContextModule.js:203:8) 在 Compilation.buildModule (E:\New folder\node_modules\webpack\lib\Compilation.js:618:10) 在 factory.create (E:\New folder\node_modules\webpack\lib\Compilation.js:859:14) 在 hooks.afterResolve.callAsync (E:\New folder\node_modules\webpack\lib\ContextModuleFactory.js:163:16) E:\New folder\node_modules\neo-async\async.js:14 抛出新的错误（'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)

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

Answer 1

试试这样设置路由文件

const routes: Routes = [
   { path: '', loadChildren: './login/login.module#LoginModule'},
   { path: 'login', loadChildren: './login/login.module#LoginModule' },
];

并确保在 login.module.ts 中设置了它的组件

declarations: [LoginComponent]

更新

当您从 6 更新到 7 时，可能会出现此问题。为此，请阅读并遵循此命令和步骤。

Read

Answer 2

如果您的 'components' 文件夹与 app.routing.ts 文件在同一级别，则您的路径错误，然后尝试此操作。

常量路线：路线= [ {路径：''，重定向到：'login'，路径匹配：'full'}， { 路径：'login'，loadChildren：'./components/login/login.module#LoginModule'}<br> ]

Answer 3

这是 package.json

中的额外 webpack 问题

npm ls webpack
如果找到两个 webpack，从 package.json
npm 安装

更多信息 - https://github.com/angular/universal-starter/issues/583

Angular7 - 实现延迟加载时出错

Angular7 - Error while implementing lazy-loading

lazy-loading

angular