Angular版NativeScript项目浏览器端单元测试因.tns文件失败

我之前也踩过一模一样的坑！NativeScript的文件后缀替换逻辑在Angular测试环境里总是捣乱，你说的exclude配置不生效，大概率是Angular CLI的测试构建逻辑没正确读取你的排除规则，或者模块解析时优先选中了.tns版本。下面给你几个亲测有效的解决办法：

1. 确保tsconfig.spec.json正确配置并被使用 #

首先先确认你的angular.json里的测试配置指定了正确的tsconfig文件，别让测试用了主配置：

"projects": {
  "your-project-name": {
    "architect": {
      "test": {
        "options": {
          "tsConfig": "src/tsconfig.spec.json"
          // 其他原有配置...
        }
      }
    }
  }
}

然后修改tsconfig.spec.json，覆盖主配置的include/exclude规则，同时通过paths强制优先解析非.tns文件：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jasmine"],
    // 关键：让@src/app/*的导入优先匹配不带.tns的文件
    "paths": {
      "@src/*": ["src/*"],
      "@src/app/*": ["src/app/*.ts"]
    }
  },
  "files": ["src/test.ts", "src/polyfills.ts"],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts",
    "src/**/*.ts"
  ],
  "exclude": [
    "src/**/*.tns.ts",
    "src/**/*.android.ts",
    "src/**/*.ios.ts"
  ]
}

这里的paths配置会告诉TypeScript解析器，当你导入@src/app/app.component时，只去匹配app.component.ts，完全忽略.tns.ts后缀的文件。

2. 自定义Webpack测试配置（终极方案） #

如果上面的配置还是不生效，那就直接修改Webpack的解析规则，让.ts后缀的文件优先级高于.tns.ts：

1. 在项目根目录创建webpack.test.config.js：

module.exports = {
  resolve: {
    // 调整后缀顺序，让.ts排在.tns.ts前面
    extensions: ['.ts', '.js', '.tns.ts', '.android.ts', '.ios.ts'],
    // 可选：如果有个别文件还是出问题，可以单独加别名兜底
    alias: {
      '@src/app/app.component.tns.ts': '@src/app/app.component.ts'
    }
  }
};

2. 在angular.json的测试配置里引入这个自定义Webpack配置：

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.test.config.js"
    },
    // 其他原有配置...
  }
}

3. 临时应急方案（不推荐但有效） #

如果赶时间上线，你可以在测试文件的导入语句里明确指定.ts后缀，强制加载非.tns版本：

import { AppComponent } from "@src/app/app.component.ts";

不过这种方法不够优雅，文件多了会很麻烦，还是优先用前面两种配置方案。

最后提醒一下，修改配置后记得重启ng test，有时候缓存会导致配置不生效，可以加--no-cache参数强制清理缓存：

ng test --no-cache

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