Angular 4 RouteModule.forRoot（ROUTES）不加载路由以使延迟加载工作

时间：2017-09-06 16:15:19

标签： angular angular2-routing

我正在尝试将现有项目转换为使用延迟加载，但我无法在app.module中加载任何路由。

app.module.ts：

＆＃13;
＆＃13; 
...

@NgModule({
    bootstrap: [
        AppComponent
    ],
    providers: [
        AppService,
        OCodeService,
    ],
    declarations: [
        AppComponent,
        AppHeaderComponent,
        FreeTrialModalComponent,
        TopBarReminderComponent,
        ForgotPasswordComponent

    ],
    imports: [
        FirebaseModule,
        BrowserModule,
        RouterModule.forRoot([{ path: 'create', component: AppHeaderComponent }], {enableTracing: true}),
        SharedModule,
        AuthModule,
        FormsModule,
        NgbModule.forRoot(),
        SlimLoadingBarModule.forRoot(),
        ToastyModule.forRoot(),
        SwiperModule.forRoot(SWIPER_CONFIG),
        HttpModule,

        //VIEWS
        AccountModule,
        NotificationsModule,
        LandingModule,
        HomeModule,
        //CreateModule,
        ManageModule,
        EventModule,
        SearchModule,
        //MarketingModule,
        FollowingModule,
        BookmarkModule,

        EmailActionModule,
        LoginModule,

        ProfileModule
    ],
    entryComponents: [
        SignInComponent,
        JoinComponent,
        FreeTrialModalComponent,
        ForgotPasswordComponent,
        SignInComponent,
        JoinComponent,
        NeedOcodeComponent,
    ]
})

export class AppModule {}
＆＃13;
＆＃13;
＆＃13;

执行此操作时没有错误，路线无法识别并发送到**捕获所有路线。

所有导入的模块都有.forChild（ROUTES）并且工作正常，它只是app.module.ts上的forRoot（ROUTES）无法正常工作。

我正在使用angular-cli

这是我的package.json（之前可能有一些使用webpack的遗留物）：

＆＃13;
＆＃13; 
{
  "name": "oevent2",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.1",
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/flex-layout": "^2.0.0-beta.8",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.25",
    "@types/lodash": "^4.14.64",
    "@types/request": "^0.0.30",
    "@types/request-promise": "^3.0.32",
    "angular2-bootstrap-pagination": "^2.1.2",
    "angular2-clipboard": "^2.0.14",
    "angular2-modal": "^2.0.2",
    "angular2-polyfill": "0.0.32",
    "angular2-tag-input": "^1.1.2",
    "angular2-text-mask": "^1.0.1",
    "angular2-toaster": "^1.0.2",
    "angular2-ui-switch": "^1.2.0",
    "angularfire2": "*",
    "awesome-typescript-loader": "^3.1.3",
    "bcrypt": "^1.0.3",
    "bootstrap": "^3.3.7",
    "bootstrap-datepicker": "^1.6.4",
    "chart.js": "^2.3.0",
    "core-js": "~2.4.1",
    "dragula": "^3.7.2",
    "elasticsearch": "^13.3.1",
    "firebase": "^3.9.0",
    "firebase-tools": "^3.7.0",
    "hammerjs": "^2.0.8",
    "install": "^0.8.4",
    "json-2-csv": "^2.1.1",
    "lodash": "^4.17.4",
    "moment": "^2.17.1",
    "momentjs": "^2.0.0",
    "mtr-datepicker": "^0.3.5",
    "mydatepicker": "^1.1.3",
    "mydaterangepicker": "^1.0.14",
    "ng2-charts": "^1.4.0",
    "ng2-datepicker": "^1.4.6",
    "ng2-datetime": "^1.2.2",
    "ng2-dragula": "^1.2.1",
    "ng2-img-cropper": "^0.8.8",
    "ng2-inline-editor": "^0.1.1-alpha.3",
    "ng2-meta": "^2.0.3",
    "ng2-page-slider": "^0.8.0",
    "ng2-pagination": "^2.0.0",
    "ng2-slim-loading-bar": "^2.0.5",
    "ng2-social-share": "0.0.10",
    "ng2-summernote": "^1.11.0",
    "ng2-toasty": "*",
    "ngx-swiper-wrapper": "^4.0.0",
    "ngx-ui-switch": "^1.3.9",
    "npm": "^4.1.1",
    "papaparse": "^4.3.3",
    "reflect-metadata": "^0.1.10",
    "roboto-fontface": "^0.8.0",
    "rxjs": "^5.4.0",
    "social-share-ng2": "^0.2.4",
    "summernote": "^0.8.2",
    "underscore": "^1.8.3",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3",
    "@types/core-js": "~0.9.30",
    "@types/hammerjs": "^2.0.33",
    "autoprefixer": "~6.4.0",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.9",
    "babel-preset-es2015": "^6.18.0",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "~2.0.0",
    "css-loader": "~0.23.1",
    "del-cli": "~0.2.0",
    "eslint": "~3.3.0",
    "express": "~4.14.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "html-webpack-plugin": "~2.22.0",
    "karma-mocha-reporter": "~2.1.0",
    "karma-sourcemap-loader": "~0.3.7",
    "karma-webpack": "~1.8.0",
    "minx": "r-park/minx.git",
    "morgan": "~1.7.0",
    "node-sass": "~3.8.0",
    "nodemon": "~1.10.0",
    "npm-run-all": "~2.3.0",
    "postcss-loader": "~0.9.1",
    "raw-loader": "~0.5.1",
    "sass-loader": "~4.0.0",
    "style-loader": "~0.13.1",
    "ts-helpers": "~1.1.1",
    "ts-loader": "~0.8.2",
    "typings": "~1.3.2",
    "winston": "~2.2.0"
  }
}
＆＃13;
＆＃13;
＆＃13;

这是我在/src/app/profile/profile.module.ts中捕获所有路线的地方：

＆＃13;
＆＃13; 
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { ProfileComponent } from "./components/profile-component";
import {ProfileService} from "./services/profile-service";
import {CatchRoutesComponent} from "./components/catch-routes-component";
import {FollowingModule} from "../following/following.module";
import {SharedModule} from "../shared-module/shared.module";
import {AuthGuard} from "../auth/guards/auth-guard";

const routes: Routes = [
    {path: 'profile/:id', component: ProfileComponent, canActivate: [AuthGuard]},
    {path: '**', component: ProfileComponent, canActivate: [AuthGuard]}
];

@NgModule({
    declarations: [
        ProfileComponent,
        CatchRoutesComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild(routes),
        FollowingModule,
        SharedModule
    ],
    providers: [
        ProfileService
    ]



})

export class ProfileModule {}

export { };
＆＃13;
＆＃13;
＆＃13;

以下是路线的痕迹：

enter image description here

1 个答案:

答案 0 :(得分：1)

只要我能理解，您正在尝试将急切加载的模块转换为延迟加载的模块：

第1步： 从根模块导入数组中删除模块

imports: [
    FirebaseModule,
    BrowserModule,
    RouterModule.forRoot([{ path: 'create', component: AppHeaderComponent }], {enableTracing: true}),
    SharedModule,
    AuthModule,
    FormsModule,
    NgbModule.forRoot(),
    SlimLoadingBarModule.forRoot(),
    ToastyModule.forRoot(),
    SwiperModule.forRoot(SWIPER_CONFIG),
    HttpModule,

第2步：配置您的根路由，以便在激活某个路由时加载每个延迟模块，例如：

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {PageNotFoundComponent} from './404/page-not-found.component';

const appRoutes: Routes = [
  {path: 'account', loadChildren: './modules/account/account.module#AccountModule'},
  {path: 'login', loadChildren: './modules/login/login.module#LoginModule'},
  {path: '**', component: PageNotFoundComponent}
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {
}

第3步：不要忘记配置每个模块路由

相关问题
最新问题