webpack 避免Angular CLI中的相对路径

chhqkbe1  于 2022-12-13  发布在  Webpack
关注(0)|答案(8)|浏览(130)

我使用的是最新的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生成相同的内容?

ymdaylpp

ymdaylpp1#

根据此注解,您可以通过tsconfig.jsontsconfig.json中添加应用程序源代码:

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

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

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

注意:如果paths为,则必须指定baseUrl
另请参阅

  • https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
5kgi1eie

5kgi1eie2#

感谢**jonrsharpe's answer**为我指明了正确的方向。尽管如此,在添加了paths(如答案中所定义)之后,我仍然无法使其工作。对于将来遇到与我相同问题的其他人,以下是我为解决这些问题所做的工作。
我有一个 * 共享模块 *,它的服务正在多个组件中使用,所以...

服务器配置.json:

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

在此之后,VS代码 * 能够解析import,但我在编译时仍然收到来自webpack的以下错误。
找不到模块:错误:无法解析
为了解决这个问题,我必须添加
1.x1立方米英寸x1立方米
1.一米五英寸一米六英寸
*

网络包配置.js:

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

组件.ts:

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

为了使它更简洁,我添加了一个index.d.ts inside services 文件夹,并从该文件夹中导出所有服务,如下所示:

索引.d.ts:

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

现在在任何组件中:

import { FooService, BarService, BazService } from '@shared/services';
l7mqbcuq

l7mqbcuq3#

最重要的是回答正确,但在努力通过互联网搜索n试图了解到底是什么问题,并尝试不同的故障排除选项,我来了解baseUrlPath如何一起工作
如果像下面这样使用baseUrl:“.",它在VScode中工作,但在编译时不工作

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

根据我的理解和我的工作应用程序,并检查了 angular aio 代码,我建议使用baseUrl:“src”,如下所示

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

通过将基本url作为源(src目录),编译器可以正确地解析模块。
我希望这有助于人们解决这类问题。

yvfmudvl

yvfmudvl4#

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

配置文件. 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以使其识别新路径。

pobjuy32

pobjuy325#

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

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

c3frrgcw6#

保持简单
让我们保持简单,只介绍一些您需要知道的事情,以便能够将此解决方案应用到任何未来的项目中。
前言:Angular没有设置“通常的”@/~/path mappings,可能是因为它选择在这个问题上不那么固执己见。
但是,它会为所有导入设置baseUrl./(表示tsconfig.json所在的文件夹)。
这意味着任何非相对导入(那些不以./../开头的导入)都会自动以baseUrl作为前缀。
因此,只要您在导入时使用的路径是从这个基URL开始的,您就应该已经有了解决方案!只要您的重构工具能够识别基URL,并且能够正确地应用导入路径重构,您就不会遇到重构问题。
因此,默认情况下,使用未修改的TS配置,您可以使用这种导入,而不必担心相对路径成为管理上的难题:

// sample import taking into consideration that there is
// a baseUrl set up for all imports which get prefixed to
// all imports automatically:

import { ComingSoonComponentModule } from 'src/app/components/coming-soon/coming-soon.module';

另一个解决方案

但是如果你真的想使用像@/这样的前缀,你可以用一个简单的path mapping来实现,如下所示:

// tsconfig.json

{
  // ...
  "compilerOptions": {
    "baseUrl": "./",
    // notice that the mapping below is relative to the baseUrl: `src/app/*` is in fact `{baseUrl}src/app/*`, ie. `./src/app/*`.
    "paths": { "@/*": ["src/app/*"] },
    // ...
  },
  // ...
}

然后,您可以导入为以下任一项:

import { ComingSoonComponentModule } from 'src/app/components/coming-soon/coming-soon.module';
import { ComingSoonComponentModule } from '@/components/coming-soon/coming-soon.module';

要记住的事项:

  1. paths tsconfig选项相对于baseUrl选项(因此请记住,对paths键使用相对路径)。
  2. *-星星是指定的模块路径(根据您在代码中的指定,在那里导入),其他所有内容都是要添加到最终路径的前缀或后缀,根据您在tsconfig中的指定。
3yhwsihp

3yhwsihp7#

我一直在使用Stackblitz,上面的解决方案都没有起作用,甚至包括Paul提到的“src/app/...”。我相信这是因为在tsconfig.json中指定的路径在Stackblitz上不受支持:https://github.com/stackblitz/core/issues/220
我找到的唯一解决方案是使用“../”,它可以有效地从文件返回一个文件夹。它们可以多次使用来返回多个文件夹。
例如,假设我正在使用的组件位于“src/app/components/mycomponent”中,我要包含的文件位于“src/app/shared/myservice”中。简单地包含“src/app/shared/myservice/service”在Stackblitz上不起作用。因此我必须改用“../../shared/myservice/service”。第一个“../”指向“src/app/components”第二个将目录解析为“src/app,”您可以从该目录访问共享文件夹。

vof42yt1

vof42yt18#

对于这个问题我有一个简单得多的解决方案。在你的“tsconfig.json”中,简单地将baseURL设置为一个空字符串:

"baseUrl": ""

现在您可以从根目录引用从一个文件到另一个文件的路径,如下所示:

import { ProductService } from 'src/app/services/product.service';

这些都是绝对路径,但Angular 使用它们的方式看起来是相对的。但它们是有效的!我不是上面提到的“路径”快捷方式的粉丝,因为我喜欢知道所有东西的物理位置,这就是绝对路径被发明的方式和原因。
请记住,这修复了导入时引用模块和组件或构建Angular项目时的路径问题,但这并没有修复与模板、样式路径或资源(如图像)相关的路径问题,这些资源在构建和编译项目时在Angular中使用完全不同的路径系统。
如果这有助于解释这个愚蠢的路径系统,那么项目根目录中的“angular.json”工作区文件控制着“sourceRoot”文件夹,默认设置为“src”。2所以这是Angular构建块使用的“源根”文件夹的开始。3记住Angular的“工作区根”是“src”上面的项目文件夹,是项目和编译器的真正根。所以当你写“src/app/...”的时候,根目录实际上是在“src”的上面。angular.json显然是从它的当前位置得到它的起始文件夹,所以“src/app/”实际上是一个基于angular.json位置的相对本地文件夹。这就是为什么“/src/app”不能作为它相对于angular.json的baseURL工作的原因,我相信。
默认情况下,Angular的“src”文件夹是您构建/编译项目时所有构建路径解析到的文件夹。我怀疑webpack在解析时也会在angular.json中查看相同的“sourceRoot”“src”值。
经过一番努力,我发现通过将tsconfig中的baseURL设置为“”而不是“.”或“./”,你现在可以使用这些完整的路径,只要你从“src”文件夹开始。这些类型的绝对路径对我来说更有意义,因为现在你可以直观地知道从顶部根目录向下的所有内容,而不是向上和向下的文件树。这简直是疯了!
我不知道为什么有Angular 的孩子们使用那些愚蠢的相对路径系统。这些“。/”路径完全没用,使导航变得困难得多,在编译器路径解析系统和HTML/URL路径解析系统中。我认为如果他们花时间了解开发人员为什么以及何时使用相对路径,他们可能会意识到在各种环境中假设每个文件引用其本地文件夹中的每个其他文件。

相关问题