Köşeli 4 Yönlendirme

Question

Bu gönderiyi önerenler, köşeli-4 yönlendirme ile etiketlenmeyi bırakabilir mi? Bu etiketin farkındayım. Benim sorunum, Angular 4 yönlendirme ile yapmak değildi - o zaman ne olduğunu anladım bir hata soru coz oldu ne olduğunu anladım. Buradaki çözüm, gerçek Angular 4 yönlendirmesiyle ilgili yardım isteyen kişilere yardımcı olmayacaktır. Bu nedenle, etiketinin böyle etiketlenmemesine ve bu değişikliği reddedeceğime katılmıyorum. Tekrar ediyorum: PHP, nodejs, dist klasörü ve diğer bir sürü şeyi anlamadan standart bir hosting paketi kullanarak açısal bir web uygulaması başlatmayı denemenin bir hatasıydı. Çok fazla insanın benzer hatalar yaptıklarını görüyorum, ancak bilmeleri gereken bir şey değil, web sitelerini bilme problemi olarak çok fazla yönlendirme sorunu değil, ve sadece yaptığım gibi yapmalı ve bir şeyler öğrenmeliyiz.

Açısal 4 yönlendirmem çalışmıyor.

• Köşeli 4 yönlendirmesi, Açısal 2'den farklıdır. Lütfen yalnızca Angular 4 yorumuyla benzer sorunlarla karşılaşan kişiler olabilir. Birçok değişiklik yapılmış gibi görünüyor ve 2017 yönergelerini takip ederek yönlendirmeyi kurdum. Bu eski çözümler işaretleme sadece kafa karıştırıcı ve yararsızdır - Ben kullanmak istemiyorum Açısal için yeni ve sadece 4 kişilik deneyime sahip özellikle HashLocationStrategy *

Alanıma gidin ve ardından kullanabilirsiniz

sayfalar arasında gezinmek için menü bileşenim, ancak etkialanımda/evde yazdığımda boş bir sayfa görüyorum. Diğer insanlar Angular'ın önceki sürümleriyle ilgili benzer sorular sormuş gibi görünüyor, ancak daha yeni bir kurguya sahip olan birini göremiyorum.

Ben app.module.ts app.router.ts

yılında

ve

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

import { HomeComponent } from './home/home.component'; 
import { ArtComponent } from './art/art.component'; 
import { MusicComponent } from './music/music.component'; 
import { EventsComponent } from './events/events.component'; 

export const router: Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full'}, 
    { path: 'home', component: HomeComponent }, 
    { path: 'art', component: ArtComponent }, 
    { path: 'music', component: MusicComponent }, 
    { path: 'events', component: EventsComponent } 
]; 

export const routes: ModuleWithProviders = RouterModule.forRoot(router); 

yılında

import { routes } from './app.router'; 

ben çok yeniyim korkuyorum Açısalya! https://github.com/angular/angular-cli/issues/5113

tatmin edici bir cevabı olmalıydı görünmüyor: Burada benzer yapı ile ilgili sorunlar için aşağı bu sorunu daralmış var

polyfills.71b130084c52939ca448.bundle.js:1 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. 
(anonymous) @ polyfills.71b130084c52939ca448.bundle.js:1 
firebug-lite.js:30396 [Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead. 
getMembers @ firebug-lite.js:30396 
home Failed to load resource: the server responded with a status of 404() 

:

Bu

Krom İnceleyicisi'nde hatalardır Bu soru - eğer kimse benim inşa çalışmamı yapmak için --base-hrefimi nereye yönlendireceğimi söyleyebilir mi?

Answer 1

Köşeli kodum iyi görünüyor. Sorun benim hosting sağlayıcı ile sunucu ile oldu.

Answer 2

Eğer @NgModule dekoratör ve orada ithalatı rotanızı

örn

@NgModule açıklamada çalışmaz aşağıdaki ({

imports: [ 
    RouterModule.forRoot(routes)// provide your routes array here 
] 

})

, ihracat kullanmak gerekir const yolları: ModuleWithProviders = RouterModule.forRoot (yönlendirici);

Answer 3

Yöntem - 1

yılında app.module.ts

. . . 

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




imports: [ 
RouterModule.forRoot([ 
{ 
    path: '', 
    redirectTo: 'home', 
    pathMatch: 'full' 
}, 
{ 
    path: 'home', 
    component: HomeComponent 
} , 
{ 
    path: 'art' , 
    component: ArtComponent 
} 

. . . 


]), 

Yöntem -2 app.router ::

. . . 
export const router: Routes = [ 
{ path: '', redirectTo: 'home', pathMatch: 'full'}, 
{ path: 'home', component: HomeComponent }, 
{ path: 'art', component: ArtComponent }, 
{ path: 'music', component: MusicComponent }, 
{ path: 'events', component: EventsComponent } 
]; 
. . . . 

sadece aşağıdaki ekle Yaptığınız şekilde ve daha sonra app.module.ts adresinden

import { routes } from './app.router'; 
. . . 
imports : [ 
RouterModule.forRoot(routers) 
] 

Referans :: Angular Routing and Navigation

işe yaramazsa, bana yorum olarak bildirin.