डिफ़ॉल्ट मार्ग कोणीय 2

Question

में आलसी लोड मार्गों के लिए काम नहीं कर रहा रीडायरेक्ट मैं एक ऐप्लिकेशन है जो एक प्रमाणीकृत धारा (InternalRootComponent) और एक गुमनाम धारा (ExternalRootComponent) में बांटा गया है है।

सब कुछ ठीक काम करता है जब मैं स्पष्ट रूप से मार्गों पर नेविगेट, लेकिन जब मैं जड़ (/) में जाओ, मैं रीडायरेक्ट नहीं होते हैं। साथ ही, कुछ कारणों से accountsComponent लोड किया गया है।

एप्लिकेशन-routing.module.ts:

export const routes: Routes = [ 
    { 
     path: '', 
     redirectTo: 'login', 
     pathMatch: 'full' 
    }, 
    { 
     path: 'login', 
     component: ExternalRootComponent, 
     children: [ 
      { 
       path: '', 
       loadChildren: './login/login.module#LoginModule' 
      } 
     ] 
    }, 
    { 
     path: 'membership', 
     component: ExternalRootComponent, 
     children: [ 
      { 
       path: '', 
       loadChildren: './membership/membership.module#MembershipModule' 
      } 
     ] 
    }, 
    { 
     path: 'app', 
     component: InternalRootComponent, 
     canActivate: [AuthGuard], 
     children: [ 
      { 
       path: '', 
       canActivateChild: [AuthGuard], 
       children: [ 
        { 
         path: '', 
         redirectTo: './dashboard', 
         pathMatch: 'full' 
        }, 
        { 
         path: 'dashboard', 
         loadChildren: './dashboard/dashboard.module#DashboardModule' 
        }, 
        { 
         path: 'accounts', 
         loadChildren: './accounts/accounts.module#AccountsModule' 
        }, 
        { 
         path: 'users', 
         loadChildren: './users/users.module#UsersModule' 
        }, 
        { 
         path: 'services', 
         loadChildren: './services/services.module#ServicesModule' 
        }, 
        { 
         path: 'support', 
         loadChildren: './support/support.module#SupportModule' 
        } 
       ] 
      } 
     ] 
    }, 
    { 
     path: '**', 
     component: NotFoundComponent 
    } 
]; 

खातों-routing.module.ts:

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

@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule] 
}) 
export class AccountsRoutingModule {} 

क्या मुझे समझ नहीं आता है क्यों पहले रीडायरेक्ट काम नहीं करता है - मैं/लॉगिन करने के लिए रीडायरेक्ट/उम्मीद करूँगा। इसके बजाए, ऐसा लगता है जैसे खातों में खाली मार्ग-routing.module.ts का आह्वान किया जा रहा है।

Answer 1

मेरा अनुमान है कि खाता मॉड्यूल रूट मॉड्यूल में आयात किया जाता है।

यह एक सामान्य सेटअप है जो काम करना चाहिए। क्षमा करें मैंने आपके सभी कोड का उपयोग नहीं किया क्योंकि मैंने सोचा कि यह न्यूनतम लेकिन पूर्ण उदाहरण के साथ अधिक स्पष्ट होगा। मैंने संभावित समस्याओं की टिप्पणियां दीं जो आपके द्वारा देखे जा रहे व्यवहार को जन्म देगी। मैं पूरी तरह से यह सुनिश्चित नहीं कर सकता कि यह आपकी सटीक समस्या को और जानकारी के बिना हल करेगा लेकिन यह कम से कम समान है और किसी के लिए सहायक होना चाहिए।

निम्नलिखित सेटअप मॉड्यूल आलसी लोड हो रहा है का उपयोग करता है ले:

नोट - आलसी लोड हो रहा है बच्चे के मार्गों में से रूटर मॉड्यूल आयात की वजह से अप्रत्याशित व्यवहार का कारण बन सकता है, खासकर अगर आप अपनी सुविधा के मॉड्यूल में बंडल सेवाओं जो रूट स्तर के आयात की आवश्यकता होती है (हालांकि सेवाओं को अपने मॉड्यूल में अलग करने के लिए शायद सबसे अच्छा)। नीचे दी गई टिप्पणियों को समझाना चाहिए कि इसका मतलब क्या है।

सबक एक बार मार्गों के साथ ही आयात आलसी मॉड्यूल है। (नहीं कि ऐसा करने मॉड्यूल अब आलसी हो सकता है और पूरी तरह आलसी लोडिंग के उद्देश्य धरा) आप उनके साथ में बंडल सेवाओं जड़ में होना चाहिए कि अगर जड़

के लिए एक अलग सेवा मॉड्यूल में उन अलग

app.module.ts

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 

import { AppComponent } from './app.component.ts'; 
import { routes } from './app-routing.module'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    RouterModule.forRoot(routes), 
    // I think this might be your issue. 
    // DON'T do this (import child module here) 
    // 
    // MaleChildModule 
    // or somethings like this 
    // FemaleChildModule.forRoot() 
    // 
    // NOTE - order doesn't matter either. i.e. putting this on the 
    // line above RouterModule.forRoot(routes) will not help 
    // 
    // Doing so means the ChildModules and routes are actually being 
    // imported twice 
    // 
    // so these would all be valid paths 
    // /female/sally 
    // /sally 
    // /male/john 
    // /john 
    // 
    // then if you had a module's routes set up like those in 
    // the MaleChildModule the root redirect to /child 
    // would not work and it would just be a blank view with no path 
    // update in the browser. very confusing situation. 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'ex-app', 
    template: '<router-outlet></router-outlet>' 
}) 
export class AppComponent {} 

एप्लिकेशन-routing.module.ts

import { Routes } from '@angular/router'; 

export const routes: Routes = [ 
    { 
    path: '', 
    pathMatch: 'full', 
    redirectTo: 'males' 
    }, 
    { 
    path: 'males', 
    loadChildren: './male-child.module#MaleChildModule' 
    }, 
    { 
    path: 'females', 
    loadChildren: './female-child.module#FemaleChildModule' 
    } 
] 

नोट - आलसी लोड मॉड्यूल आयात RouterModule.forChild (मार्ग) जो नहीं तो सावधान

पुरुष-child.module.ts

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

import { JohnChildComponent } from './john-child.component.ts'; 

// NOTE - if you set up your child module like this and make the 
// mistake I'm describing (importing child modules multiple times) 
// you will get unexpected behavior of redirects not working and 
// no clues as to why. I suggest always having empty paths redirect 
// to something with a component. FemaleChildModule is an example. 
const childRoutes: Routes = [ 
    { 
    path: 'john', 
    component: JohnChildComponent 
    } 
] 

@NgModule({ 
    imports: [ 
    RouterModule.forChild(childRoutes) 
    ], 
    declarations: [ 
    JohnChildComponent 
    ] 
}) 
export class MaleChildModule {} 

महिला-child.module.ts

अनपेक्षित व्यवहार का कारण बन सकता

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

import { SallyChildComponent } from './sally-child.component.ts'; 

const childRoutes: Routes = [ 
    { 
    path: '', 
    children: [ 
     // NOTE - I like to setup lazy loaded modules like this because 
     // it prevents masking of the module loading issue because there 
     // are never any paths that don't have an associated component 
     { 
     path: '', 
     pathMatch: 'full', 
     redirectTo: 'sally', 
     }, 
     { 
     path: 'sally', 
     component: SallyChildComponent 
     } 
    ] 
    } 
] 

@NgModule({ 
    imports: [ 
    RouterModule.forChild(childRoutes) 
    ], 
    declarations: [ 
    SallyChildComponent 
    ] 
}) 
export class FemailChildModule {} 

जॉन-child.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'ex-john', 
    template: '<p>john</p>' 
}) 
export class JohnChildComponent {} 

सैली-child.component।ts

import { Component } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'ex-sally', 
    template: '<p>sally</p>' 
}) 
export class SallyChildComponent {}