自定义的webpack配置别名在ionic 2中无法正常工作

Question

我在我的自定义配置中使用环境别名，如下所示：

package.json

 "config": {
    "ionic_bundler": "webpack",
    "ionic_webpack": "./config/webpack-extension.config.js"
  }

webpack-extension.config.js

/*
inspired by:
    https://github.com/driftyco/ionic-app-scripts/pull/683#issuecomment-287401855
*/

let path = require('path')
let useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js')

module.exports = function () {

useDefaultConfig.resolve.alias = {
    "@app/env": path.resolve(__dirname, '../src/environments/env.' + process.env.IONIC_ENV + '.ts'),
};

return useDefaultConfig;
}

environment.ts

import {

isDEV,
API_HOST,
...etc

} from '@app/env'

但是我遇到了错误：

Typescript Error
Cannot find module '@app/env'.

- Luckylooke

Answer 1

在经过艰苦的搜索后，我找到了这个解决方法（让 TypeScript 加载器知道别名）：

tsconfig.json

  "compilerOptions": {
...
    "baseUrl":  "./src",
    "paths": {
      "@app/config": ["config/config"]
    }
  }
...

信用: https://github.com/ionic-team/ionic-app-scripts/pull/683#issuecomment-294078919

我的 Ionic 信息：

cli packages: (/Users/.../node_modules)

@ionic/cli-plugin-cordova       : 1.6.2
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

全局包:

Cordova CLI : 7.0.1 

本地软件包：

@ionic/app-scripts : 2.1.3
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.6.0

系统：

Node       : v6.9.5
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.1 
ios-sim    : 5.0.13 
npm        : 5.3.0 

- Luckylooke