javascript - 我怎样才能让 webpack 找到 Angular 模块？

Question

我正在尝试使用 Angular 1 + Typescript 2 和 Webpack 设置一个基本的应用程序。该应用程序工作正常，直到我尝试使用外部模块，例如:angular-ui-router。

它总是提示找不到依赖:

./src/app.ts 中的错误未找到模块:错误:无法解析 ./src/app.ts 中的模块“angular-ui-router”3:26-54

演示显示问题:https://github.com/jxc876/angular-ts

我怀疑我没有正确导入路由依赖项，尝试过:

• 从“angular-ui-router”导入 uiRouter；
• 从“angular-ui-router”导入 * 作为 uiRouter

尝试使用 angular-route 和 ui-router 但都不起作用。尝试了 ts-loader 和 awesome-typescript-loader。

应用

import * as angular from 'angular';
import uiRouter from 'angular-ui-router';

let myApp = angular.module('myApp', [uiRouter]);

myApp.config(function($stateProvider) {
  let homeState = {
    name: 'home',
    url: '/home',
    template: '<div>It works !!!</div>'
  }

  $stateProvider.state(homeState);
});

配置

包.json

{
  "name": "ts-demo",
  "scripts": {
    "start": "webpack-dev-server --content-base ./src"
  },
  ...
  "devDependencies": {
    "@types/angular": "^1.5.16",
    "@types/angular-ui-router": "^1.1.34",
    "awesome-typescript-loader": "^3.0.0-beta.3",
    "typescript": "^2.0.9",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "angular": "^1.5.8",
    "angular-ui-router": "^0.3.1",
    "enhanced-resolve": "^2.3.0"
  }
}

webpack.config.js

module.exports = {
  entry: './src/app',
  output: {
    filename: './dist/bundle.js'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader'
      }
    ]
  }
};

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "allowJs": true,
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "strictNullChecks": true,
        "listFiles": true
    },
    "include": [
        "./src/**/*"
    ],
      "exclude": [
        "node_modules"
    ]
}

Answer 1

终于明白了。

第一个问题是 typescript 编译器删除了未使用的导入语句。

The compiler detects whether each module is used in the emitted JavaScript. If a module identifier is only ever used in type annotations and never as an expression then no require call is emitted for that module. This culling of unused references is a good performance optimization, and also allows for optional loading of those modules.

来源:https://github.com/Microsoft/TypeScript/issues/4717

我将导入的值分配给了一个虚拟数组，它似乎解决了这个问题。将值记录到控制台也可以。 (关于为什么我不能简单地将它传递到依赖项数组，请参阅我的最后说明)。

编辑:更好的解决方案是使用 import "module";语法 因为它总是基于上面的 github 发出，例如:import 'angular-ui-router';

---

其次，我的 webpack 文件在解析数组中缺少一个空字符串:

解析{扩展名:['', '.ts', '.js'] }

如果没有这个，它就无法为 ui 路由器提取文件。

我在处理此问题时注意到的几件事:webpack --display-error-details 非常有用。出于某种原因，它在 node_modules/angular-ui-router/release 中寻找双重 .js.js 扩展:

resolve file
  /Users/mich2264/projects/angular-ts/node_modules/angular-ui-router/release/angular-ui-router.js.ts doesn't exist
  /Users/mich2264/projects/angular-ts/node_modules/angular-ui-router/release/angular-ui-router.js.js doesn't exist

--traceResolution 对于 typescript 同样有用。

编辑:似乎是一个 awesome-typescript-loader 加载程序错误: https://github.com/s-panferov/awesome-typescript-loader/pull/264

---

最后，我不确定为什么，但是当我从 angular-ui-router 导入默认值并记录它或设置断点时，它正确显示为 ui.router ，但是如果我尝试将它传递到依赖项数组中，它就会变得未定义。

@types/angular-ui-router 在其类型文件中定义了以下导出:export default "ui.router";