2016-04-14 15 views
7

मुझे HTML फ़ाइल की आवश्यकता होने पर एक अजीब त्रुटि है। प्रश्न में कोड एक AngularJs ऐप टाइपस्क्रिप्ट में लिखा गया है और वेबपैक का उपयोग कर रहा है।Uncaught TypeError: वेबपैक पुनर्निर्माण के बाद अपरिभाषित की संपत्ति 'कॉल' नहीं पढ़ सकता CommonsChunkPlugin

app.directive.ts

// require('./app.scss'); 

// import AppController from './app.controller'; 

function AppDirective(): ng.IDirective { 
    return { 
    restrict: 'E', 
    scope: {}, 
    controllerAs: 'vm', 
    // controller: AppController, 
    controller:() => {}, 
    // template: require('./app.html') 
    template: '<div>this is a test</div>' 
    } 
} 

angular 
    .module('myApp') 
    .directive('appDirective', AppDirective); 

app.controller.ts

export default class AppController { 

    public static $inject = ['$scope']; 

    constructor(private $scope) { 

    } 
} 

app.html

<div> 
    THIS IS A TEST, REMAIN CALM 
</div> 

app.scss खाली है।

अब, जैसा कि है, टिप्पणियां शामिल हैं, यह कोड वेबपैक में कोई त्रुटि नहीं बनाता है और वेबपैक देव सर्वर का उपयोग करके तैनात करेगा।

वेबपैक देव सर्वर का उपयोग करते समय, जो सर्वर चल रहा है और इसे फिर से लोड करने के दौरान कोड बदलने देता है, मैं किसी भी टिप्पणी की सभी लाइनों को असम्बद्ध कर सकता हूं और यह ठीक से काम करेगा। 9163605 बूटस्ट्रैप

Uncaught TypeError: Cannot read property 'call' of undefined

Uncaught TypeError: Cannot read property 'call' of undefined__webpack_require__ @ bootstrap 9163605…:50 
webpackJsonp.152 @ app.ts:2__webpack_require__ @ bootstrap 9163605…:50 
webpackJsonp.153 @ main.browser.ts:1__webpack_require__ @ bootstrap 9163605…:50 
webpackJsonp.0 @ main.bundle.js:7__webpack_require__ @ bootstrap 9163605…:50 

webpackJsonpCallback @ ...:

हालांकि, अगर मैं डेव सर्वर को बंद कर देते हैं और फिर से बनाना है, यह विफल रहता है इस त्रुटि दे रही है 21 (गुमनाम समारोह) @ main.bundle.js: 1

webpack में इस लाइन पर विफल रहता है: बूटस्ट्रैप फ़ाइल:

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 

यह त्रुटि आती है app.scss लाइन, नियंत्रक लाइन, या app.html लाइन को अपूर्ण करने का प्रयास करते समय। यह पुनर्निर्माण के बाद ही होता है, किसी भी या सभी लाइनों के साथ असम्बद्ध।

मैं webpack उपयोग कर रहा हूँ निर्माण करने के लिए, और tsconfig में मॉड्यूल लोड करने के लिए commonjs, और मैं फ़ाइलों के इन प्रकार के लिए webpack.config में निम्नलिखित webpack लोडर है:

 { 
     test: /\.ts$/, 
     loader: 'awesome-typescript-loader', 
     exclude: [/\.(spec|e2e)\.ts$/] 
     }, 

     { 
     test: /\.scss$/, 
     loader: 'style-loader!css-loader!sass-loader' 
     }, 

     { 
     test: /\.html$/, 
     loader: 'raw-loader', 
     exclude: [helpers.root('src/index.html')] 
     }, 

मैं उपयोग कर रहा है थोड़ी देर के लिए कोणीय जेएस और टाइपस्क्रिप्ट, लेकिन यह पहली बार मेरी खुद की परियोजना शुरू करने वाला है, और मैं अभी भी वेबपैक के माध्यम से अपना रास्ता ठोकर खा रहा हूं।

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

अद्यतन मुझे कारण मिला, लेकिन समाधान नहीं मिला। अगर मैं प्लगइन त्रुटि गायब हो, लेकिन फिर मैं अब इस प्लगइन है हटाने

new webpack.optimize.CommonsChunkPlugin({ 
     name: helpers.reverse(['polyfills', 'vendor', 'main']), 
     // minChunks: Infinity 
    }), 

: यह मेरी webpack config में CommonsChunkPlugin की वजह से हो रहा है।

new webpack.optimize.CommonsChunkPlugin({ 
    names: ['polyfills', 'vendor', 'main'], 
    minChunks: 2 
}), 

लेकिन मैं अभी भी समझ में नहीं आता क्यों

+0

"यह ठीक से काम करेंगे", आप निर्धारित कर सकते हैं कि इसका मतलब क्या है? आउटपुट क्या होता है जब यह "ठीक से काम करता है"? –

+0

अभी सिर्फ एक रिक्त पृष्ठ दिखा निम्नलिखित: एक मछली दो मछली लाल मछली नीली मछली लोड हो रहा है ... यह एक परीक्षण है, शांत रहना जब यह काम नहीं कर रहा {{आंकड़ों से पता चलता }} लोड हो रहा है ... तो angularjs दूसरे मामले में काम करना बंद कर देता है – Kyle

+0

यह नाम -> नाम जो समस्या उत्पन्न कर रहा था – Kyle

उत्तर

0

ज़ेज की सिफारिश के अनुसार उत्तर # 2 को उत्तर के रूप में पोस्ट करना।

इस के लिए प्लगइन आरंभीकरण बदलने समस्या ठीक होती है:

new webpack.optimize.CommonsChunkPlugin({ 
    names: ['polyfills', 'vendor', 'main'], 
    minChunks: 2 
}), 

लेकिन मैं अभी भी समझ में नहीं आता क्यों

0

आप एक से अधिक webpack संकलित फ़ाइलें लोड है:

अद्यतन 2

इस के लिए प्लगइन आरंभीकरण बदलने समस्या ठीक होती है एक ही पृष्ठ पर, वे एक दूसरे को ओवरराइट करेंगे। अपने ऐप के लिए 'नेमस्पेस' को परिभाषित करने के लिए module.output.library विकल्प का उपयोग करें।

+0

एकाधिक से आपका क्या मतलब है? – Muhaimin

संबंधित मुद्दे