时间戳

首页 > 解决方案 > Karma - Jasmine 无法解析 Ionic 应用程序中的打字稿路径

angular - Karma - Jasmine 无法解析 Ionic 应用程序中的打字稿路径

问题描述

我有一个使用多个环境文件的 Ionic 应用程序：

我使用 path 通过以下 webpack.conf.js 解析配置：

const chalk = require('chalk');
const fs = require('fs');
const path = require('path');
const useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

const env = process.env.MY_ENV || 'local';

useDefaultConfig.prod.resolve.alias = {
  "@app/env": path.resolve(environmentPath('prod'))
};

useDefaultConfig.dev.resolve.alias = {
  "@app/env": path.resolve(environmentPath('dev'))
};

if (env !== 'prod' && env !== 'dev') {
  // Default to dev config
  useDefaultConfig[env] = useDefaultConfig.dev;
  useDefaultConfig[env].resolve.alias = {
    "@app/env": path.resolve(environmentPath(env))
  };
}

function environmentPath(env) {
  const filePath = './src/environments/environment' + (env === 'prod' ? '' : '.' + env) + '.ts';
  if (!fs.existsSync(filePath)) {
    console.log(chalk.red('\n' + filePath + ' does not exist!'));
  } else {
    return filePath;
  }
}

module.exports = () => useDefaultConfig;

我有一个加载特定 tsconfig 的业力配置，该配置位于名为 test-config 的同一文件夹中：

karmaTypescriptConfig: {
  tsconfig: "./tsconfig.spec.json"
},

我的 tsconfig ：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2017"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "baseUrl": "./../",
    "paths": {
      "@app/env": [
        "src/environments/environment"
      ]
    }
  },
  "noUnusedLocals": true,
  "noUnusedParameters": true,
  "exclude": [
    "../node_modules",
    "src/**/*.spec.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

当我运行ionic serve并解决了路径并且一切正常时，我得到了相同的 tsconfig。

但是当我运行 karma 来执行测试时，我得到了以下错误：

找不到模块：错误：无法解析“@app/env”

我不知道为什么，但似乎 karma 没有加载我的自定义 tsconfig。

感谢您的帮助。

标签： angulartypescriptionic-frameworkionic3karma-jasmine

解决方案

我最后在我的业力配置中添加了以下几行 - > webpack dedacated config ：

resolve: {
    extensions: ['.ts', '.js'],
    alias: {
      '@app/env': path.resolve(__dirname, '../src/environments/environment.local.ts')
    }
  },

推荐阅读