angular/components

bug(MatAutoComplete): NG0301 error if the component under test is not a standalone component

Closed this issue · 1 comments

boszormenyip commented

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I have an an angular component that use the Autocomplete component from Angular Material. The component is not a standalone component. If I write a component test for my angular component, I get this error (The MatAutocompleteModule is imported in the AppModule and in the TestBed):

error properties: Object({ code: -301 })
Error: NG0301: Export of name 'matAutocomplete' not found! Find more at https://angular.dev/errors/NG0301
    at cacheMatchingLocalNames (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:82705:32)
    at resolveDirectives (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:82463:21)
    at elementStartFirstCreatePass (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:93638:3)
    at ɵɵelementStart (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:93672:41)
    at AutocompleteHarnessExample_Template (ng:///AutocompleteHarnessExample.js:21:9)
    at executeTemplate (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:81970:5)
    at renderView (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:83132:7)
    at renderComponent (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:83078:3)
    at renderChildComponents (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:83178:5)
    at renderView (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:83160:7)

The StackBlitz example is a modification of the 'Testing with MatAutocompleteHarness' example from the documentation of the Autocomplete example. The only change is the removal of the standalone: true flag from the component, and additional bolierplate (adding of angular.module.ts, changing the main.ts) to make the test running.

Reproduction

StackBlitz link: https://stackblitz.com/edit/angular-autocomplete-bug?file=src%2Fexample%2Fautocomplete-harness-example.spec.ts
Steps to reproduce:

  1. Open StackBlitz.
  2. Wait until the build and the test execution is done.

Expected Behavior

Green test

Actual Behavior

NG0301: Export of name 'matAutocomplete' not found error:

error properties: Object({ code: -301 })
Error: NG0301: Export of name 'matAutocomplete' not found! Find more at https://angular.dev/errors/NG0301
    at cacheMatchingLocalNames (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:82705:32)
    at resolveDirectives (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:82463:21)
    at elementStartFirstCreatePass (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:93638:3)
    at ɵɵelementStart (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:93672:41)
    at AutocompleteHarnessExample_Template (ng:///AutocompleteHarnessExample.js:21:9)
    at executeTemplate (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:81970:5)
    at renderView (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:83132:7)
    at renderComponent (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:83078:3)
    at renderChildComponents (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:83178:5)
    at renderView (https://angularautocompletebug-jdtb--9876--34c588ed.local-credentialless.webcontainer.io/_karma_webpack_/vendor.js:83160:7)

Environment

  • Angular: I tried with two version: 19.0.0-next.2 and 18.1.4. The version 19.0.0-next.2 is in the StackBlitz.
  • CDK/Material: I tried with two version: 19.0.0-next.2 and 18.1.4. The version 19.0.0-next.2 is in the StackBlitz.
  • Browser(s): Firefox 132.0, Google Chrome 130.0.6723.69
  • Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu 24.10
crisbeto commented

It's because the example in the docs was written with standalone in mind. If your component isn't standalone, you have to add it to the declarations in the TestBed.configureTestingModule call: https://stackblitz.com/edit/angular-autocomplete-bug-nursti?file=src%2Fexample%2Fautocomplete-harness-example.spec.ts