Angular 2 Routing issue
See original GitHub issueI’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:
- Created 7 years ago
- Reactions:2
- Comments:8 (1 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
In my case all neccessary modules is included in AppModule. So it’s another issue.
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