应用

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

编辑：看起来是一个很棒的打字机 - 装载程序加载程序错误： 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

这个应该做的工作：

    template <class T = float> struct B {}; 

    template <template <class TT = float> class T>
    struct A { inline void f(); inline void g(); };

    template <template> <class TT> class T> void A<T>::f() {
      T<> t; // error - TT has no default template argument
    }

    template <template <class TT = char> class> T> void A<T>::g() {
      T<> t; // OK - T<char>
    }

请注意，导入只是导入路由器代码，在应用程序模块中，您需要注入import * as angular from 'angular'; import * as uiRouter from 'angular-ui-router'; let myApp = angular.module('myApp', ['ui.router']);字符串。

Answer 3

我想因为我正在使用UI-Router for AngularJS (1.x)，所以我不得不使用...

import '@uirouter/angularjs'

...而不是...

~~import 'angular-ui-router'~~

如何让webpack找到角度模块？

应用

配置

3 个答案: