Using component of one module as path in route of app module

Question

I have simple module SomeOtherModule and i want that it's CounterComponent is available as path in AppModule.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CounterService } from '../services/counter.service';
import { CounterComponent } from '../counter/counter.component';
@NgModule({  
  imports: [ CommonModule],
  providers: [CounterService],
  declarations: [  CounterComponent ],
  exports: [CounterComponent] 
})
export class SomeOtherModule { }

and AppModule:

import { SomeOtherModule } from './some-other/some-other.module';
@NgModule({
    declarations: [
       AppComponent,  
       HomeComponent,     
       CounterComponent, 
    ],
    imports: [SomeOtherModule,
         RouterModule.forRoot([
          { path: '', component: HomeComponent, pathMatch: 'full' },
          { path: 'counter', component: CounterComponent }, 
     ]
)]

TS error on CounterComponent not found

You could specify your component path in a SomeOtherRoutingModule an then redirect 'counter' to the SomeOtherModule from the AppModule. — ibenjelloun
– ibenjelloun, Commented May 22, 2018 at 8:05

Adrii · Accepted Answer · 2018-05-22 09:26:23Z

1

In your AppModule, remove CounterComponent from declarations module property. He is already declared onSomeOtherModule.

EDIT: I don't know if you cut it for the question, but if not, you forgot to import CounterComponent in your AppModule files.

edited May 22, 2018 at 9:26

answered May 22, 2018 at 8:05

Adrii

1,7701 gold badge14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Lapenkov Vladimir Over a year ago

Neither works. I cut BrowserModule for simplicity as AppModule has 20+ dependencies

Adrii Over a year ago

@ВладимирЛапенков Okey, my bad. In your AppModule, did you import CounterComponent ?

Lapenkov Vladimir Over a year ago

No. I thought it belongs to another module so i don't need to explicit import { CounterComponent } from './counter/counter.component';

Adrii Over a year ago

@ВладимирЛапенков import from ES and import from NgModule are totally differents. If you write component: CounterComponent explicitly on AppModule, then, you need to import CounterComponent. Just try it :) if I wrong, I will learned something

Lapenkov Vladimir Over a year ago

You mean i should import CounterComponent in @NgModule of AppModule?

|

Collectives™ on Stack Overflow

Using component of one module as path in route of app module

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related