Не понимаю, почему моя маршрутизация не работает в Angular6 - PullRequest
Новая
       61

Не понимаю, почему моя маршрутизация не работает в Angular6

0 голосов
/ 22 октября 2018

Я не понимаю, почему мой маршрут на уровне предмета не получает удар.Итак, я посмотрел сайт Angular по маршрутизации здесь: https://angular.io/guide/router. У меня есть основная настройка маршрутизации, подобная этой: 

@NgModule({
imports: [
RouterModule.forRoot([
  { path: 'Login', component: LoginComponent },
  { path: '',   redirectTo: '/Login', pathMatch: 'full' },
  {
    path: 'Money',
    //Could this be wrong path and nothing is telling me?
    loadChildren: '../Modules/Money/money.module#MoneyModule',
    //canLoad: [LoginGuard]
  },
  { path: '**',  component: PageNotFoundComponent },
]
//, { enableTracing: true } 
)
],
exports: [ RouterModule ],
providers: [LoginGuard, AuthService]
})

У меня есть «Модуль» для моих денег, вот так.Я попытался настроить '' для наследования прямого от родительского маршрута, но он никогда не работает, так что это может быть частью проблемы. 

  RouterModule.forChild(
  [
    // { path: '', component: MoneyListingsComponent, canActivate: [LoginGuard] },
    { path: 'Money', component: MoneyListingsComponent },
    { path: 'Money:id', component: MoneyEntryComponent }
  ])

А потом у меня есть реализация в HTML, как это так: 

<div id="moneyEntryArea">
  <router-outlet></router-outlet>

  <div *ngFor="let tran of transactions">
    <div>ID: 
      <a [routerLink]="['/Money', tran.transactionID]">{{tran.transactionID}}</a>
      Amount: {{tran.amount}} 
      Desc:{{tran.transactionDesc}} 
      Running Total:{{tran.runningTotal}}
    </div>
  </div>
</div>

Таким образом, мой список выглядит очень хорошо, но когда я нажимаю на идентификатор «транзакции», он проглатывается с ошибкой вроде: 

 "Uncaught (in promise): TypeError: undefined is not a function
 TypeError: undefined is not a function
 at Array.map (<anonymous>)
 at webpackAsyncContext (http://localhost:4200/main.js:2710:34)
 at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (http://localhost:4200/vendor.js:59394:82)
at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (http://localhost:4200/vendor.js:59386:60)
at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (http://localhost:4200/vendor.js:122028:82)
at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (http://localhost:4200/vendor.js:122016:35)
at MergeMapSubscriber.project (http://localhost:4200/vendor.js:120288:47)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (http://localhost:4200/vendor.js:132985:27)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (http://localhost:4200/vendor.js:132975:18)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (http://localhost:4200/vendor.js:127446:18)"

Я чувствую, что яя пропускаю что-то простое, например, мне нужно вставить еще одну директиву, но я теряюсь в уровнях.Любая помощь приветствуется.

1 Ответ

0 голосов
/ 24 октября 2018

Ответ был в основном на множественные проблемы:

  1. Когда вы лениво загружаете маршруты с помощью «(location) #Module», вам нужно убедиться, что остальные нисходящие компоненты настроены правильно.EG: path: "/ Money", который приводит к новому модулю, который реализует RouterModule. ForChildren () должен иметь эти маршруты, чтобы принять путь родителя.Таким образом, '' становится 'Money'.
  2. В Angular кажется, что выполнение routelink = "(route)" отличается от [routeLink] = "['/ (route)']".Я делал последнее, и это вызывало проблемы.
  3. Когда у вас ленивый загруженный маршрут, у вас могут возникнуть проблемы с загрузкой BrowserModule снова.Вам нужно загрузить CommonModule в лениво загруженные модули дальше по дереву.
  4. Я использовал Angular Material, поэтому их нужно было загружать для загрузки модулей снова.

Теперь работает нормально.

...