如何为部署设置角度类参考路径？

Posted 2023-03-13

【中文标题】如何为部署设置角度类参考路径？

【英文标题】：How to set angular class reference path fro deployment?

【发布时间】：2020-12-29 19:22:06

【问题描述】：

我正在使用不同的路径在我的组件中引用一个文件。

import  environment  from 'src/environments/environment';

或

import  environment  from '../../../../environments/environment';

它们都可以工作，但第一种方法更容易使用。

但是第一条路径在生产中可能有任何问题吗？ for example src/file not found.

【问题讨论】：

否，因为在创建（生产）构建时已解决。但是，模板或样式中引用的资产（例如图像）可能会有所不同。

【参考方案1】：

ABSOLUTE VS。 RELATIVE 路径/链接

在typescript 中导入modules 时，它们通常分为两部分：

导入库模块，这非常好，因为我们只使用名称，它们是从 node_modules 文件夹中解析的 从我们自己的应用程序中导入模块

从我们自己的应用程序导入模块时，有两种寻址方式

Relative Paths 例如：import environment from '../../../../environments/environment'; Absolute Paths 例如： import environment from 'src/environments/environment';

有很多使用relative paths 的示例，但是当我们需要的文件向上或向下几个级别时，它很快就会出错。然后我们得到类似的东西：

import  foo  from ‘../../../../bar’;

由于TypeScript 2.0，我们有一个很棒的编译器设置，称为baseUrl，我们可以在tsconfig.json 文件中配置它：

  "compilerOptions": 
    "baseUrl": "./src"
  

通过这种方式，你可以像这样使用绝对路径：

import  foo  from ‘app/bar’

有关absolute 路径的更多信息，请查看此快速指南：Use absolute paths for module imports

另外，这里也有类似的讨论：

Avoiding relative paths in Angular CLI

& 检查这两个问题的答案：

https://***.com/a/41460972/4185370

https://***.com/a/43319965/4185370

因此，作为结论，第一个absolute 路径更好，但通过tsconfig.json 进行正确配置。