如何让webpack找到角度模块？

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);
});

配置

的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"
    ]
}

Answer 1

终于搞清楚了.

第一个问题是typescript编译器删除了未使用的import语句.

编译器检测是否在发出的JavaScript中使用了每个模块.如果模块标识符仅用于类型注释而从不用作表达式,则不会为该模块发出任何require调用.对未使用的引用进行剔除是一种很好的性能优化,并且还允许可选地加载这些模块.

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

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

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

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

resolve { extensions: ['', '.ts', '.js'] }

没有它,它无法拉入ui路由器的文件.

我在处理这个问题时注意到的一些事情:webpack --display-error-details非常有用.出于某种原因,它正在寻找.js.js内部的双重扩展node_modules/angular-ui-router/release:

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 对打字稿同样有用.

编辑:似乎是一个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";

Answer 2

这个应该做的工作:

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

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

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