How to import standalone components from a lib in Angular 14?

Question

Angular 14 introduced new standalone components, which doesn't require any module to be used. How can such components be used if provided in a library? In standard, non-standalone components, we first had to import a given module. How Angular will recognize that component I'm importing comes from this particular package?

Answer 1

To make a standalone component, you need to define the component as standalone using the standalone parameter in the decorator of the component, then you can use the imports statement in the component as well.

To generate using the standalone flag:

ng generate component example-component --standalone

If instead, if you would like your whole project to be standalone, you can add the standalone flag to the new command, and then you don't have to specify standalone on the generate command:

ng new my-application --standalone

ng g c example-component

Your component would then look like this:

@Component({
  standalone: true,
  imports: [CommonModule],
  selector: 'example-component',
  template: `./example.component.html`,
})
export class ExampleComponent {}

Next you need to import the component into other components/modules. You now can import it into your module in the import property which wasn't supported before. Or you can import it into another component which also wasn't supported at all, and now is.

Note: Components importing a component also need the standalone property.

// Importing using a Module
@NgModule({
  imports: [ExampleComponent]
})
export class MyModule {}

// Importing using a component
// This component also needs the standalone property
@Component({
  standalone: true,
  imports: [ExampleComponent],
  selector: 'some-component',
  template: `./component.html`,
})
export class OtherExampleComponent {}

Answer 2

If you want to use a standalone component in another component A, you need to import the standalone component in component A like below,

@Component({
  standalone: true,
  imports: [StandaloneComponent],
  selector: 'demo-component',
  template: `./demo.component.html`,
})