Angular 10 Stricter Settings --strict

Question

In Angular 10 you can create a new project using ng new --strict

Enabling this flag initializes your new project with a few new settings that improve maintainability, help you catch bugs ahead of time, and allow the CLI to perform advanced optimizations on your app

Is there a command line that will upgrade an existing project to strict mode, or I just need to create a new project and then copy-paste the files from the other project?

Answer 1

Basically a couple things change:

1. tsconfig.base.json gets some new rules:

"compilerOptions": {   "strict": true,   "forceConsistentCasingInFileNames": true,   "noFallthroughCasesInSwitch": true }, "angularCompilerOptions": {   "strictInjectionParameters": true,   "strictTemplates": true }    

2. the tslint.json gets updated

"no-any": true 

3. the bundle budget sizes are reduced in your angular.json:

"configurations": {   //...   [envName]: {     "budgets": [       {         "type": "initial",         "maximumWarning": "500kb",         "maximumError": "1mb",       },       {         "type": "anyComponentStyle",         "maximumWarning": "2kb",         "maximumError": "4kb",       },     ]   } } 

and a schematics addition to your projects.[projectName].schematics path in the angular.json:

schematics: {   "@schematics/angular:application": {     "strict": true   } } 

4. the app package.json gets updated with a sideEffects property:

sideEffects: false 

For an explanation what this does, I can refer you to this answer.

This package.json is located inside your app folder. It should be added there with the migration while using the ng update option. If you do not have this file, you can use this template

To convert a current codebase, especially the tsconfig updates and the no-any will give you some headache to fix. But it will be definitely worth it to get a better (less hidden bugs) and easier to refactor codebase.