使用Webpack 2和awesome-typescript-loader解决baseUrl和路径问题

Question

我想设置我的项目,所以我在哪里使用下面的行:

import { BlahBlahService } from '@blahblah/core/BlahBlahService';

它解决了:

./dist/blahblah/core/BlahBlahService

我已经阅读了在线资源并应用了指示的设置(我也在下面包含).这适用于Visual Studio Code; 即它没有向我显示错误因此它能够在tsconfig上正确读取我的设置并理解它.我想让同样的事情发生在Webpack上.

但是我收到以下错误:

./xxxxxxxxxxx.ts中的错误找不到模块:错误:无法解析'xxxxxxxxxxxxxxxxxxxxxxxxxxxx'中的'@ blahblah/core/BlahBlahService'

我的Web应用程序中有以下设置:

• Angular 2版本2.2.0
• 打字稿版本2.0.8
• Webpack版本2.1.0-beta.26
• awesome-typescript-loader版本2.2.4

我的tsconfig中也有以下内容:

"compilerOptions": {

    ...

    "baseUrl": ".",
    "paths": {
       "@blahblah/core": ["./dist/blahblah/core"],
       "@blahblah/core/*": ["./dist/blahblah/core/*"],
    }

    ...

 }

我在webpack.js文件中有以下设置:

plugins: [

    ...

    new TsConfigPathsPlugin(),

    ...
],

Answer 1

我有同样的问题。它应该有效，但事实并非如此。

我的解决方法是向 package.json 添加“浏览器”属性，并使用与 tsconfig 中相同的别名。

包.json

{
   "name": "app",
   ...
   "browser": {
      "@blahblah/core": ["./dist/blahblah/core"],
      "@blahblah/core/*": ["./dist/blahblah/core/*"]
   },
   "scripts": { ... },
   ...
}