無法解決在打字稿/webpack 中找不到模塊“rxjs”

Question

我在將rxjs加載到簡單的 webpack 設置中時遇到了問題（沒有 angular）。 我正在運行：

./node_modules/.bin/webpack --config webpack.config.js --watch

啟動 webpack。 應用程序的唯一文件src/app.ts以以下內容開頭：

import { Observable } from 'rxjs';

並且此行在 VSCode 和 webpack 控制台中突出顯示，並顯示以下錯誤：

Cannot find module 'rxjs'.

但整體輸出工作正常。 只是這個控制台錯誤。

tsconfig.json ：

{
    "compilerOptions": {
         "target": "es2015"
    },
    "files": [
        "src/app.ts"
    ]
}

webpack.config.js :

module.exports = {
    entry: "./src/app.ts",
    output: {
        filename: "dist/bundle.js"
    },
    resolve: {
        // Add '.ts' and '.tsx' as a resolvable extension.
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
            // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
            { test: /\.ts?$/, loader: "ts-loader" }
        ]
    }
}

package.json （一切安裝正確）：

{
  "scripts": {
    "start": "./node_modules/.bin/webpack --config webpack.config.js --watch"
  },
  "devDependencies": {
    "ts-loader": "^2.1.0",
    "typescript": "^2.3.4",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "rxjs": "^5.4.0"
  }
}

我找不到 ts/webpack 無法解析 rxjs 在哪里的rxjs

Answer 1

您應該將默認模塊解析策略從 Classic 更改為 Node。 為此，請更改您的tsconfig.json文件：

{
    ...
    "compilerOptions": {
        ....
        "moduleResolution": "node"
    }
}

請參閱有關模塊分辨率的文檔

Answer 2

離子

簡單地使用這個命令來刪除插件

npm uninstall --save rxjs

npm uninstall --save rxjs-compat

然后運行它重新安裝

npm install --save rxjs

npm install --save rxjs-compat

Answer 3

您必須將node_modules添加到您的 webpack resolve.modules 配置中：

 resolve: {
    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    extensions: [".js", ".json", ".jsx", ".css"],
 }

有關https://webpack.js.org/configuration/resolve/ 的更多信息

Answer 4

刪除 ClientApp 文件夾中的 node_modules 並運行

npm i