question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Angular 2 Routing issue

See original GitHub issue

I’m submitting a … (check one with “x”)

[X] bug report 

**Current behavior**
Unable to use Components from a different module other than AppModule  

**Expected/desired behavior**
Router should support components from multiple modules

**Reproduction of the problem**
Defined a component VehicleListingComponent in InventoryModule and imported InventoryModule in AppModule. When try to use the VehicleListingComponent with router getting an error

Component VehicleListingComponent is not part of any NgModule or the module has not been imported into your module.

Please see the relevant code from application 

app.routing.ts
---------------------
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { VehicleListingComponent } from './inventory/vehicle-listing.component';
import {HomeComponent}  from './home.component';

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'vehicle-listing', component: VehicleListingComponent },
    { path: 'vehicle/:id', component: VehicleDetailsComponent }
    //{ path: '**', component: PageNotFoundComponent }
];
export const appRoutingProviders: any[] = [
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);


VehicleListingComponent is defined in a separate module

inventory.module.ts
--------------------------------
import { VehicleListingComponent } from "./vehicle-listing.component";
@NgModule({
    imports: [
        HttpModule       
    ],
    declarations: [
       VehicleListingComponent
    ],
    providers: [InventoryService]
})
export class InventoryModule { }

app.module.ts
--------------------------------
import { InventoryModule } from "./Inventory/Inventory.module";
import { HomeComponent } from "./home.component";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing      
    ],
    declarations: [AppComponent, HomeComponent],
    providers: [
        appRoutingProviders
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }



* **Angular version:** 2.0.0-rc6

* **Browser:** [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] 

* **Language:** [all | TypeScript 2.0.2 | ES6/7 | ES5] 

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:2
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
olegkarpovichcommented, Sep 13, 2016

In my case all neccessary modules is included in AppModule. So it’s another issue.

2reactions
shripalshahcommented, Aug 24, 2017

Please check the path in the import statement of the component in the app.module.ts. ng g c command at times adds the file in different directory irrespective of the hierarchy mentioned in that command. best practice is to check the path in app.module.ts after every ng g c command

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular 2 routing not working properly - Stack Overflow
I can't seem to get routing to work with children in Angular 2. The application is my first Angular 2 application, it is...
Read more >
Troubleshooting Angular routing - Medium
While the documentation of Angular routing is great, it does not cover some edge cases and troubleshooting of missing imports or duplicate paths...
Read more >
Common Routing Tasks - Angular
This topic describes how to implement many of the common tasks associated with adding the Angular router to your application.
Read more >
Angular 2 - Routing - Tutorialspoint
Routing helps in directing users to different pages based on the option they choose on the main page. Hence, based on the option...
Read more >
Angular Router: Child Routes, Auxiliary Routes, Master Detail
This is a comprehensive guide to the fundamental concepts of the Angular Router: routes, paths, components, outlets.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found