we use Angular 19. is it possible to use a component from a module in another component from the same module? if yes, how can i use it without the import in the first component?

partone.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { componentone } from './components/one/oneponent';
import { componenttwo } from './components/two/twoponent';

@NgModule({
  declarations: [
  ],
  imports: [
    CommonModule, componentone, componenttwo
  ],
  exports: [
    componentone, componenttwo
  ]
})
export class partoneModule { }

oneponent

import { Component } from '@angular/core';

@Component({
  selector: 'comp-one',
  imports: [],
  standalone: true,
  templateUrl: './oneponent.html',
  styleUrl: './oneponent.scss'
})
export class componentone {

}

twoponent

import { Component } from '@angular/core';

@Component({
  selector: 'comp-two',
  imports: [],
  standalone: true,
  templateUrl: './twoponent.html',
  styleUrl: './twoponent.scss'
})
export class componenttwo {

}

oneponent.html

<comp-two></comp-two>

we use Angular 19. is it possible to use a component from a module in another component from the same module? if yes, how can i use it without the import in the first component?

partone.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { componentone } from './components/one/oneponent';
import { componenttwo } from './components/two/twoponent';

@NgModule({
  declarations: [
  ],
  imports: [
    CommonModule, componentone, componenttwo
  ],
  exports: [
    componentone, componenttwo
  ]
})
export class partoneModule { }

oneponent

import { Component } from '@angular/core';

@Component({
  selector: 'comp-one',
  imports: [],
  standalone: true,
  templateUrl: './oneponent.html',
  styleUrl: './oneponent.scss'
})
export class componentone {

}

twoponent

import { Component } from '@angular/core';

@Component({
  selector: 'comp-two',
  imports: [],
  standalone: true,
  templateUrl: './twoponent.html',
  styleUrl: './twoponent.scss'
})
export class componenttwo {

}

oneponent.html

<comp-two></comp-two>

• angular
• typescript
• module

Share Improve this question Follow asked Mar 10 at 10:46 sunicssunics 5144 bronze badges 3

• if a component is standalone you have to import the necessary features to use them, if you want to define the common features before hand, make the component standalone: false and add the component to the declarations array and directly use the module, like how we did for modular angular components – Naren Murali Commented Mar 10 at 11:01
• so i've to import the module into the component, before i can use the other component? – sunics Commented Mar 10 at 11:16
• best is to get rid of modules, and just import components wherever necessary, modular is no longer needed, when working with standalone components. this gives you smaller angular build sizes, since you import only what is needed and not everything shared between all the components in a module. – Naren Murali Commented Mar 10 at 11:17

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

In your question you're explicitly mentioning that your team is using Angular 19. In your example I can see that the components are defined as standalone. This means there is no need for a module in the first place. And the good news is, you definitely can use comp-one within comp-two without any issues.

Since Angular 19 standardised the standalone components, it is no longer needed to define a component as standalone: true

I would suggest the following refactor for your example:

import { Component } from '@angular/core';

@Component({
  selector: 'comp-one',
  imports: [CommonModule, ComponentTwo],
  templateUrl: './oneponent.html',
  styleUrl: './oneponent.scss'
})
export class ComponentOne {}

import { Component } from '@angular/core';

@Component({
  selector: 'comp-two',
  imports: [CommonModule],
  templateUrl: './twoponent.html',
  styleUrl: './twoponent.scss'
})
export class ComponentTwo {}

<comp-two></comp-two>

And there you have it! You're using component two, within component one.

Now, if you do need to have a module and use component two within component one, the following refactor is needed:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { componentone } from './components/one/oneponent';
import { componenttwo } from './components/two/twoponent';

@NgModule({
  declarations: [
    ComponentOne, ComponentTwo
  ],
  imports: [
    CommonModule,
  ],
  exports: [
    ComponentOne, ComponentTwo
  ]
})
export class PartOneModule { }

import { Component } from '@angular/core';

@Component({
  selector: 'comp-one',
  standalone: false,
  templateUrl: './oneponent.html',
  styleUrl: './oneponent.scss'
})
export class ComponentOne {}

import { Component } from '@angular/core';

@Component({
  selector: 'comp-two',
  standalone: false,
  templateUrl: './twoponent.html',
  styleUrl: './twoponent.scss'
})
export class ComponentTwo {}

<comp-two></comp-two>

When you're using a module, it isn't necessary to import the component within the component. That is because the components are both part of the same module.

The key difference here is that the components are now part of the declarations array instead of the imports array. That is because in Angular modules, components are declared within a module. Modules are imported within a module.

With that said, one could say that a standalone component is a combination of a module and a component and, therefore, standalone.

Hope this helps!