Question

我对Angular中的延迟加载感到困惑。我使用webpack2和angular2 rc5。当我尝试导航到+ lazyload组件时，它失败了

我的app.modules是这样的：

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { AppComponent }       from './app.component';
import { SearchModule } from './search/search.module';
import {PagesModule} from "./pages/pages.module";

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    SearchModule,
    PagesModule,
    routing
],

declarations: [
    AppComponent
],
providers: [
    appRoutingProviders
],
bootstrap: [ AppComponent ]
})

export class AppModule {}

app.routing

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
{ path: '',  redirectTo: 'pages', pathMatch: 'full' }
];
export const appRoutingProviders: any[] = [];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

pages.modules

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';

import { routing }       from './pages.routing';


import { Pages } from './pages.component';

@NgModule({
  imports: [CommonModule, routing],
  declarations: [Pages]
})
export class PagesModule {}

pages.routing

import { Routes, RouterModule }  from '@angular/router';
import { Pages } from './pages.component';

const routes: Routes = [
  {
  path: 'pages',
  component: Pages,
  children: [
     { path: '', redirectTo: 'repositories', pathMatch: 'full' },
     { path: 'repositories', loadChildren: () =>  System.import('./repositories/repositories.module') }
  ];

 export const routing = RouterModule.forChild(routes);

repositories.module

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { FormsModule } from '@angular/forms';

import { Repositories } from './repositories.component';
import { routing }       from './repositories.routing';

//module return exports component and it fail((((
import { SearchModule } from './search/search.module';

import {NavigationModule} from "./navigation/navigation.module";



@NgModule({
  imports: [
   CommonModule,
   FormsModule,
  NavigationModule,
  SearchModule,
  routing
 ],
 declarations: [
   Repositories
 ]
})
export default class RepositoriesModule {}

repositories.routing

 import { Routes, RouterModule }  from '@angular/router';
 import {Repositories} from "./repositories.component";


  const routes: Routes = [
    {
       path: '',
       component: Repositories,
       children: []
    }
  ];

export const routing = RouterModule.forChild(routes);

repositories.component

import {Component, ViewEncapsulation, Output} from '@angular/core';

@Component({
  selector: 'repositories',
  styles: [require('./repositories.scss')],
  template: `
         <div class="top-form">
            <search></search>
         </div>

         <div class="workspace">
            <navigation></navigation>
         </div>`
   })

  export class Repositories {
         constructor() {}

  }

search.module like

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common'; //без него не работает ngFor

import { Search } from './search.component';

//components
import { Aggregations } from './aggregations/aggregations.component';
import { AutoComplete } from './auto-complete/auto-complete.component';



 @NgModule({
   imports: [
   CommonModule
   ],

   declarations: [
      Aggregations,
       AutoComplete,
       Search
    ],
   exports: [ Search ]
 })

导出类SearchModule {}

我尝试在NavigationModule中使用路由并从DOM中丢失SearchModule。怎么了？

lazyload模块中的路由Angular2

0 个答案: