Modern defaults when creating new angular application with strict flag

[prabh-62]

🚀 Feature request

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Description

When creating angular application with strict flag on, user still needs to update config files to strictest settings.

Here is a list of steps:

• > npx @angular/cli@10.0.0-next.3 new ui-applications --createApplication=false --strict=true
• > cd ui-applications
• > yarn ng generate application admin-console --defaults=true

Post actions after app is created

1. Edit angular.json and add OnPush as the default change detection strategy

   "@schematics/angular:component": {
           "changeDetection": "OnPush"
    }

2. Edit angular.json and update budgets

   		  {
   		   "type": "initial",
   		   "maximumWarning": "500kb",
   		   "maximumError": "600kb"
   		  }	

   

3. Edit tsconfig.json and set strict flag to true

         {
           "compilerOptions": {
             "strictNullChecks": true,
             "strict": true
           }
         }

   

4. Edit tsconfig.json and set strictTemplates flag to true

   "angularCompilerOptions": {
     "strictTemplates": true
    }

   

5. Edit tslint.json and add accessibility rules from https://web.dev/accessible-angular-with-codelyzer/

      "template-accessibility-alt-text": true,
      "template-accessibility-elements-content": true,
      "template-accessibility-label-for": true,
      "template-accessibility-tabindex-no-positive": true,
      "template-accessibility-table-scope": true,
      "template-accessibility-valid-aria": true,
      "template-click-events-have-key-events": true,
      "template-mouse-events-have-key-events": true,
      "template-no-autofocus": true,
      "template-no-distracting-elements": true

   

6. Edit projects/admin-console/.browserslistrc and target modern browsers

        last 2 Edge versions
        last 2 Chrome versions
        last 2 Firefox versions
        last 2 Safari versions
   

   

7. Edit package.json add lint, test and build scripts for admin-console project

      "test:admin-console": "ng test --project admin-console",
      "lint:admin-console": "ng lint --project admin-console",
      "build:admin-console": "ng build --prod --project admin-console"

   

I ran yarn lint:admin-console and yarn build:admin-console after making these changes(also, deleted contents of app.component.html) and I had no issues.

Describe the solution you'd like

If angular-cli could expose a modern (or something alike) flag, that would save developer time. It becomes very tedious to introduce these flags at a later stage when the team of developers is actively working on projects.

• > npx @angular/cli@10.0.0-next.3 new ui-applications --createApplication=false --strict=true --modern=true

Describe alternatives you've considered

I manually update config files for now

[alan-agius4]

Hi @prabh-62,

Thanks for this request, great detail and explanation👍. You'll be excited to know that for version 10, we are doing some changes that address some of the above, we already have 2 PR’s in flight.

See the below PR’s for more context:

• feat(@schematics/angular): evergreen new applications #17361
• feat(@schematics/angular): enable stricter type checking and optimization effective coding rules  #17372

Regarding some of your other points;

Stricter Budgets
Myself and @IgorMinar had a discussion around this week and indeed when using strict, we'll be setting stricter budgets.

OnPush as default change detection strategy
I think this is a good idea which we didn't discuss yet, @IgorMinar what are your thoughts?

Adding Codelyzer accessibility rules
I quite dig this, thoughts @mgechev and @IgorMinar?

Edit package.json add lint, test and build scripts for admin-console project
I don't see any added value with the new scripts in the package.json. As you can already achieve the same thing if you run:

yarn lint admin-console

or

ng lint admin-console

[mgechev]

I'd suggest holding off on stricter codelyzer/tslint. Both tools' maintenance would be discontinued. We should consider linting after we migrate to eslint.

[alan-agius4]

Hi @prabh-62,

Most of the desired changes has been implemented in the following 2 PRs #17361 and #17387.

We have discussed the remaining points with the team yesterday and we feel that we should hold off from adding them for following reasons:

Stricter Codelyzer/Tslint rules
Both of tools will be discontinued, and we should consider linting after we migrate to ESLint.

On Push changeDetection
While, indeed this is recommended in many cases from a performance standpoint, having this by default will make it harder for new users to adopt Angular because you'd need to take care of trigger change detection. In addition to that, this change will invalid a lot of courses, documentation and other learning material so this change alone might have a big impact on the community.

For these reason, I think we should close this issue for the time being and return to it in the future.

[prabh-62]

Thank you for PRs. And sure, we can close this issue for now

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}