Нажатие на ссылку запускает «Uncaught (в обещании): ошибка: метаданные NgModule не найдены для« undefined »» - PullRequest
Новая
       38

Нажатие на ссылку запускает «Uncaught (в обещании): ошибка: метаданные NgModule не найдены для« undefined »»

0 голосов
/ 05 марта 2019

У меня есть приложение, которое я пытаюсь создать с помощью отложенной загрузки, поскольку существует много вложенных путей. Это приложение также будет преимущественно мобильным, поэтому улучшение этого опыта имеет решающее значение.

Экземпляр, который я настроил, находится здесь: https://stackblitz.com/edit/angular-bsfvdr

Я думал, что большая часть была настроена правильно, но при нажатии на ссылку на главной странице я получаю следующую трассировку стека ошибок: 

preview-ee4d58d6ef0576b4e139b.js:formatted:7278 ERROR Error: Uncaught (in 
promise): Error: No NgModule metadata found for 'undefined'.
  Error: No NgModule metadata found for 'undefined'.
     at NgModuleResolver.resolve (ng_module_resolver.ts:31)
     at CompileMetadataResolver.getNgModuleMetadata (metadata_resolver.ts:506)
     at JitCompiler._loadModules (compiler.ts:127)
     at JitCompiler._compileModuleAndComponents (compiler.ts:107)
     at JitCompiler.compileModuleAsync (compiler.ts:61)

Моей первой мыслью было, что либо модуль был неправильно определен, либо компонент неправильно загружался как модуль. Я довольно новичок в угловой, так что каждый кривая - это опыт обучения! Но я в тупике.

Нажмите на ссылку выше, чтобы просмотреть пример проекта Stack Blitz.

1 Ответ

0 голосов
/ 06 марта 2019

Проблема не только в маршрутах, но давайте сделаем это шаг за шагом:

  1. { path: '**', redirectTo: '/hello' }, redirectTo не требует конечной косой черты,

заменить на { path: '**', redirectTo: 'hello' }

для определения отложенной загрузки вы забыли имя модуля

app.routing.module.ts 

loadChildren: './pages/hello/hello-pages.module'
loadChildren: './pages/goodbye/goodbye-pages.module'

replaceна 

loadChildren: './pages/hello/hello-pages.module#HelloPagesModule'

, но для goodbye-pages.module вы скопировали HelloPagesModule, предположим, что это должно быть GoodByePagesModule

loadChildren: './pages/goodbye/goodbye-pages.module#GoodByePagesModule'
не знаю, почему вы импортируете GoodbyeRoutes в goodbye-pages.module.ts, а затем переопределяете его, кажется, снова - неправильное копирование

заменить на //import { GoodbyeRoutes } from '../routes/goodbye.routing.module';

loadChildren: '../routes/goodbye.routing.module#GoodbyeRoutingModule' - неверный путь

заменить на loadChildren: '../../routes/goodbye.routing.module#GoodbyeRoutingModule'

если вы используете component с loadChildren например: app.routing.module.ts 
{
    path: 'hello',
    component: HelloComponent,
    data: {
        title: 'Hello pieces'
    },
    loadChildren: './pages/hello/hello-pages.module#HelloPagesModule'
},

HelloComponent должно быть declared в AddModule (это нормально), но я полагаю, что вы смешали объявление в маршрутах, и HelloComponent, такое же, как GoodbyeComponent, должно использоваться в их модулях

, поэтому нет необходимости использовать component: HelloComponent,и component: GoodbyeComponent, внутри app.routing.module.ts

И Импорт NgModule должен использоваться только для модулей

так что app.module.ts 

@NgModule({
  imports:      [ BrowserModule, AppRoutingModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, GoodbyeComponent ],
  exports: [HelloComponent],
  bootstrap:    [ AppComponent ]
})

заменить на 

@NgModule({
  imports:      [ BrowserModule, AppRoutingModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})

, а затем hello-pages.module.ts 

@NgModule({
    imports: [RouterModule.forChild(HelloRoutes), CommonModule, FormsModule, HelloComponent],
    declarations: [GloryhammerComponent, SabatonComponent, SweetComponent],
    exports: []
})

заменено на 

@NgModule({
    imports: [RouterModule.forChild(HelloRoutes), CommonModule, FormsModule],
    declarations: [HelloComponent, SabatonComponent, SweetComponent],
    exports: []
})
Чтобы сделать маршрутизацию работ:

Вы должны добавить <router-outlet></router-outlet> внутри вашего app.component.html

После того, как точка 6 приложение будет работать (но не на всех), чтобы завершить его, вы должны исправить также «ленивые» маршруты, поэтому на основе точка 5

hello.routing.module.ts 

@NgModule({
    imports: [RouterModule.forChild(LazyHelloRoutes), CommonModule, HelloComponent],
    declarations: [],
    exports: [HelloComponent]
})

заменить на 

@NgModule({
    imports: [RouterModule.forChild(LazyHelloRoutes), CommonModule, HelloPagesModule],
    declarations: [],
    exports: []
})

и goodbye.routing.module.ts 

@NgModule({
    imports: [RouterModule.forChild(LazyGoodbyeRoutes), CommonModule, GoodbyeComponent],
    declarations: [],
    exports: [GoodbyeComponent]
})

заменить на 

@NgModule({
    imports: [RouterModule.forChild(GoodbyeRoutes), CommonModule, FormsModule],
    declarations: [GoodbyeComponent, LouComponent, DijouComponent, HermesComponent],
    exports: [GoodbyeComponent]
})

после всех этих шагов все будет работать как положено

Изменено Демо

...