Element not a known element but exists in imports

I'm using a number of Angular Material components. For example the MatCheckbox and MatTabs. They import and work fine. However the MatExpansionModule and the MatAutocompleteModule do not.

During development my editor shows the standard errors:

'mat-accordion' is not a known element:...

'mat-autocomplete' is not a known element:...
​

However running ng serve builds just fine and the components render correctly. But when I go to build it completely fails.

I have no clue how it can build locally for development but fail a production build, especially since the other Material modules import just fine.

ng version

Angular CLI: 19.2.19
Node: 22.19.0
Package Manager: npm 10.9.3
OS: darwin arm64

Angular: 19.2.15
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1902.19
@angular-devkit/build-angular 19.2.19
@angular-devkit/core 19.2.19
@angular-devkit/schematics 19.2.19
@angular/cdk 19.2.19
@angular/cli 19.2.19
@angular/material 19.2.19
@schematics/angular 19.2.19
ng-packagr 19.2.2
rxjs 7.8.2
typescript 5.6.3
zone.js 0.15.1


tsconfig.json:

{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"paths": {
"myLib": [
"./dist/myLibProject"
]
},

"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "bundler",
"importHelpers": true,
"target": "es2020",
"module": "es2020",
"lib": [
"es2020",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}


tsconfig.lib.json:

{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"declaration": true,
"declarationMap": true,
"inlineSources": true,
"types": []
},
"exclude": [
"**/*.spec.ts"
]
}


tsconfig.lib.prod.json

{
"extends": "./tsconfig.lib.json",
"compilerOptions": {
"declarationMap": false
},
"angularCompilerOptions": {
"compilationMode": "partial"
}
}

Continue reading...