避免工作区中 Angular 项目的相对路径

Question

首先，我应该说我已经使用以下命令创建了我的 Angular 工作区：

ng new angular-apps --create-application=false

tsconfig.json 在工作空间的根目录中：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

然后使用以下命令在此工作区中创建一个项目：

ng generate application cac-web

这是 cac-web 应用根目录中的 tsconfig.app.json：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/app",
    "types": [],
    "moduleResolution":"classic",
    "baseUrl": "src",
    "paths": {
      "@app/*": [
        "app/*"
      ],
      "@app/core/*": [
        "app/core/*"
      ],
      "@app/shared/*": [
        "app/shared/*"
      ],
      "@env/*": [
        "environments/*"
      ]
    }
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

在 cac-web 应用程序中，我创建了共享模块，然后（模型文件夹/student.model.ts） 当我想在另一个模块中使用此模型时，出现以下错误？

找不到模块“@app/shared/models/student.model”

编辑：

这是我的项目的结构：

|node_modules
|projects--------------cac-web|e2e-----------------|src
|                             |                    |protractor.conf.js
|                             |                    |tsconfig.json
|                             |src-----------------|app-----------------|client(Module)-----------------|client-list(component)
|                             |                    |                    |shared(Module)-----------------|models(student.model.ts)
|                             |                    |                    |                               |shared.module.ts
|                             |                    |                    |app-routing.module.ts
|                             |                    |                    |app.component.html
|                             |                    |                    |app.component.ts
|                             |                    |                    |app.module.ts
|                             |                    |assets
|                             |                    |environments
|                             |                    |index.html
|                             |                    |main.ts
|                             |                    |polyfills.ts
|                             |                    |styles.css
|                             |                    |test.ts
|                             |browserslist
|                             |karma.conf.js
|                             |tsconfig.app.json
|                             |tsconfig.spec.json
|                             |tslint.json
|.editorconfig
|.gitignore
|angular.json
|package-lock.json
|package.json
|README.md
|tsconfig.json
|tslint.json

Answer 1

不要更改tsconfig.app.json 文件。

每个新项目都以这种方式修改您的主要tsconfig.json：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@app/*": [
        "projects/cac-web/src/app/*"
      ],
      "@app/core/*": [
        "projects/cac-web/src/app/core/*"
      ],
      "@app/shared/*": [
        "projects/cac-web/src/app/shared/*"
      ],
      "@env/*": [
        "projects/cac-web/src/environments/*"
      ]
    }
  }
}

Answer 2

我建议你像这样改变你的 tsconfig.json

注意：tsconfig.json 必须与 src 文件夹同级

"baseUrl": "./",
"moduleResolution": "node",
"paths": {
      "@app/*": [
        "src/app/*"
      ],
      "@app/core/*": [
        "src/app/core/*"
      ],
      "@app/shared/*": [
        "src/app/shared/*"
      ],
      "@env/*": [
        "src/environments/*"
      ]
    }

更改 tsconfig.json 后，还要重新启动 Angular cli 服务器

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

Answer 3

此功能目前正在用于我在生产中运行的一个应用程序。

这是我的tsconfig.json 的样子：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "./src",
    "paths": {
      "@app/*": ["app/*"],
      "@guards/*": ["app/guards/*"],
      "@interceptors/*": ["app/interceptors/*"],
      "@modules/*": ["app/modules/*"],
      "@utilities/*": ["app/utilities/*"]
    },
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "dom",
      "es2016",
      "es2017.object"
    ]
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  }
}

这是我的tsconfig.app.json 的样子：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "paths": {
      "@app/*": ["app/*"],
      "@guards/*": ["app/guards/*"],
      "@interceptors/*": ["app/interceptors/*"],
      "@modules/*": ["app/modules/*"],
      "@utilities/*": ["app/utilities/*"]
    },
    "module": "es2015",
    "types": [],
    "target": "es5",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es2016",
      "es2017.object"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}