No compile error for missing import in standalone Angular component

I'm working with standalone Angular 18 components and ran into an issue.

I have a custom component (FooComponent) that I forgot to import into another standalone component. However, no compile-time error appears when I forget to import the component into the imports array of the standalone component.

Here’s the code:

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

@Component({
standalone: true,
selector: 'app-test',
template: `
<foo-component [content]="getLinkForCopy()"></foo-component>
`,
styleUrls: ['./test.component.css'],
// Forgot to import FooComponent here
})
export class TestComponent {
getLinkForCopy() {
return 'https://example.com';
}
}


Even though I see some errors in the VS Code editor, there’s no compile-time error, only a runtime error when the application runs. How can I catch such missing imports earlier during compilation?

Continue reading...