- Create workspace
ng new app --directory=./ --minimal --style=css --ssr=false --zoneless=true --ai-config=none- Create libraries
ng generate library lib-ang generate library lib-bng generate library lib-c- Fill
projects/lib-a/src/lib/lib-a.ts:
import { Directive } from '@angular/core';
@Directive({
selector: '[baseEntity1]',
})
export class BaseEntity1 {}
@Directive({
selector: '[baseEntity2]',
host: {'[style.background-color]': '"green"'}
})
export class BaseEntity2 {}
export const BaseEntities = [
BaseEntity1,
BaseEntity2,
] as const;- Fill
projects/lib-b/src/lib/lib-b.ts:
import { Directive } from '@angular/core';
import { BaseEntities } from 'lib-a';
@Directive({
selector: '[moreComplexEntity]',
host: { '[style.background-color]': '"red"' },
})
export class MoreComplexEntity {}
export const UserFriendlyImport = [...BaseEntities, MoreComplexEntity] as const;- Fill
projects/lib-с/src/lib/lib-c.ts:
import {Component} from '@angular/core';
import {UserFriendlyImport} from 'lib-b';
@Component({
selector: 'comp-from-library',
imports: [UserFriendlyImport],
template: `
<div baseEntity2>123</div>
<div moreComplexEntity>123</div>
`,
})
export class LibraryComponent {}- Replace all
src/app/app.tswith the following content:
import {Component} from '@angular/core';
import {LibraryComponent} from 'lib-c';
@Component({
selector: 'app-root',
imports: [LibraryComponent],
template: `<comp-from-library />`,
})
export class App {}- Run
ng build lib-a && ng build lib-b && ng build lib-c && ng build appIt logs error:
✘ [ERROR] NG2012: Component imports must be standalone components, directives, pipes, or must be NgModules. [plugin angular-compiler]
src/app/app.ts:6:12:
6 │ imports: [LibraryComponent],
╵ ~~~~~~~~~~~~~~~~
- Make these changes inside
projects/lib-b/src/lib/lib-b.ts
- export const UserFriendlyImport = [...BaseEntities, MoreComplexEntity] as const;
+ export const UserFriendlyImport = [BaseEntity1, BaseEntity2, MoreComplexEntity] as const;No error!