Как решить Не могу прочитать свойство 'loadChildren' из неопределенного - PullRequest
Новая
       27

Как решить Не могу прочитать свойство 'loadChildren' из неопределенного

0 голосов
/ 08 июля 2019

У меня есть маршрут как:

app-routing.module.ts 

let routes: Routes;
routes = [
  {
    path: '',
    children: [
      {
        path: '',
        children: [
          {
            path: '',
            children: [
              {path: '', component: HeaderComponent, outlet: 'header'},
              {path: '', component: FooterComponent, outlet: 'footer'}
              // Routes that display a header and footer go here.
            ]
          },
          {
            path: '',
            children: [
              {
                path: '/frame',
                children: [{
                  path: 'search',
                  loadChildren: () => import('./search/search.module').then(module => module.SearchModule)
                }]
              }
            ]
          }
        ]
      }
    ]
  }
];

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

При работе npm startЯ получаю сообщение об ошибке

Не удается прочитать свойство 'loadChildren' из неопределенного

1 Ответ

0 голосов
/ 08 июля 2019

Причина: переменная маршрутов не была определена как константа.

Конкретно, пока я находился в режиме ng serve (npm start), а браузер находился в пути / frame / search, я изменил файл маршрутов, добавив ** путь (просто случайное добавление материала из другой рабочей области). приложение). 

let routes: Routes;
routes = [
  {
    path: '',
    children: [
      {
        path: '',
        children: [
          {
            path: '',
            children: [
              {path: '', component: HeaderComponent, outlet: 'header'},
              {path: '', component: FooterComponent, outlet: 'footer'}
              // Routes that display a header and footer go here.
            ]
          },
          {
            path: '',
            children: [
              {
                path: '/frame',
                children: [{
                  path: 'search',
                  loadChildren: () => import('./search/search.module').then(module => module.SearchModule)
                }]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    path: '**',
    redirectTo: '/frame/search',
    pathMatch: 'full'
  }
];

Обновился браузер и произошла ошибка консоли:

Uncaught Error: Component HeaderComponent не является частью какого-либо NgModule или модуль не был импортирован в ваш модуль.

Так что, конечно же, я не добавил этот импорт в app.module. Я не знаю, было ли сообщение об ошибке просто внесено какое-либо изменение или добавлено это конкретное изменение маршрута. Я знаю, что, если я запустил npm start после добавления ** пути, я не смог бы отобразить ошибку консоли.

После добавления импорта: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FooterModule } from './footer/footer.module';
import { HeaderModule } from './header/header.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HeaderModule,
    FooterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Я получил еще одну ошибку консоли:

Неправильная конфигурация маршрута '/ frame': путь не может начинаться с косой черты

Я исправил это: 

let routes: Routes;
routes = [
  {
    path: '',
    children: [
      {
        path: '',
        children: [
          {
            path: '',
            children: [
              {path: '', component: HeaderComponent, outlet: 'header'},
              {path: '', component: FooterComponent, outlet: 'footer'}
              // Routes that display a header and footer go here.
            ]
          },
          {
            path: '',
            data: {header: false, footer: false},
            children: [
              {
                path: 'frame',
                children: [{
                  path: 'search',
                  loadChildren: () => import('./search/search.module').then(module => module.SearchModule)
                }]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    path: '**',
    redirectTo: '/frame/search',
    pathMatch: 'full'
  }
];

И мне было хорошо идти (или я так думал).

npm start все еще выдавал ошибку.

Сравнивая файлы маршрутов между новым проектом и моим, я заметил, что маршруты были определены как константы. Возможно, я скопировал маршруты из предыдущего проекта или WebStorm как-то изменил код, не уверен.

Итак, наконец-то мои рабочие приложения-маршруты. 

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        children: [
          {
            path: '',
            children: [
              {path: '', component: HeaderComponent, outlet: 'header'},
              {path: '', component: FooterComponent, outlet: 'footer'}
              // Routes that display a header and footer go here.
            ]
          },
          {
            path: '',
            data: {header: false, footer: false},
            children: [
              {
                path: 'frame',
                children: [{
                  path: 'search',
                  loadChildren: () => import('./search/search.module').then(module => module.SearchModule)
                }]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    path: '**',
    redirectTo: '/frame/search',
    pathMatch: 'full'
  }
];
...