softarc-consulting / sheriff

Lightweight Modularity for TypeScript Projects
MIT License
183 stars 14 forks source link

Deep import error on Core or imported libs #71

Closed pdsavard closed 5 months ago

pdsavard commented 5 months ago

Hi, my application a Monolith angular with domains. So: src/app/domains src/app/domains/domain1 src/app/domains/domain2 src/app/shell src/app/shell/.... shell stuffs

I installed sherif and add a sheriffConfig with:

import { noDependencies, sameTag, SheriffConfig } from '@softarc/sheriff-core';

export const sheriffConfig: SheriffConfig = {
  excludeRoot: true,
  version: 1,
  tagging: {
    libs: {
      'ui-<ui>/src': ['domain:shared', 'type:ui'],
      'util-<util>/src': ['domain:shared', 'type:util'],
    },
    'src/app': {
      'domains/<domain>': {
        'feature-<feature>': ['domain:<domain>', 'type:feature'],
        'ui-<ui>': ['domain:<domain>', 'type:ui'],
        data: ['domain:<domain>', 'type:data'],
        'util-<ui>': ['domain:<domain>', 'type:util'],
        '+state': ['domain:<domain>', 'type:state'],
      },
    },
  },
  depRules: {
    root: ['*'],

    'domain:*': [sameTag, 'domain:shared'],
    'type:feature': ['type:ui', 'type:data', 'type:util'],
    'type:ui': ['type:data', 'type:util'],
    'type:data': ['type:util'],
    'type:util': noDependencies,
  },
};

I know that I need to add index.ts file in all my folder, but I just do a test and execute ng lint. Then I start receiving lint error on some import that are not in my application.

For example, in the sheriff.config.ts file I got a DeepImport error (Deep Import (internal error): invalid path mapping detected: @app/: app/. ) on: import { noDependencies, sameTag, SheriffConfig } from '@softarc/sheriff-core';

Or in my app.component.ts I got the same error on import { Component, inject } from '@angular/core';

I miss something, any idea? Maybe because I got some custom path in tsconfig? "baseUrl": "src", "paths": { "@src/": ["./"], "@app/": ["app/"], "@domains/": ["app/domains/"], "@environmments/": ["environmments/"], "@fuse/": ["./@fuse/"], "@shared/": ["app/domains/shared/"], "@shell/": ["app/shell/"] }

rainerhahnekamp commented 5 months ago

Hi @pdsavard, would it be possible to paste all import commands of your app.component.ts? Not just the first one?

pdsavard commented 5 months ago

@rainerhahnekamp I have a lot of import because of FontAwesome. I will add the proper index.ts in my domains folders, but I got error on @angular/core or other libs on files outside my domains. Can I exclude the check for all files outside src/app/domains?

Here the import on app.component.ts. The error append on the first on only:

import { Component, inject } from '@angular/core';
import { CommonModule, registerLocaleData } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { AppStore, SplashScreenService } from '@shell/app';
import { DialogModule } from '@progress/kendo-angular-dialog';
import { ConfigStore } from '@shell/config';
import { HelperService } from '@shell/app/utils/helpers.service';

// FONT AWESOME ------------
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
//pro-solid FAS
import { faCommentExclamation as fasCommentExclamation } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faCommentExclamation';
import { faCheck as fasCheck } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faCheck';
import { faHome as fasHome } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faHome';
import { faTh as fasTh } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faTh';
import { faIndustry as fasIndustry } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faIndustry';
import { faSquareArrowLeft as fasSquareArrowLeft } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faSquareArrowLeft';
import { faChevronLeft as fasChevronLeft } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faChevronLeft';
import { faChevronRight as fasChevronRight } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faChevronRight';
import { faChevronUp as fasChevronUp } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faChevronUp';
import { faX as fasX } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faX';
import { faTasks as fasTasks } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faTasks';
import { faUser as fasUser } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faUser';
import { faCartShopping as fasCartShopping } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faCartShopping';
import { faArrowsUpDownLeftRight as fasArrowsUpDownLeftRight } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faArrowsUpDownLeftRight';
import { faChartArea as fasChartArea } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faChartArea';
import { faSitemap as fasSitemap } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faSitemap';
import { faCloudArrowDown as fasCloudArrowDown } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faCloudArrowDown';
import { faChartColumn as fasChartColumn } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faChartColumn';
import { faBuildingColumns as fasBuildingColumns } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faBuildingColumns';
import { faDollarSign as fasDollarSign } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faDollarSign';
import { faListOl as fasListOl } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faListOl';
import { faTruck as fasTruck } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faTruck';
import { faArrowsRotate as fasArrowsRotate } from '../../node_modules/@fortawesome/pro-solid-svg-icons/faArrowsRotate';
//pro-regular FAR
import { faTriangleExclamation as farTriangleExclamation } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faTriangleExclamation';
import { faBars as farBars } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faBars';
import { faExpandArrows as farExpandArrows } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faExpandArrows';
import { faSearch as farSearch } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faSearch';
import { faBookmark as farBookmark } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faBookmark';
import { faEdit as farEdit } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faEdit';
import { faPlusCircle as farPlusCircle } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faPlusCircle';
import { faMinusCircle as farMinusCircle } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faMinusCircle';
import { faCheckCircle as farCheckCircle } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faCheckCircle';
import { faTimesCircle as farTimesCircle } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faTimesCircle';
import { faPencil as farPencil } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faPencil';
import { faBookHeart as farBookHeart } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faBookHeart';
import { faInbox as farInbox } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faInbox';
import { faEnvelopeOpen as farEnvelopeOpen } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faEnvelopeOpen';
import { faBell as farBell } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faBell';
import { faCog as farCog } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faCog';
import { faCogs as farCogs } from '../../node_modules/@fortawesome/pro-regular-svg-icons';
import { faBolt as farBolt } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faBolt';
import { faMoon as farMoon } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faMoon';
import { faSun as farSun } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faSun';
import { faChevronRight as farChevronRight } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faChevronRight';
import { faUserCircle as farUserCircle } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faUserCircle';
import { faSignOut as farSignOut } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faSignOut';
import { faCircleInfo as farCircleInfo } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faCircleInfo';
import { faEye as farEye } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faEye';
import { faEyeSlash as farEyeSlash } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faEyeSlash';
import { faCheck as farCheck } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faCheck';
import { faArrowFromLeft as farArrowFromLeft } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faArrowFromLeft';
import { faChartLine as farChartLine } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faChartLine';
import { faUserLock as farUserLock } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faUserLock';
import { faPuzzlePiece as farPuzzlePiece } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faPuzzlePiece';
import { faRetweet as farRetweet } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faRetweet';
import { faPaperPlane as farPaperPlane } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faPaperPlane';
import { faGrid2Plus as farGrid2Plus } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faGrid2Plus';
import { faCirclePause as farCirclePause } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faCirclePause';
import { faPause as farPause } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faPause';
import { faFaceSleeping as farFaceSleeping } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faFaceSleeping';
import { faPenCircle as farPenCircle } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faPenCircle';
import { faFloppyDiskCircleArrowRight as farFloppyDiskCircleArrowRight } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faFloppyDiskCircleArrowRight';
import { faXmark as farXmark } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faXmark';
import { faLock as farLock } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faLock';
import { faCircleArrowRight as farCircleArrowRight } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faCircleArrowRight';
import { faCircleArrowLeft as farCircleArrowLeft } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faCircleArrowLeft';
import { faKey as farKey } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faKey';
import { faBarcode as farBarcode } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faBarcode';
import { faSquareCheck as farSquareCheck } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faSquareCheck';
import { faListTree as farListTree } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faListTree';
import { faEllipsisVertical as farEllipsisVertical } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faEllipsisVertical';
import { faArrowRotateLeft as farArrowRotateLeft } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faArrowRotateLeft';
import { faFaceFrown as farFaceFrown } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faFaceFrown';
import { faEllipsis as farEllipsis } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faEllipsis';
import { faArrowRightArrowLeft as farArrowRightArrowLeft } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faArrowRightArrowLeft';
import { faCreditCard as farCreditCard } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faCreditCard';
import { faScaleBalanced as farScaleBalanced } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faScaleBalanced';
import { faMoneyBill1 as farMoneyBill1 } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faMoneyBill1';
import { faChartLineUp as farChartLineUp } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faChartLineUp';
import { faBug as farBug } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faBug';
import { faCircleExclamation as farCircleExclamation } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faCircleExclamation';
import { faArrowsRotate as farArrowsRotate } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faArrowsRotate';
import { faCircleXmark as farCircleXmark } from '../../node_modules/@fortawesome/pro-regular-svg-icons/faCircleXmark';
//pro-light FAL
import { faBars as falBars } from '../../node_modules/@fortawesome/pro-light-svg-icons/faBars';
import { faEllipsisHAlt as falEllipsisHAlt } from '../../node_modules/@fortawesome/pro-light-svg-icons/faEllipsisHAlt';
import { faPercent as falPercent } from '../../node_modules/@fortawesome/pro-light-svg-icons/faPercent';
//pro-dustone FAD
import { faSyncAlt as fadSyncAlt } from '../../node_modules/@fortawesome/pro-duotone-svg-icons/faSyncAlt';
import { faCodeMerge as fadCodeMerge } from '../../node_modules/@fortawesome/pro-duotone-svg-icons/faCodeMerge';
// Brand  FAB
import { faAngular as fabAngular } from '../../node_modules/@fortawesome/free-brands-svg-icons/faAngular';
import { faProductHunt as fabProductHunt } from '../../node_modules/@fortawesome/free-brands-svg-icons/faProductHunt';
import { NotificationStore } from '@shell/notification';
// FONT AWESOME ------------
import localeFrCa from '@angular/common/locales/fr-CA';
import localeFrCaExtra from '@angular/common/locales/extra/fr-CA';
import { BroadcastService } from './domains/shared/services/broadcast';
rainerhahnekamp commented 5 months ago

Thanks @pdsavard, I think I have now everything I require. Looks like a bug.

pdsavard commented 5 months ago

@rainerhahnekamp ok! Feel free if you need direct access to my computer. I can shared it if that help. Thanks

rainerhahnekamp commented 5 months ago

Thanks, but it is not necessary. I guess it is related to paths. We heavily rely on TypeScript's API for the parsing part and detecting the imports. Unfortunately, paths is something that TypeScript does not support; it "outsources" that work to bundlers (webpack, vite, etc.).

So Sheriff has to do that manually and there's some potential for bugs like this one.

pdsavard commented 5 months ago

Ok I see! I will check for the next update. But I think that do not stop me to implement it. I will just ignore these errors or add eslint ignore comment for now.

pdsavard commented 5 months ago

OK, not it do not work. I will remove Sheriff for now and add it later when the correctif will be posted.

rainerhahnekamp commented 5 months ago

Fixed in version 0.14.5. Please confirm once you have the time try it out. Thanks

pdsavard commented 5 months ago

@rainerhahnekamp not sure. But I am in lurning curve with Sheriff. I use a simple rule that not supposed to block anything.

export const sheriffConfig: SheriffConfig = {
  excludeRoot: true,
  version: 1,
  tagging: {
    'src/app/domain/shared': 'shared',
  },
  depRules: {
    '*': anyTag,
  },
};

and I got some error like import { anyTag, SheriffConfig } from '@softarc/sheriff-core'; in my sheriff.config.ts or a lot of:

C:\Data_Dev\Angular\KelvinV3-2\src\app\domains\auth+state\auth.state.ts 1:1 error Deep Import (internal error): invalid path mapping detected: @environmments/: environmments/. Please verify that the path exists @softarc/sheriff/deep-import 1:1 error Dependency Rule (internal error): invalid path mapping detected: @environmments/: environmments/. Please verify that the path exists @softarc/sheriff/dependency-rule

C:\Data_Dev\Angular\KelvinV3-2\src\app\domains\auth+state\auth.store.ts 1:1 error Deep Import (internal error): invalid path mapping detected: @environmments/: environmments/. Please verify that the path exists @softarc/sheriff/deep-import 1:1 error Dependency Rule (internal error): invalid path mapping detected: @environmments/: environmments/. Please verify that the path exists

I will continu to test.

rainerhahnekamp commented 5 months ago

yes, but that means that ./src/environments does not exist. Can you check if that folder is really there?

rainerhahnekamp commented 5 months ago

And please double-check if you are on version 0.14.5

pdsavard commented 5 months ago

Hooo my bad, a typo error in the path in my tsconfig.json. Now everything work. I got some warning on " Use the module's index.ts or path". With basic sherrif config without any dependency, only index.ts error will pop, i think?

pdsavard commented 5 months ago

Just to be shure in domains folder, do you create a index.ts in the root of each domain or in subfolder ? domains

auth

index.ts data ui feature ...

rainerhahnekamp commented 5 months ago
pdsavard commented 5 months ago

Thanks for your help!

rainerhahnekamp commented 5 months ago

Pierre, I am going to close this issue. If new questions come up, please let me know and open a new issue.