कोणीय मॉड्यूल खोजने के लिए मैं वेबपैक कैसे प्राप्त कर सकता हूं?

Question

मैं कोणीय 1 + टाइपस्क्रिप्ट 2 और वेबपैक के साथ एक नंगे-हड्डियों के अनुप्रयोग को स्थापित करने की कोशिश कर रहा हूं। जब तक मैं बाहरी मॉड्यूल का उपयोग करने की कोशिश नहीं करता, तब तक ऐप ठीक काम करता है, पूर्व: 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

अंत में यह पता चला।

पहला मुद्दा यह है कि टाइपस्क्रिप्ट कंपाइलर आयात विवरणों को हटा देता है जिनका उपयोग नहीं किया जाता है।

संकलक यह पता लगाता है कि प्रत्येक मॉड्यूल उत्सर्जित जावास्क्रिप्ट में उपयोग किया जाता है या नहीं। यदि एक मॉड्यूल पहचानकर्ता का उपयोग केवल एनोटेशन प्रकारों में किया जाता है और अभिव्यक्ति के रूप में कभी नहीं किया जाता है तो उस मॉड्यूल के लिए कॉल की आवश्यकता नहीं होती है। अप्रयुक्त संदर्भों का यह समापन एक अच्छा प्रदर्शन अनुकूलन है, और उन मॉड्यूल की वैकल्पिक लोडिंग के लिए भी अनुमति देता है।

स्रोत: https://github.com/Microsoft/TypeScript/issues/4717

मैं एक डमी सरणी के लिए आयात मूल्य सौंपा और यह इसे ठीक करने के लिए लगता है। कंसोल पर मूल्य लॉगिंग भी काम करता है। (मेरा अंतिम नोट देखें कि मैं इसे निर्भरता सरणी में क्यों नहीं पारित कर सकता था)।

संपादित करें: import 'angular-ui-router';

---

दूसरा, मेरी webpack फ़ाइल संकल्प सरणी में एक खाली स्ट्रिंग याद आ रही थी:: बेहतर समाधान है, क्योंकि जो हमेशा ऊपर GitHub, पूर्व के आधार पर उत्सर्जित होता है import "module"; syntax उपयोग करने के लिए है

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

इसके बिना यह यूई राउटर के लिए फ़ाइल में नहीं खींच सका।

इस पर काम करते समय मैंने देखा कुछ चीजें: 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 टाइपप्रति के लिए समान रूप से उपयोगी है।

संपादित करें: एक भयानक-टाइपप्रति-लोडर लोडर बग प्रतीत होता है: https://github.com/s-panferov/awesome-typescript-loader/pull/264

---

अंत में, मैं यकीन नहीं क्यों, लेकिन जब मैं angular-ui-router से डिफ़ॉल्ट मान आयात और मैं इसे प्रवेश करें या सेट एक ब्रेकपॉइंट यह 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' स्ट्रिंग इंजेक्षन की जरूरत है।