giải quyết baseUrl và các đường dẫn bằng Webpack 2 và awesome-typescript-loader

Tôi muốn thiết lập dự án của mình sao cho bất cứ nơi nào tôi sử dụng dòng dưới đây:

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

nó được giải quyết để:

./dist/blahblah/core/DịchVụBlahBlah

Tôi đã đọc qua các tài nguyên trực tuyến và áp dụng các cài đặt được hướng dẫn (mà tôi cũng đính kèm bên dưới). Điều này hoạt động trong Visual Studio Code; tức là nó không hiển thị lỗi với tôi, do đó nó có thể đọc chính xác các cài đặt của tôi trong tsconfig và hiểu chúng. Tôi muốn làm điều tương tự với Webpack.

Tuy nhiên, tôi đang nhận được lỗi sau:

LỖI trong ./xxxxxxxxxxx.ts Module không tìm thấy: Lỗi: Không thể giải quyết '@blahblah/core/BlahBlahService' trong 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx'

Tôi có bố trí sau trong ứng dụng web của mình:

• Angular 2 Phiên bản 2.2.0
• Phiên bản Typescript 2.0.8
• Phiên bản Webpack 2.1.0-beta.26
• awesome-typescript-loader Phiên bản 2.2.4

Tôi cũng có những điều sau trong tsconfig của mình:

"compilerOptions": {

    ...

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

    ...

 }

Và tôi có cài đặt sau trong tệp webpack.js của mình:

plugins: [

    ...

    new TsConfigPathsPlugin(),

    ...
],

Câu trả lời #1

Hiện tại tôi đang làm việc với [email  và [email .
Vấn đề giống nhau. Tôi đã tìm thấy giải pháp trong một vấn đề trên GitHub.

tsconfig.js:

"compilerOptions": {

    ...

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

webpack.config.js:

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

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

Câu trả lời #2

Tôi đã gặp vấn đề giống vậy. Nó đáng lẽ phải hoạt động nhưng lại không.

Giải pháp tạm thời của tôi là thêm thuộc tính "browser" vào package.json, với các bí danh giống như trong tsconfig.

package.json

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