Блог

Я работаю с Angular 11 и пытаюсь использовать короткий импорт, например import {smthg} from '@common' , вместо import {smthg} from '../../../common'

Но я всегда получаю ошибки в IDEA: TS2307: Cannot find module '@common' or its corresponding type declarations.

И та же ошибка в консоли при попытке скомпилировать файлы .ts ( ng serve )

Интересно, что когда я добавляю /index в импорт, IDEA перестает ругаться, но ошибка не исчезает в консоли

 myAngularProject
│   package.json
│   tsconfig.json
│   tsconfig.app.json
│   angular.json    
│
└───src
    │   main.ts
    │   index.html
    │
    └───app
        │  
        └───common
        │
        └───features
 

tsconfig.json:

 /* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@common/*": ["app/common/*"],
      "@features/*": ["app/features/*"],
      "@platform/*": ["app/platform/*"],
      "@env": ["environments/environment"]
    },
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

 

tsconfig.app.json:

 {
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["node"]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}
 

Ошибка IDEA:

ошибка tsc консоли:

Версии:

 Angular CLI: 11.0.7
Node: 14.2.0
OS: darwin x64

Angular: 11.0.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.7
@angular-devkit/build-angular   0.1100.7
@angular-devkit/core            11.0.7
@angular-devkit/schematics      11.0.7
@angular/cli                    11.0.7
@schematics/angular             11.0.7
@schematics/update              0.1100.7
rxjs                            6.6.3
typescript                      4.0.5
 

Итак, оказалось, что движок angular позволяет создавать псевдонимы для путей на основе того, что указано в «путях» в tsconfig.

Но для того, чтобы иметь доступ как к вложенным папкам модуля, так и к тому, что экспортируется из index.ts на верхнем уровне модуля, вам необходимо указать «пути» следующим образом:

 {
  ...
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@common/*": ["app/common/*"],
      "@common": ["app/common/index.ts"]
    }
  ...
  }
}
 

У меня была такая же проблема. Я пытался перенести проект, созданный с помощью Angular 10, на Angular 11, копируя ./src/app папку, но это не сработало…

Но в новом проекте я получил псевдоним пути, работающий таким образом:

• Обновите свой интерфейс командной строки angular:

 PS C:Projects> npm uninstall --g @angular/cli
PS C:Projects> npm i --g @angular/cli
 

• Создайте новый проект, установив строгий режим на true :

 PS C:Projects> ng new <<name-project>>
PS C:Projects> cd <<name-project>>
 

• Когда CLI завершится, отредактируйте tsconfig.app.json следующим образом:

 /* To learn more about this file see: https://angular.io/config/tsconfig. */
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "./out-tsc/app",
        "types": [],

        // ADD THIS ↓↓↓
        "baseUrl": "./",
        "paths": {
            "@tool/*": [ "src/app/tool/*" ],
            "@models/*": [ "src/app/models/*" ],
            "@services/*": [ "src/app/services/*" ],
            "@components/*": [ "src/app/components/*" ],
            "@interfaces/*": [ "src/app/interfaces/*" ]
        }
        // ADD THIS ↑↑↑
    },
    "files": [
        "src/main.ts",
        "src/polyfills.ts"
    ],
    "include": [
        "src/**/*.d.ts"
    ]
}
 

• …и tsconfig.json следующим образом:

 /* To learn more about this file see: https://angular.io/config/tsconfig. */
{
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "./dist/out-tsc",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2015",
        "module": "es2020",
        "lib": [
            "es2018",
            "dom"
        ],

        // ADD THIS ↓↓↓
        "baseUrl": "./",
        "paths": {
            "@tool/*": [ "src/app/tool/*" ],
            "@models/*": [ "src/app/models/*" ],
            "@services/*": [ "src/app/services/*" ],
            "@components/*": [ "src/app/components/*" ],
            "@interfaces/*": [ "src/app/interfaces/*" ]
        }
        // ADD THIS ↑↑↑
    },
    "angularCompilerOptions": {
        "enableI18nLegacyMessageIdFormat": false,
        "strictInjectionParameters": true,
        "strictInputAccessModifiers": true,
        "strictTemplates": true
    }
}
 

• …и, наконец, отредактируйте tsconfig.spec.json следующим образом:

 /* To learn more about this file see: https://angular.io/config/tsconfig. */
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "./out-tsc/spec",
        "types": [
            "jasmine"
        ],
        "baseUrl": "./",
        "paths": {
            "@tool/*": [ "src/app/tool/*" ],
            "@models/*": [ "src/app/models/*" ],
            "@services/*": [ "src/app/services/*" ],
            "@components/*": [ "src/app/components/*" ],
            "@interfaces/*": [ "src/app/interfaces/*" ]
        }
    },
    "files": [
        "src/test.ts",
        "src/polyfills.ts"
    ],
    "include": [
        "src/**/*.spec.ts",
        "src/**/*.d.ts"
    ]
}
 

Прежде всего, вам нужно перезапустить редактор кода, чтобы убедиться, что это не проблема с вашим линтером.

У меня была похожая проблема, и в моем случае конфигурации были правильными, хотя в то время я этого не знал из-за отсутствия опыта, поэтому я продолжал пробовать разные решения, которые мог найти. Оказалось, что проблема заключалась в том, что компоновщик не мог видеть изменения конфигурации (добавленные определения путей) до перезапуска IDE.

Псевдонимы путей больше не поддерживаются в более новых версиях

Но вы можете сделать это сейчас, чтобы напрямую импортировать файлы относительно src каталога

перейдите к своему tsconfig.json файлу add baseUrl , чтобы быть "."

 "compilerOptions": {
    "baseUrl":".",
    ...
 

И теперь вы можете напрямую импортировать данные относительно src каталога

 import Myfile from "src/myfile.js"
 

Это сработало для меня!

Это сработало для меня в Angular 13, не пропустите точку (.) в каждом значении пути.

 "baseUrl": "./",
"paths": {
      "@app/*": [
        "./src/app/*"
      ],
      "@env/*": [
        "./src/environments/*"
      ]
    }