From bd5e425c14b9c75369e0953a91385fe024321903 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Wed, 30 Sep 2020 10:03:16 +0200 Subject: [PATCH] docs: update CLI strict mode documentation (#39054) With this change we update the strict mode documentation to reflect the changes done in the CLI. (https://github.com/angular/angular-cli/pull/18931) Changes effect - Removing `no-any` tslint rule - The special sideEffects package.json - Added `strictTemplates` NGC option PR Close #39054 --- aio/content/guide/file-structure.md | 1 - aio/content/guide/strict-mode.md | 24 ++++-------------------- 2 files changed, 4 insertions(+), 21 deletions(-) diff --git a/aio/content/guide/file-structure.md b/aio/content/guide/file-structure.md index b78324814f..35c7a446a5 100644 --- a/aio/content/guide/file-structure.md +++ b/aio/content/guide/file-structure.md @@ -95,7 +95,6 @@ Angular components, templates, and styles go here. | `app/app.component.css` | Defines the base CSS stylesheet for the root `AppComponent`. | | `app/app.component.spec.ts` | Defines a unit test for the root `AppComponent`. | | `app/app.module.ts` | Defines the root module, named `AppModule`, that tells Angular how to assemble the application. Initially declares only the `AppComponent`. As you add more components to the app, they must be declared here. | -| `app/package.json` | This file is generated only in applications created using `--strict` mode. This file is not used by package managers. It is used to tell the tools and bundlers whether the code under this directory is free of non-local [side-effects](guide/strict-mode#side-effect). | ### Application configuration files diff --git a/aio/content/guide/strict-mode.md b/aio/content/guide/strict-mode.md index 3cfe153cb9..046c6c1921 100644 --- a/aio/content/guide/strict-mode.md +++ b/aio/content/guide/strict-mode.md @@ -1,17 +1,15 @@ # Strict mode -When you create a new workspace or a project you have an option to create them in a strict mode using the `--strict` flag. +When you create a new workspace or an application you have an option to create them in a strict mode using the `--strict` flag. -Enabling this flag initializes your new workspace or 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 application. +Enabling this flag initializes your new workspace or application with a few new settings that improve maintainability, help you catch bugs ahead of time. Additionally, applications that use these stricter settings are easier to statically analyze, which can help the `ng update` command refactor code more safely and precisely when you are updating to future versions of Angular. Specifically, the `strict` flag does the following: * Enables [`strict` mode in TypeScript](https://www.staging-typescript.org/tsconfig#strict), as well as other strictness flags recommended by the TypeScript team. Specifically, `forceConsistentCasingInFileNames`, `noImplicitReturns`, `noFallthroughCasesInSwitch`. -* Turns on strict Angular compiler flags [`strictTemplates`](guide/angular-compiler-options#stricttemplates) and [`strictInjectionParameters`](guide/angular-compiler-options#strictinjectionparameters) -* [Bundle size budgets](guide/build#configuring-size-budgets) have been reduced by ~75% -* Turns on [`no-any` tslint rule](https://palantir.github.io/tslint/rules/no-any/) to prevent declarations of type `any` -* [Marks your application as side-effect free](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free) to enable more advanced tree-shaking +* Turns on strict Angular compiler flags [`strictTemplates`](guide/angular-compiler-options#stricttemplates), [`strictInjectionParameters`](guide/angular-compiler-options#strictinjectionparameters) and [`strictTemplates`](guide/angular-compiler-options#stricttemplates). +* [Bundle size budgets](guide/build#configuring-size-budgets) have been reduced by ~75%. You can apply these settings at the workspace and project level. @@ -30,17 +28,3 @@ To create a new application in the strict mode within an existing non-strict wor ng generate application [project-name] --strict - -{@a side-effect} - -### Non-local side effects in applications - -When you create projects and workspaces using the `strict` mode, you'll notice an additional `package.json` file, located in `src/app/` directory. -This file informs tools and bundlers that the code under this directory is free of non-local side effects. Non-local side effects in the application code are not common and using them is not considered a good coding pattern. -More importantly, code with these types of side effects cannot be optimized, resulting in increased bundle sizes and applications that load more slowly. - -If you need more information, the following links may be helpful. - -* [Tree-shaking](https://webpack.js.org/guides/tree-shaking/) -* [Dealing with side effects and pure functions in JavaScript](https://dev.to/vonheikemen/dealing-with-side-effects-and-pure-functions-in-javascript-16mg) -* [How to deal with dirty side effects in your pure function JavaScript](https://jrsinclair.com/articles/2018/how-to-deal-with-dirty-side-effects-in-your-pure-functional-javascript/) \ No newline at end of file