在Angular CLI中避免相对路径

角度 Webpack

西门

2020-03-24

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

例如,TextInputComponent具有TextInputConfiguration其放在里面类src/components/configurations.ts,以及在src/app/home/addnewuser/add.user.component.ts哪里使用它有:

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

很好,但是随着我的应用程序变得更大和更深../,我该如何处理呢?

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

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

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

第3206篇《在Angular CLI中避免相对路径》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
猴子村村 2020.03.24

此评论,你可以通过添加应用程序源pathstsconfig.json

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

然后你可以从绝对导入app/components/代替相对于当前文件:

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

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

也可以看看

老丝阿飞 2020.03.24

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

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

Stafan路易 2020.03.24

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

如果您使用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目录),编译器可以正确解析模块。

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android