कोणीय 2 आरसी 5 और @ कोणीय/राउटर 3.0.0-आरसी .1 अमान्य कॉन्फ़िगरेशन या बग?

Question

इस मामले में मुझे कोणीय 2 और नवीनतम राउटर के आरसी 5 का उपयोग करके इस समस्या का सामना करना पड़ता है।

मेरे routes.ts फ़ाइल यह है:

import { 
    provideRouter, 
    Routes, 
    RouterModule 
} 
from '@angular/router'; 
import { 
    OverviewComponent, 
    LoginComponent, 
    ProfileComponent 
} from './shared'; 
import { AuthGuard } from './auth.guard'; 
import { HasToken } from './common/index'; 

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

export const authProviders = [AuthGuard, HasToken]; 

export const appRouterProviders = [ 
    provideRouter(routes), 
    authProviders 
]; 

export const routing = RouterModule.forRoot(routes); 

और मेरे app.module.ts फ़ाइल (बूटस्ट्रैप) यह है:

import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import {NgModule} from '@angular/core'; 
import {RouterModule} from '@angular/router'; 
import {BrowserModule} from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import {appRouterProviders, routing} from './routes'; 
import { 
    OverviewComponent, 
    LoginComponent, 
    ProfileComponent 
} from './shared'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    OverviewComponent, 
    LoginComponent, 
    ProfileComponent 
    ], 
    imports: [ 
    BrowserModule, 
    CommonModule, 
    // Router 
    routing, 
    // Forms 
    FormsModule, 
    ], 
    providers: [ 
     appRouterProviders, 
     provide(AuthHttp, { 
     useFactory: (http) => { 
      return new AuthHttp(new AuthConfig({ 
      headerName: 'Authorization', 
      headerPrefix: 'Bearer', 
      tokenName: 'token', 
      tokenGetter: (() => localStorage.getItem('token')), 
      globalHeaders: [{'Content-Type': 'application/json'}], 
      noJwtError: false, 
      noTokenScheme: false 
      }), http); 
      }, 
     deps: [Http] 
     }) 
    ],  entryComponents: [AppComponent], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { 

} 

और अंत में अपनी प्रविष्टि फ़ाइल (main.ts) यह है:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { enableProdMode, provide } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { AuthHttp, AuthConfig } from 'angular2-jwt'; 
import { AppModule, environment } from './app/'; 

if (environment.production) { 
    enableProdMode(); 
} 

platformBrowserDynamic().bootstrapModule(AppModule); 

तो जब मैं ng-serve (यह एक कोणीय-CLI webpack परियोजना के साथ) इम इस हो रही ई चल रहा हूँ कंसोल में rror:

EXCEPTION: Error: Invalid configuration of route ' ': one of the following must be provided (component or redirectTo or children or loadChildren)

अद्यतन कोड और नई त्रुटि

Uncaught Unexpected value 'undefined' declared by the module 'AppModule'

नवीनतम अद्यतन

ऐसा लगता है बैरल के साथ कोई समस्या नहीं है। अगर मैं app.module इसे करने के लिए घटक आयात इस त्रुटि से-पारित लेकिन एक दूसरे को दे रही है:

uri.match is not a function

मैं मार्गों लेकिन कुछ भी परिवर्तन में pathMatch विशेषता जोड़ने के लिए निश्चित रूप से करने की कोशिश की।

Answer 1

मेरी समस्या सभी के बाद काफी सरल थी (इतने घंटों की कोशिश की)।

समाधान: बैरल से घटकों आयात न करें उन्हें सीधे आयात उनके फ़ोल्डरों से।

जिसने मेरी समस्या हल की।

अद्यतन:

इसके अलावा undefined त्रुटि के बारे में समस्या यह है कि मेरी सभी घटकों को नहीं app.module की imports में घोषित किया गया था।

Answer 2

मेरा मानना ​​है कि आप अपने मार्गों को गलत तरीके से कास्टिंग करते हैं। आपको मार्ग आयात करने की आवश्यकता है।

import { Routes,provideRouter, RouterConfig, RouterModule '@angular/router'; 

और बजाय एक RouterConfig बनाने के बजाय,

const routes: RouterConfig = [] 

उपयोग मार्गों के बजाय।

const appRoutes: Routes = [] 

https://angular.io/docs/ts/latest/guide/router.html

Answer 3

आप इन

provideRouter, RouterConfig 

export const appRouterProviders = [ 
    provideRouter(routes), 
    authProviders 
]; 

और

appRouterProviders, 

आयात और न ही इस कोड की आवश्यकता की जरूरत नहीं है

इसके बजाय रूट्स के प्रकारों को रूट्स में बदलें जो

आयात करने के लिए आवश्यक है।

Answer 4

AppModule के लिए आपके आयात में रूटिंग मॉड्यूल घोषणाएं डुप्लीकेट हैं। इसके अलावा CommonModule आयात करने की कोई आवश्यकता नहीं है क्योंकि यह पहले से ही ब्राउज़र मॉड्यूल द्वारा निर्यात किया जा चुका है। इस के लिए

imports: [ 
    BrowserModule, 
    CommonModule, 
    // Router 
    RouterModule, 
    routing, 
    // Forms 
    FormsModule, 
], 

:

प्रयास से अपने आयात को बदलने के लिए

imports: [ 
    BrowserModule, 
    routing, 
    FormsModule 
], 

Answer 5

किसी के लिए अभी भी इस समस्या है, यदि आप एक घटक के लिए एक मार्ग को परिभाषित करने और उसके बाद में अपने घटक को परिभाषित पृष्ठ के नीचे, यह इस त्रुटि को फेंकता है।

असल में, यह त्रुटि का मतलब है कि मार्ग के लिए प्रदत्त घटक अनिर्धारित है।

तो घटक वर्ग को मार्गों से पहले या यदि आप इसे आयात करते हैं, तो सुनिश्चित करें कि यह सही तरीके से आयात किया गया है।