Question

我正在一个项目中，该项目包括多个基于Angular 8的前端。每个前端都是一个单独的Angular 8项目，具有自己的文件夹子结构。它们的根文件夹都位于同一主文件夹中。

theproject
    |___ frontend1
    |___ frontend2
    ...

为了避免重复代码并优化代码重构，我们决定将重复代码放入“基本”文件夹中，并通过tsconfig.json中设置的paths选项将其导入。

theproject
    |___ frontend1/
    |___ frontend2/
    ...
    |___ base-ui/

我们从一个简单的类开始，该类表示在整个前端环境中使用的常量集合。此类位于文件constants.ts中的文件base-ui/constants

中

theproject
    |___ frontend1/
    |___ frontend2/
    ...
    |___ base-ui/constants/constants.ts

这是我们的tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "types": [
      "hammerjs",
      "jasmine"
    ],
    "paths": {
      "@shared/*": [
        "../base-ui/*"
      ]
    }
  }
}

这是constants.ts

的非常简单的内容

export class BaseServerConstants {
    public static readonly LOGOUT_URL = 'server/logout';
    public static readonly LOGIN_URL = 'server/login';
}

这是我们导入/使用它的方式

import { BaseServerConstants } from '@shared/constants/constants';

...

performLogout(): void {
    window.location.href = BaseServerConstants.LOGOUT_URL;
}

只要我们仅使用ng build或ng build --prod编写代码或构建项目，就可以像魅力一样发挥作用。

但是在IntelliJ或VS Code的控制台内使用ng serve总是会导致相同的错误消息，内容为：

ERROR in /Users/developer/theproject/base-ui/constants/constants.ts
Module not found: Error: Can't resolve 'tslib' in '/Users/developer/theproject/base-ui/constants'

为什么会这样？为什么我能够使用此路径选项，以便从位于baseUrl之外的简单TS文件中导入非常基本的类，并在编码时应用它们。在构建最终应用程序时，它们也不会导致编译器错误！之后，这些应用程序将按预期工作。

但是，当这些代码应该在NodeJS内部本地运行时，它将无法编译？

我还必须设置其他选项吗？

非常感谢您的帮助或提示！

Answer 1

好吧，我自己找到了解决方法。

必须将一个桶（index.ts）放在外部文件夹中，然后导出感兴趣的文件。因此，就我而言，这样做可以解决上述问题：

theproject
    |___ frontend1/
    |___ frontend2/
    ...
    |___ base-ui/constants/constants.ts
    |___ base-ui/index.ts

index.ts

的内容

export * from './constants/constants';

不幸的是，此功能适用于Angular 8.1.3。使用Angular 8.2.7的较新项目遇到与以前相同的错误...

Angular CLI8。在tsconfig.json中使用“路径”时，“ ng serve”失败

1 个答案: