PS > ng new {プロジェクト名}
? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
  This setting helps improve maintainability and catch bugs ahead of time.
  For more information, see https://angular.io/strict Yes
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss
 ]
CREATE demo/angular.json (3689 bytes)
CREATE demo/package.json (1194 bytes)
CREATE demo/README.md (1013 bytes)
CREATE demo/tsconfig.json (783 bytes)
CREATE demo/tslint.json (3185 bytes)
CREATE demo/.editorconfig (274 bytes)
CREATE demo/.gitignore (631 bytes)
CREATE demo/.browserslistrc (703 bytes)
CREATE demo/karma.conf.js (1421 bytes)
CREATE demo/tsconfig.app.json (287 bytes)
CREATE demo/tsconfig.spec.json (333 bytes)
CREATE demo/src/favicon.ico (948 bytes)
CREATE demo/src/index.html (290 bytes)
CREATE demo/src/main.ts (372 bytes)
CREATE demo/src/polyfills.ts (2830 bytes)
CREATE demo/src/styles.scss (80 bytes)
CREATE demo/src/test.ts (753 bytes)
CREATE demo/src/assets/.gitkeep (0 bytes)
CREATE demo/src/environments/environment.prod.ts (51 bytes)
CREATE demo/src/environments/environment.ts (662 bytes)
CREATE demo/src/app/app-routing.module.ts (245 bytes)
CREATE demo/src/app/app.module.ts (393 bytes)
CREATE demo/src/app/app.component.html (25757 bytes)
CREATE demo/src/app/app.component.spec.ts (1051 bytes)
CREATE demo/src/app/app.component.ts (209 bytes)
CREATE demo/src/app/app.component.scss (0 bytes)
CREATE demo/e2e/protractor.conf.js (904 bytes)
CREATE demo/e2e/tsconfig.json (274 bytes)
CREATE demo/e2e/src/app.e2e-spec.ts (655 bytes)
CREATE demo/e2e/src/app.po.ts (274 bytes)
✔ Packages installed successfully.
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint:
hint:   git config --global init.defaultBranch <name>
hint:
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint:
hint:   git branch -m <name>
    Successfully initialized git.
PS >

ng add @angular-eslint/schematics
ng add @angular-eslint/schematics
? Would you like to share anonymous usage data about this project with the Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more     
details and how to change this setting, see https://angular.io/analytics. No
ℹ Using package manager: npm
✔ Found compatible package version: @angular-eslint/schematics@4.3.0.
✔ Package information loaded.
✔ Package successfully installed.
    
    All @angular-eslint dependencies have been successfully installed 🎉
    
    Please see https://github.com/angular-eslint/angular-eslint for how to add ESLint configuration to your project.
    
UPDATE package.json (1542 bytes)
✔ Packages installed successfully.

ng g @angular-eslint/schematics:convert-tslint-to-eslint
? Would you like to remove TSLint and its related config if there are no TSLint projects remaining after this conversion? Yes
? Would you like to ignore the existing TSLint config? Recommended if the TSLint config has not been altered much as it makes the new ESLint config cleaner. Yes
    
    INFO: We are now installing the "tslint-to-eslint-config" package into a tmp directory to aid with the conversion
    
    This may take a minute or two...
    
DELETE tslint.json
CREATE .eslintrc.json (1015 bytes)
UPDATE angular.json (3662 bytes)  
UPDATE package.json (1491 bytes)  
✔ Packages installed successfully.

PS > npm i -D @typescript-eslint/eslint-plugin eslint-plugin-prettier prettier prettier-eslint eslint-config-prettier

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended" //追加
      ],
      "rules": {
        "@angular-eslint/component-selector": [
          "error",
          {
            "prefix": "app",
            "style": "kebab-case",
            "type": "element"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "prefix": "app",
            "style": "camelCase",
            "type": "attribute"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
     //追加
      "excludedFiles": [
        "*inline-template-*.component.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        "plugin:prettier/recommended" //追加
      ],
      "rules": {
        //追加
        "prettier/prettier": [
          "error",
          {
            "parser": "angular"
          }
        ]
      }
    }
  ]
}

{
  "printWidth": 120,
  "useTabs": false,
  "singleQuote": true
}

PS > ng lint --fix

npm install --D husky
npm install --g husky
husky install
husky add .husky/pre-commit "ng lint --fix"

PS > ng add @angular/material@11.2.13
ng add @angular/material@11.2.13
ℹ Using package manager: npm
✔ Package information loaded.
✔ Package successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes 
? Set up browser animations for Angular Material? Yes
UPDATE package.json (1811 bytes)
✔ Packages installed successfully.
UPDATE src/app/app.module.ts (478 bytes)
UPDATE angular.json (3826 bytes)
UPDATE src/index.html (607 bytes)
UPDATE src/styles.scss (181 bytes)

npm i ngx-logger

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    LoggerModule.forRoot({
      serverLoggingUrl: '/api/logs',
      level: NgxLoggerLevel.DEBUG,
      serverLogLevel: NgxLoggerLevel.ERROR,
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

npx sb@next init