打字稿-在Angular CLI中避免相对路径

我正在使用最新的Angular CLI,并创建了一个自定义组件文件夹,该文件夹包含所有组件。

例如,TextInputComponent具有TextInputConfiguration类,该类放置在system.config.js内部,而在我使用它的src/app/home/addnewuser/add.user.component.ts中有:

import {TextInputConfiguration} from "../../../components/configurations";

很好,但是随着我的应用程序变得越来越大,system.config.js增加,我该如何处理?

以前,对于SystemJS,我将通过以下方式配置通过system.config.js的路径:

System.config({
..
 map : {'ng_custom_widgets':'components' },
 packages : {'ng_custom_widgets':{main:'configurations.ts', defaultExtension: 'ts'},
)};

如何使用Angular CLI为webpack生成相同的内容?

5个解决方案
64 votes

根据此注释,您可以通过paths中的baseUrl添加您的应用程序源:

{
  "compilerOptions": {
    ...,  
    "baseUrl": ".",
    "paths": {
      ...,
      "@app/*": ["app/*"],
      "@components/*": ["components/*"]
    }
  }
}

然后,您可以绝对从baseUrlpaths而不是相对于当前文件导入:

import {TextInputConfiguration} from "@components/configurations";

注意:如果是paths,则必须指定baseUrl

也可以看看

  • [HTTPS://呜呜呜.typescript狼.org/docs/handbook/module-resolution.HTML#path-mapping]
jonrsharpe answered 2020-08-11T22:38:39Z
15 votes

多亏jonrsharpe的回答为我指明了正确的方向。 尽管在添加了3007279631251801801088(如答案中所定义)后,我仍然无法使其工作。 对于以后遇到与我相同的任何问题的人,这是我为解决问题所做的工作。

我有一个共享模块,其服务正在多个组件中使用,所以...

tsconfig.json:

{
    "compilerOptions": {
        ...
        "baseUrl": ".", //had to add this too
        "paths": {
            "@shared/*": ["src/app/modules/shared/*"]
        }
    }
}

在此之后,VS Code能够解决300727963125180101088的问题,但是在编译时我仍然从webpack得到以下错误。

找不到模块:错误:无法解决

为了解决这个问题,我必须添加

  1. index.d.ts中的index.d.ts
  2. index.d.ts in index.d.ts

webpack.config.js:

resolve: {
  extensions: ['*', '.js', '.ts'],
  modules: [
    rootDir,
    path.join(rootDir, 'node_modules')
  ],
  alias: {
    '@shared': 'src/app/modules/shared'
  }
},

component.ts:

import { FooService } from '@shared/services/foo.service'
import { BarService } from '@shared/services/bar.service'
import { BazService } from '@shared/services/baz.service'

为了使其更加整洁,我在services文件夹中添加了index.d.ts并从那里导出了我的所有服务,如下所示:

index.d.ts:

export * from './foo.service';
export * from './bar.service';
export * from './baz.service';

现在在任何组件内部:

import { FooService, BarService, BazService } from '@shared/services';
Syed Ali Taqi answered 2020-08-11T22:40:47Z
14 votes

最重要的是答案是正确的,但是在尝试通过互联网进行搜索并试图理解到底是什么问题并尝试了不同的故障排除选项后,我才知道baseUrl和Path如何一起工作

如果您使用baseUrl:“。 像下面一样,它可以在VScode中工作,但在编译时不工作

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": ".",
    "paths": {
      "@myproject/*": ["src/app/*"]
    }    
}

根据我的理解和我的工作应用程序,并在角度aio代码中进行了检查,我建议将其用作baseUrl:“ src”,如下所示

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "paths": {
      "@myproject/*": ["app/*"],
      "testing/*": ["testing/*"]
    }    
}

通过将基本URL作为源(src目录),编译器可以正确解析模块。

我希望这有助于人们解决此类问题。

Viraj answered 2020-08-11T22:41:25Z
5 votes

不知道为什么,但是当我在VS2017中尝试其他答案时,我能够编译Angular而不会出现错误,但是我仍然在VS中看到错误“找不到模块...”。 当我将baseUrl从"."设置为"src"时,每个人都很高兴。

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "baseUrl": "src",                 // Main source directory same level as tsconfig
    "paths": {
      "app/*": [ "app/*" ],           // src/app
      "ui/*": [ "ui/*" ],             // src/ui       
      "services/*": [ "services/*" ], // src/services
      "assests/*": [ "assests/*" ],     // src/assests
      "models/*": [ "models/*" ]      // src/models
    },
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

然后导入:

import { AppMenuComponent } from 'ui/app-menu/app-menu.component';

注意:如果Visual Studio仍然引发错误,请尝试关闭并重新打开文件或重新启动Visual Studio,以使它识别新路径。

Andy Braham answered 2020-08-11T22:42:09Z
0 votes

在Angular 8中,不需要*。 *将导致错误Cannot find module将此添加到您的tsconfig.json文件

"baseUrl": "./",
"paths": {
      "@test": [ "src/app/test/" ],
      "@somthing": [ "src/app/something/" ],
      "@name": [ "src/app/name/" ]
    },

Martian.titan answered 2020-08-11T22:42:29Z
translate from https://stackoverflow.com:/questions/41460810/avoiding-relative-paths-in-angular-cli