如何獲取webpack以查找角度模塊？

我正嘗試使用Angular 1 + Typescript 2和Webpack設置一個裸機應用程序。該應用程序工作正常，直到我嘗試使用外部模塊，例如：angular-ui-router。如何獲取webpack以查找角度模塊？

它總是抱怨說，它無法找到的依賴：

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

來源

2016-11-25 Mike R

相關：http://stackoverflow.com/questions/34657652/webpack-with-typescript-external-commonjs-module/34658780 –

終於明白了這一點。

第一個問題是打字稿編譯器刪除未使用的導入語句。

編譯器檢測每個模塊是否在發射的JavaScript中使用。如果模塊標識符只在類型註釋中使用，並且從不作爲表達式，則不會爲該模塊發出要求調用。對未使用的引用的這種剔除是一個很好的性能優化，並且還允許可選地加載這些模塊。

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

我分配導入值的虛設陣列，它似乎解決這個問題。將值記錄到控制檯也可以。（關於爲什麼我不能簡單地將它傳遞給依賴數組，請參閱我的最後一個註釋）。

編輯：更好的解決方案是使用import "module"; syntax因爲這總是基於上述github上，前發出：import 'angular-ui-router';

其次，我的WebPack文件的決心陣列中缺少一個空字符串：

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";

來源

2016-11-25 23:14:54

這一個應該做的工作：

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

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

通知書的，進口是剛剛導入路由器代碼和應用程序模塊，你需要注入'ui.router'字符串。

來源

2016-11-25 21:46:02 yarl

如何獲取webpack以查找角度模塊？

回答

相關問題