求助：Angular StackBlitz应用无法识别tsconfig内的路径别名

问题原因 #

StackBlitz环境下，Angular CLI实际使用src/tsconfig.app.json而非根目录的tsconfig.json作为构建核心配置文件。仅在根目录tsconfig.json中配置paths别名时，Angular构建流程无法识别这些别名规则，会导致模块解析失败，最终让应用陷入无限加载状态。

解决方案 #

步骤1：同步paths配置到tsconfig.app.json #

打开src/tsconfig.app.json，在compilerOptions节点下添加与根目录tsconfig.json一致的paths配置，同时确保baseUrl设置正确：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [],
    "baseUrl": ".",
    "paths": {
      "@components/*": ["app/components/*"],
      "@pages/*": ["app/pages/*"]
    }
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

步骤2：统一根目录tsconfig.json的路径配置（可选） #

将根目录tsconfig.json中的baseUrl从"./src/"改为"./"，保持全局路径配置的一致性：

"compilerOptions": {
  "baseUrl": "./",
  // 其他原有配置不变
  "paths": {
    "@components/*": ["src/app/components/*"],
    "@pages/*": ["src/app/pages/*"]
  }
}

步骤3：重启StackBlitz项目 #

修改配置后，点击StackBlitz右上角的重启按钮，让新的配置规则生效。

验证 #

配置完成后，在组件中使用别名导入模块（如import { HeaderComponent } from '@components/header/header.component'），应用即可正常加载并运行。

内容的提问来源于stack exchange，提问作者Scottish Smile