Geek Answers Handbook

Error child routes with RC6 update

I get this runtime error with my routing when upgrading to RC6 (including child routes):

Listing Component is not part of any NgModule or module has not been imported into your module

This error indicates that I did not add ListingComponent to ngModule, but it is there as an ad.

In app.module, I have all my components as declarations. I also import the routing component. The routing component has an auxiliary routing component called listing.routes.

Here is my app.module.ts:

import {NgModule, CUSTOM_ELEMENTS_SCHEMA, ReflectiveInjector } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {FormsModule, FormBuilder} from '@angular/forms'; import { NgClass, NgStyle} from '@angular/common'; import { AppComponent } from './app.component'; import {routing} from './app.routes'; import {ListingModule} from './components/listing/listingmodule'; import {ListingComponent} from './components/listing/listing.Component'; @NgModule({ imports: [BrowserModule, routing], providers: [], declarations: [AppComponent, ListingComponent, ListingModule], bootstrap: [AppComponent] }) export class AppModule { }

Here is my app.routes.ts (which I import as routes):

 import { ModuleWithProviders } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import {ListingRoutes} from './components/listing/listing.routes'; import {SplashComponent} from './components/splash/splash.component'; export const appRoutingProviders: Routes = ([ { path: '', component: SplashComponent }, { path: 'login', component: SplashComponent }, ...ListingRoutes ]); export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutingProviders);

And here is my list of .routes.ts:

 import { ModuleWithProviders } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import {ListingModule} from './repairreturnmodule'; import {ListingComponent} from '../listing/listing.component'; export const ListingRoutes: Routes = [ { path: '', component: ListingModule, children: [ { path: 'listing', component: ListingComponent}, ] } ]; export const ListingRouting: ModuleWithProviders = RouterModule.forChild(ListingRoutes);

Did I miss something?

+5
source share
1 answer

EDIT: you are importing your listing component from

 import {ListingComponent} from './components/listing/listing.Component';

if you use the same convention from AppComponent (which you need), you should import from

 import {ListingComponent} from './components/listing/listing.Component';

See what a file name is. The rest of the code looks right.

I'm not sure if this is the source of the problem, but you declare the module there in the AppModule when you should import it ... Try moving the ListModule from the declaration array to the import array.

0
source

More articles:


All Articles