42

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?

Doua Beri
  • 10,612
  • 18
  • 89
  • 138

1 Answers1

47

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
}
  1. the tslint.json gets updated
"no-any": true
  1. 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
  }
}
  1. 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.

Poul Kruijt
  • 69,713
  • 12
  • 145
  • 149
  • 1
    so,no migration for existing code? we have to change this manually? and is this all? – Persk Jun 26 '20 at 09:16
  • @thReality You will have to migrate your existing code manually. Because they are basically possible 'bugs', which all need manual updating. This cannot be automated. And yes, this is "all". It may not look like much, but like i mentioned, the tsconfig update and the no-any have a big impact – Poul Kruijt Jun 26 '20 at 09:18
  • I am more interested in the following line `Configures your app as side-effect free to enable more advanced tree-shaking`. How exactly is this achieved and how can I enable it in the existing project? – Blind Despair Jun 26 '20 at 11:37
  • 1
    @BlindDespair I did some more digging, and found a couple more changes. – Poul Kruijt Jun 26 '20 at 12:29
  • 1
    @PoulKruijt Great answer! could you fix the typo in `sideEfects: false`, people are likely to copy paste that. – Eric Phillips Jun 26 '20 at 15:11
  • 1
    I don't have tsconfig.base.json. but I do have tsconfig.app.json and tsconfig.json. are those the same thing? – Rick Jun 26 '20 at 15:55
  • @Rick no, with angular 10 the angular team has refactored the tsconfig 'mess' that was first and improved the development experience. If you do not have that file, it means you did not migrate properly by using `ng update`. Read [here](https://volosoft.com/blog/what-is-new-in-angular-10) for more information about what they've updated, and somehow try to run the migration – Poul Kruijt Jun 26 '20 at 16:07
  • I just ng new strict and put new configuration files in my existing code then manually merge some lines, then my app go kaboom with "any" errors lmao :))))) – Persk Jun 27 '20 at 03:02
  • any way for a "no-any" rule that just show warning? – ar099968 Jun 30 '20 at 08:30
  • 2
    @ar099968 sure, you can update the `tslint.json` and instead of `"no-any": true` you do `"no-any": { "severity": "warning" }` – Poul Kruijt Jun 30 '20 at 10:57
  • the "template" link isn't working anymore – neves Dec 16 '20 at 00:53
  • Can see it in the 10.x branch https://github.com/angular/angular-cli/blob/10.0.x/packages/schematics/angular/application/other-files/package.json.template – Alexander Dec 29 '20 at 13:18