refactor: imports ts & scss files

.eslintrc.json

@@ -61,6 +61,7 @@
     ],
     "prefer-template": ["error"],
     "no-useless-concat": ["error"],
-    "no-duplicate-imports": ["error"]
+    "no-duplicate-imports": ["error"],
+    "import/no-unresolved": ["error", {"ignore": ["@utils", "@services"]}]
   }
 }

angular.json

@@ -22,6 +22,9 @@
               "src/app/styles/themes.scss",
               "src/app/styles/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/app/styles", "src/app/list"]
+            },
             "scripts": [],
             "aot": false,
             "vendorChunk": true,

src/app/app.module.ts

@@ -19,7 +19,7 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {AppComponent} from './app.component';
 import {ListCompositionComponent} from './list-composition/list-composition.component';
 import {ListFichierComponent} from './list-fichier/list-fichier.component';
-import {TitlePipe} from './utils/title.pipe';
+import {TitlePipe} from '@utils/title.pipe';
 
 @NgModule({
   declarations: [

src/app/list-composition/list-composition.component.scss

@@ -1 +1 @@
-@use '../list/list.component';
+@use 'list.component';

src/app/list-composition/list-composition.component.ts

@@ -5,15 +5,15 @@ import {skipWhile} from 'rxjs/operators';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {BehaviorSubject} from 'rxjs';
 import {faAngleUp} from '@fortawesome/free-solid-svg-icons';
+import {FaIconLibrary} from '@fortawesome/angular-fontawesome';
 
-import {Composition} from '../utils/model';
-import {Utils} from '../utils/utils';
-import {DataService} from '../services/data.service';
-import {UtilsService} from '../services/utils.service';
+import {Composition} from '@utils/model';
+import {Utils} from '@utils/utils';
+import {DataService} from '@services/data.service';
+import {UtilsService} from '@services/utils.service';
 import {ListDirective} from '../list/list.component';
-import {DexieService} from '../services/dexie.service';
-import {FaIconLibrary} from '@fortawesome/angular-fontawesome';
-import {Dropbox} from '../utils/dropbox';
+import {DexieService} from '@services/dexie.service';
+import {Dropbox} from '@utils/dropbox';
 
 @Component({
   selector: 'app-list-composition',

src/app/list-fichier/list-fichier.component.scss

@@ -1 +1 @@
-@use '../list/list.component';
+@use 'list.component';

src/app/list-fichier/list-fichier.component.ts

@@ -7,12 +7,12 @@ import {Sort} from '@angular/material/sort';
 import {PageEvent} from '@angular/material/paginator';
 
 import {ListDirective} from '../list/list.component';
-import {Fichier, Composition} from '../utils/model';
-import {DataService} from '../services/data.service';
-import {UtilsService} from '../services/utils.service';
-import {DexieService} from '../services/dexie.service';
-import {Utils} from '../utils/utils';
-import {Dropbox} from '../utils/dropbox';
+import {Fichier, Composition} from '@utils/model';
+import {DataService} from '@services/data.service';
+import {UtilsService} from '@services/utils.service';
+import {DexieService} from '@services/dexie.service';
+import {Utils} from '@utils/utils';
+import {Dropbox} from '@utils/dropbox';
 
 @Component({
   selector: 'app-list-fichier',

src/app/list/list.component.scss

@@ -1,5 +1,5 @@
 @use 'sass:list';
-@use '../styles/utils' as *;
+@use 'imports' as *;
 
 /* stylelint-disable selector-pseudo-element-no-unknown */
 /* stylelint-disable selector-class-pattern */

src/app/list/list.component.ts

@@ -1,8 +1,8 @@
 import {OnInit, Directive} from '@angular/core';
 import {Sort} from '@angular/material/sort';
 import {PageEvent} from '@angular/material/paginator';
-import {Dropdown} from '../utils/model';
-import {Utils} from '../utils/utils';
+import {Dropdown} from '@utils/model';
+import {Utils} from '@utils/utils';
 
 @Directive()
 export abstract class ListDirective<T> implements OnInit {

src/app/services/data.service.ts

@@ -8,10 +8,10 @@ import DropboxTypes from 'dropbox';
 
 import {DropboxService} from './dropbox.service';
 import {UtilsService} from './utils.service';
-import {Composition, Fichier, File} from '../utils/model';
+import {Composition, Fichier, File} from '@utils/model';
 import {ToastService} from './toast.service';
-import {Dropbox} from '../utils/dropbox';
-import {XComposition, XFichier, XWrapper, isXF, isXC} from '../utils/xml';
+import {Dropbox} from '@utils/dropbox';
+import {XComposition, XFichier, XWrapper, isXF, isXC} from '@utils/xml';
 import {DexieService} from './dexie.service';
 
 @Injectable({

src/app/services/dexie.service.ts

@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import Dexie from 'dexie';
-import {Composition, Fichier, File} from '../utils/model';
+import {Composition, Fichier, File} from '@utils/model';
 
 @Injectable({
   providedIn: 'root',

src/app/services/dropbox.service.ts

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import DropboxTypes from 'dropbox';
 import {UtilsService} from './utils.service';
-import {Dropbox as DropboxConstant} from '../utils/dropbox';
+import {Dropbox as DropboxConstant} from '@utils/dropbox';
 
 @Injectable({providedIn: 'root'})
 export class DropboxService {

src/app/services/utils.service.ts

@@ -2,7 +2,7 @@ import {Observable} from 'rxjs';
 import {Injectable} from '@angular/core';
 import {HttpHeaders, HttpClient, HttpErrorResponse} from '@angular/common/http';
 import {ToastService} from './toast.service';
-import {GlobalError} from '../utils/model';
+import {GlobalError} from '@utils/model';
 
 @Injectable({providedIn: 'root'})
 export class UtilsService {

src/app/styles/_imports.scss

@@ -0,0 +1,2 @@
+@forward 'utils';
+@forward 'variables';

src/app/styles/_utils.scss

@@ -3,16 +3,3 @@
     @content;
   }
 }
-
-$green: #0ad06f;
-$light-green: #d1fff7;
-$odd: #cee9f0;
-$even: #c8ddf0;
-$blue: #007fff;
-$purple: #673ab7;
-$gray: #484848;
-$decile: #faedde, #f5d0c7, #f0b1b7, #ea9bbb, #e586c9, #de72df, #b45fda, #824dd4,
-  #483bcf, #2a4cca;
-$light-primary-text: #fff;
-$dark-primary-text: rgb(#000, 0.87);
-$font-family: roboto, 'Helvetica Neue', sans-serif;

src/app/styles/_variables.scss

@@ -0,0 +1,12 @@
+$green: #0ad06f;
+$light-green: #d1fff7;
+$odd: #cee9f0;
+$even: #c8ddf0;
+$blue: #007fff;
+$purple: #673ab7;
+$gray: #484848;
+$decile: #faedde, #f5d0c7, #f0b1b7, #ea9bbb, #e586c9, #de72df, #b45fda, #824dd4,
+  #483bcf, #2a4cca;
+$light-primary-text: #fff;
+$dark-primary-text: rgb(#000, 0.87);
+$font-family: roboto, 'Helvetica Neue', sans-serif;

src/app/styles/styles.scss

@@ -1,4 +1,4 @@
-@use 'utils' as *;
+@use 'imports' as *;
 
 * {
   font-family: $font-family !important;

src/app/styles/themes.scss

@@ -1,5 +1,6 @@
 @use '@angular/material' as mat;
-@use './utils' as *;
+@use 'imports' as *;
+
 /* stylelint-disable-next-line */
 @include mat.core();
 

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "./node_modules/gts/tsconfig-google.json",
   "compilerOptions": {
+    "baseUrl": "./",
     "rootDir": ".",
     "outDir": "build",
     "allowSyntheticDefaultImports": true,
@@ -16,7 +17,11 @@
     "lib": ["es2020", "dom"],
     "noImplicitAny": false,
     "strict": false,
-    "useDefineForClassFields": false
+    "useDefineForClassFields": false,
+    "paths": {
+      "@utils/*": ["./src/app/utils/*"],
+      "@services/*": ["./src/app/services/*"]
+    }
   },
   "include": ["src/**/*.ts", "test/**/*.ts"],
   "angularCompilerOptions": {