如何让webpack找到Angular模块？

Question

我正在尝试使用Angular 1 + Typescript 2和Webpack设置一个简单的应用程序。该应用程序在不使用外部模块（例如：angular-ui-router）时可以正常工作。

它总是抱怨找不到依赖项：

ERROR in ./src/app.ts Module not found: Error: Cannot resolve module 'angular-ui-router' in ./src/app.ts 3:26-54

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

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

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

尝试过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);
});

Config

package.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"
    ]
}

- Mike R

---

相关：http://stackoverflow.com/questions/34657652/webpack-with-typescript-external-commonjs-module/34658780 - Mike R

Answer 1

最终搞定了。

首先问题是typescript编译器会删除未使用的导入语句。

编译器检测每个模块是否在发出的JavaScript中使用。 如果模块标识符仅用于类型注释，从不作为表达式使用，则不会为该模块发出require调用。 这种未使用引用的修剪是一种良好的性能优化，也允许选择加载这些模块。

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

我将导入的值分配给了虚拟数组，似乎解决了这个问题。将其记录到控制台也可以正常工作。（请参阅我的最终说明，了解为什么无法简单地将其传递到依赖项数组中）。

编辑：更好的解决方案是使用import“module”;语法，因为它始终基于上述github发出，例如：import'angular-ui-router';

---

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

resolve { extensions: ['', '.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加载器的一个bug： https://github.com/s-panferov/awesome-typescript-loader/pull/264

---

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

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

- Mike R

Answer 2

这个应该可以胜任：

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

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

请注意，import只是导入路由器代码，而在应用程序模块中，您需要注入 'ui.router' 字符串。

- yarl

Answer 3

我使用的是 AngularJS (1.x) 的 UI-Router，因此我需要使用...

import '@uirouter/angularjs'

...instead of...

import 'angular-ui-router'

- thargenediad