typescript - Angular 2 Rotaları tarayıcı URL'si üzerinden gezinirken çalışmıyor

Bir Angular projesi için rotalarla ilgili bazı sorunlarım var, özellikle üçüncü seviyedeki alt rotalarla. RouterLink ile uygulama içinde gezinirken rotalar mükemmel çalışıyor ve sorun, URL'ye tarayıcı üzerinden erişildiğinde ortaya çıkıyor.

Benim Angular sürümüm 2.4.0
ng serve ile geliştirme sunucusunda test ediyorum.

Verilen yapıya sahip bir proje için,

.
├── photos
├── posts
├── users
│   ├── detail
│   │   ├── address
│   │   ├── family
│   │   ├── information
│   │   └── phones
│   ├── friends
│   └── profile
└── videos

Aşağıdaki kod şudur,

// user routes
export const userRoutes : Routes = [
  {
    path: 'detail',
    component: DetailComponent
  },
  {
    path: 'friends',
    component: FriendsComponent
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
]

//app routes
const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'photos',
    component: PhotosComponent
  },
  {
    path: 'posts',
    component: PostsComponent
  },
  {
    path: 'users',
    component: UserListComponent
  },
  {
    path: 'user/:username',
    component: UserComponent,
    children: userRoutes
  },
  {
    path: 'videos',
    component: VideosComponent
  }
]
export const AppRoutes = RouterModule.forRoot(appRoutes);
export const appRoutingProviders: any[] = [];

ve olarak kayıtlıdır,

@NgModule({
  declarations: [
    // declarations
  ],
  imports: [
    AppRoutes
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Yani Uygulama, RouterLink ile iyi çalışıyor

[routerLink]="['/user', username, 'detail']

ama tarayıcıda <host>/user/myuser/detail adresine gittiğimde istisna oluşuyor

Uncaught (in promise): Error: Cannot find primary outlet to load 'DetailComponent'

Ne oldu? Teşekkürler.

Not: <router-outlet> kurdum ve routerLink üzerinde mükemmel çalışıyor, sorun tarayıcıda tam URL ile gezindiğinizde ortaya çıkıyor.

Cevap #1

user/:username/ adresinden /user/:username/detail adresine geçerken, UserComponent'in şablonundaki her şeyi gizleyip DetailComponent'i göstermek istediğinizi varsayıyorum.

Bunu başarmak için, çocuk bileşenlerini yükleyecek bir bileşene ihtiyacınız olacak:

ebeveyn.bileşen.html

<router-outlet></router-outlet>

routes.ts

Şimdi user/:username/ rotasının üst bileşende yüklenmesini sağlayacak şekilde rotaları ayarlayalım

// user routes
export const userRoutes : Routes = [
 {
    path: '',
    component: UserComponent // the '' path will load UserComponent
  },
  {
    path: 'detail',
    component: DetailComponent
  },
  {
    path: 'friends',
    component: FriendsComponent
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
]

//app routes
const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'photos',
    component: PhotosComponent
  },
  {
    path: 'posts',
    component: PostsComponent
  },
  {
    path: 'users',
    component: UserListComponent
  },
  {
    path: 'user/:username',
    component: ParentComponent, //This component will load its children
    children: userRoutes
  },
  {
    path: 'videos',
    component: VideosComponent
  }
]
export const AppRoutes = RouterModule.forRoot(appRoutes);
export const appRoutingProviders: any[] = [];

Yani burada olan şey şu: user/:username adresine gittiğinizde ParentComponent yüklenir, ardından UserComponent ana bileşenin outlet'inde yüklenir (çünkü '' yolu user/:username ile eşleşir).

İşte çalışan bir örnek : Github

user/myuser eriştiğinizde şunu gösterecektir: user çalışıyor! user/myuser/details şunu gösterecektir: details çalışıyor! Aşağıda görebileceğiniz gibi (routerlink kullanmadan)

Cevap #2

<base href="/"> öğesini ayarladınız mı?

Backend’iniz nedir? Bir kullanıcı ilk olarak uygulamanızın alt sayfasının tam URL‘sine (ör. www.mysite.com/users/john-doe) giderse ve backend’iniz Angular 2 ile başlatılmış sayfayı (bootstrap script’leri ile index.html) döndürmezse, Angular yönlendirici asla devreye girmez. Ancak sanırım sizin durumunuzda sorun bu değil, çünkü Angular’dan bir hata alıyorsunuz.

.net core backend'im, statik dosya olmayan istekler için her zaman index.html döndürmeye ayarlı, böylece uygulamayı her zaman doğru şekilde yükler ve angular yönlendirmesini kullanır.

İlgili makaleler