Problems with alphabetize order rules in Angular 11x

[thiagosauddev]

My team and I are having a strange problem with the paths, for me the import must follow one order and for the rest of the team another, and it is only for me that the order is different.

This is my problem:

import { TableOrderComponent } from "src/app/shared/tables/table-order/table-order.cmponent";

import { TableOrderDetailsComponent } from "src/app/shared/tables/table-order-details/table-order-details.cmponent";

It asks me to change the order, passing TableOrderDetails above TableOrder, but my colleagues say the "correct" order is the one in the code above.

TSCONFIG:

{
 "compilerOptions": {
  "target": "es2019",
  "module": "es2020",
  "strict" false,
  "esModuleInterop": true,
  "skipLibCheck": true,
  "forceConsistentCasingInFileNames": true,
  "declaration": false,
  "sourceMap": true,
  "outDir": "./dist/out-tsc",
  "baseUrl": "./"
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "importHelpers": true,
  "noImplicitAny": false,
  "typeRoots": ["node_modules/@types"],
  "lib": ["es2019", "dom"]
 },
  "angularCompileOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "fullTemplateTypeCheck": false,
    "strictInjectionParameters": false
  }
}

ESLINT:

{
 root: true,
 overrides: [
  files: ["src/**/*.ts"],
  parseOptions: {
   project: ["tsconfig.json", "e2e/tsconfig.json"],
   tsconfigRootDir: __dirname,
   sourceType: "module",
   createDefaultProgram: true 
 },
 extends: [
  "plugin:@angular-eslint/recommended",
  "plugin:@angular-eslint/template/process-inline-templates",
  "airbnb-base",
  "airbnb-typescript/base",
  "eslint:recommended",
  "plugin:@typescript-eslint/eslint-recommended",
  "plugin:prettier/recommended"
 ],
 plugins: ["@typescript-eslint", "prettier", "ununsed-imports", "simple-import-sort"],
 rules: {
  ...,
  "import/order": [
    "error",
    {
     "newlins-between": "never",
     alphabetize: {
      caseInsensitive: true,
      order: "asc" 
    },
    groups: [
     "internal",
     "unknown",
     "external",
     "builtin",
     ["parent", "sibling", "index"]
    ],
    pathGroupsExcludedImportTypes: ["builtin", "type", "object"]
   }
  ]
 }
]
}

LIBS:

@angular/common: ~11.2.14
@angular/compiler: ~11.2.14
@angular/core: ~11.2.14
@angular-devkit/build-angular: ~0.1102.13
@angular-eslint/builder: 4.3.1
@angular-eslint/eslint-plugin: 4.3.1
@angular-eslint/eslint-plugin-template: 4.3.1
@angular-eslint/schematics: 4.3.1
@angular-eslint/template-parser: 4.3.1
@angular-eslint/cli: ~11.2.14
@angular-eslint/compiler-cli: ~11.2.14
eslint: ^7.6.0
eslint-plugin-angular: ^4.1.0
eslint-plugin-import: ^2.25.2
eslint-plugin-simple-import-sort: ^10.0.0
eslint-plugin-unused-imports: ^3.0.0
ts-node: ~8.3.0
typescript: ~4.1.5

[ljharb]

I believe this may be addressed by #2885.

[thiagosauddev]

Acredito que isso pode ser resolvido por #2885 .

I didn't understand very well, what would be the solution in this mentioned topic?

Would updating to version 2.26.x solve the problem? Or would I also have to change the alias paths from "src/..." to "../" and or "./"?

If it's the second case of paths, it doesn't make much sense, since using @alias is good practice.

[ljharb]

@thiagosauddev the solution would be, waiting for that PR to land and be released.

While using aliases is a neutral practice, using @alias specifically is a bad practice, since a leading @ means "an npm scope". You should pick a character that doesn't already mean something else.