Question

我想设置我的项目，所以我在哪里使用下面这一行：

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

决定：

./ DIST / blahblah /型芯/ BlahBlahService

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

但是我收到以下错误：

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

我的网络应用程序中有以下设置：

Angular 2 Version 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

我目前正在使用webpack@3.10和webpack-dev-server@2.9.7 同样的问题。我找到了解决方案in a github issue。

tsconfig.js：

"compilerOptions": {

    ...

    "baseUrl": ".",
    "paths": {
        "~/*": ["./src"],
    }
}

<强> webpack.config.js：

var TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;

resolve: {
    alias: {
        "~/": "./src"
    },
    plugins: [
        new TsConfigPathsPlugin()
    ]
}

Answer 2

我有同样的问题。它应该有效，但它不是。

我的解决方法是添加＆＃34;浏览器＆＃34;属性为package.json，与tsconfig中的别名相同。

<强>的package.json

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

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

2 个答案: