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?
1
-
Is this going to work this way that I have to import such a standalone component to a module I want to use it in?Karol– Karol2022-06-06 11:53:03 +00:00Commented Jun 6, 2022 at 11:53
Add a comment
|
2 Answers
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 {}
3 Comments
Zaffer
I forget to that the importing component also need the standalone property
robin is the true main hero
ERROR Error: Uncaught (in promise): Error: NG0201: No provider for NgControl found in NodeInjector. Find more at https://angular.io/errors/NG0201 I get this error when trying to add it in the decorator for @Component and the imports property.
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`,
})
