Error "Component imports must be standalone components" when building Angular component with...

I'm trying to build a standalone Angular component outside of a standard @angular/cli project. When I build and try to import my component, I get this error:

Component imports must be standalone components, directives, pipes, or must be NgModules.(-992012)
​

My Component (Simplified)


@Component({
selector: "my-package",
standalone: true, // Component is marked as standalone
template: `
<input
#inputRef
(input)="handleInput()"
(blur)="handleBlur()"
[disabled]="disabled"
/>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyPackageComponent),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => MyPackageComponent),
multi: true,
},
],
})
export class MyPackageComponent implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor, Validator {
// Component implementation...
}

Build Process


Step 1: Generate TypeScript declarations

tsc -p angular/tsconfig.json && sed -i -e "s/\/index\"/\"/g" angular/build/MyPackage.d.ts


Step 2: Bundle with esbuild

const { build } = require("esbuild");

const mainShared = {
bundle: true,
external: ["@angular/core", "@angular/forms"],
logLevel: "info",
minify: false,
};

// CommonJS build
build({
...mainShared,
entryPoints: ["angular/src/my-package/angular.ts"],
format: "cjs",
outfile: "angular/build/MyPackage.cjs",
});

// ES Modules build
build({
...mainShared,
entryPoints: ["angular/src/my-package/angular.ts"],
format: "esm",
outfile: "angular/build/MyPackage.js",
});

TypeScript Configuration


{
"compilerOptions": {
"target": "es6",
"module": "esnext",
"moduleResolution": "node",
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"declaration": true,
"emitDeclarationOnly": true,
"outFile": "build/MyPackage.d.ts",
"rootDir": "./src",
"allowJs": true,
},
"angularCompilerOptions": {
"strictTemplates": true,
},
"include": [
"src/my-package/angular.ts",
"src/my-package/i18n/index.ts",
],
}


Questions

1. 
   Is my tsconfig.json missing something that prevents proper standalone component recognition?
   
   
2. 
   Should I use ngc instead of tsc for the first compilation step? I understand that tsc compiles TypeScript to JavaScript, while ngc processes Angular-specific metadata and templates.
   
   
3. 
   Does esbuild properly handle Angular standalone components, or do I need additional processing?
   

The component is clearly marked as standalone: true, but the consuming application doesn't seem to recognize it as such. Any insights on what might be missing in my build pipeline?

Angular version: 19+

Continue reading...