I just updated a bigger project, that uses NX to the latest version of Angular and as I love the required inputs I directly tried it out. While the IDE worked and showed an error, ng serve didn't show the error when a required input is set. Does anybody face the same issue?
Example for that: The IconComponent has a required input icon.
@Input({
required: true
}) icon: string;
The IDE shows that the icon component has a required input "icon" which isn't set. That is exactly what I expect.
However, the ng serve command / ng build command doesn't show an error:
I would expect an error like described in the official angular docs.
My first guess was that this has something to do with a local angular cache, but I already tried deleting the .angular folder which didn't solve the issue.
I am using the following packages:
"dependencies": {
"@angular/animations": "16.1.7",
"@angular/cdk": "16.1.6",
"@angular/common": "16.1.7",
"@angular/compiler": "16.1.7",
"@angular/core": "16.1.7",
"@angular/forms": "16.1.7",
"@angular/platform-browser": "16.1.7",
"@angular/platform-browser-dynamic": "16.1.7",
"@angular/router": "16.1.7",
...
}
"devDependencies": {
"@angular-devkit/build-angular": "16.1.6",
"@angular-devkit/core": "16.1.6",
"@angular-devkit/schematics": "16.1.6",
"@angular-eslint/eslint-plugin": "16.0.2",
"@angular-eslint/eslint-plugin-template": "16.0.2",
"@angular-eslint/template-parser": "16.0.2",
"@angular/cli": "~16.1.0",
"@angular/compiler-cli": "16.1.7",
"@angular/language-service": "16.1.7",
"@nx/angular": "16.6.0",
"@nx/cypress": "16.6.0",
"@nx/eslint-plugin": "16.6.0",
"@nx/express": "16.6.0",
"@nx/jest": "16.6.0",
"@nx/linter": "16.6.0",
"@nx/nest": "16.6.0",
"@nx/node": "16.6.0",
"@nx/storybook": "16.6.0",
"@nx/workspace": "16.6.0",
"@schematics/angular": "16.1.6"
}
My nx project.json looks like that:
"build": {
"executor": "@angular-devkit/build-angular:browser",
"outputs": ["{options.outputPath}"],
"options": {
"stylePreprocessorOptions": {
"includePaths": ["libs/base-libs/frontend/stylesheets/src/lib"]
},
"outputPath": "dist/apps/project",
"index": "apps/project/src/index.html",
"main": "apps/project/src/main.ts",
"polyfills": "apps/project/src/polyfills.ts",
"tsConfig": "apps/project/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [{
"input": "licenses",
"glob": "*.md",
"output": "assets"
}
],
"styles": ["apps/project/src/styles.scss"],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "19mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10mb"
}
],
"fileReplacements": [...],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
serve": {
"executor": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "app:build:production"
},
"development": {
"browserTarget": "app:build:development"
}
},
"defaultConfiguration": "development"
}
Tsconfig also doesn't have anything special defined. Unfortunally with a new project this problem is not happening. So it seems like this has something to do with a config defined in this project. Did anybody else face such a problem when using the required field for Angular inputs?
