typescript - कहत - लाल कंगारू




टाइपस्क्रिप्ट 1.7 के साथ कांगारू 2 मॉड्यूल से वर्गों के आयात के साथ परेशानियां (4)

आपकी एचटीएमएल फाइल कैनोरी 2 लाइब्रेरी कैसे लोड करती है? यह उतना सरल होना चाहिए जितना

<script src="path/to/my/libs/angular2.dev.js"></script>

आप देखेंगे कि उस फाइल में पूरी तरह से बनाए गए / समेकित काजल 2 लाइब्रेरी है। आपको कच्चे स्रोत फ़ाइलों पर अपने वेब पेज को इंगित नहीं करना चाहिए

SystemJS जानता है कि angular2/core अर्थ है क्योंकि निर्मित पुस्तकालय परिभाषित करता है कि उस पद्धति का अर्थ क्या है। हालांकि यह कुछ निर्देशिका संरचना प्रतीत होता है (जो शायद असंबद्ध पुस्तकालय में है) यह वास्तव में एक मॉड्यूल के लिए बनाया गया पुस्तकालय का सिर्फ कुछ नाम है। निर्मित पाठ में इस पाठ की खोज करें और आप इसे परिभाषित करेंगे:

System.register("angular2/core", ...

मुझे कुछ परेशानी हो रही है कि टाइपस्क्रिप्ट में मॉड्यूल से कक्षाएं कैसे आयात करें, विशेष रूप से टाइप स्क्रिप्ट 1.7 के साथ दृश्य स्टूडियो 2015 (अपडेट 1) में कांगार 2 के लिए।

हर जगह import {Component} from 'angular2/core'; 2 प्रलेखन में मैं आयात स्टेटमेंट देखता हूं जैसे: import {Component} from 'angular2/core'; । ये फ़ाइलें node_modules/angular2/* क्या सिर्फ angular2/* काम करता है?

मैं केवल दृश्य स्टूडियो में त्रुटियों से छुटकारा पा सकता हूं जब मेरे पास ./../node_modules/angular2/platform/browser'; निर्देशिका से एक सापेक्ष पथ है: ./../node_modules/angular2/platform/browser'; । यह दृश्य स्टूडियो बिल्ड त्रुटियों को ठीक करता है, लेकिन जब मैं कोशिश करता हूं और System.import('app/boot') साथ ऐप चलाता हूं तो मुझे इस तरह की त्रुटियों का एक समूह मिलता है:

system.src.js: 1049 GET http: // localhost: 8080 / node_modules / angular2 / प्लेटफ़ॉर्म / ब्राउज़र 404 (नहीं मिला)

एक और मुद्दा इस तरह के बयानों का उपयोग करने में सक्षम है: import {SearchComponent} from './Components/Search/search.component'; दृश्य स्टूडियो में, लेकिन तब जब मैं इसे चलाता हूं, system.src.js:2476 त्रुटियों के बहुत सारे होते हैं। system.src.js:2476

मुझे लगता है कि डिफ़ॉल्ट सेटिंग defaultExtension: 'js' System.config लिए defaultExtension: 'js' को उस मुद्दे का ध्यान रखना चाहिए था।

अद्यतन यहाँ सभी फाइलें हैं जो मुझे प्रासंगिक हैं:

विचारों / home / index.html

<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
System.import('app/app')
    .then(null, console.error.bind(console));

test.csproj

<TypeScriptToolsVersion>1.7</TypeScriptToolsVersion>
<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
<TypeScriptModuleResolution>Node</TypeScriptModuleResolution>
<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptJSXEmit>None</TypeScriptJSXEmit>
<TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
<TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
<TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
<TypeScriptRemoveComments>False</TypeScriptRemoveComments>
<TypeScriptOutFile />
<TypeScriptOutDir />
<TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
<TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
<TypeScriptSourceMap>True</TypeScriptSourceMap>
<TypeScriptMapRoot />
<TypeScriptSourceRoot />

typings / tsd.d.ts

export * from './../node_modules/angular2/core';
export * from './../node_modules/angular2/common';
export * from './../node_modules/angular2/http';
export * from './../node_modules/angular2/router';
export * from './../node_modules/angular2/platform/browser';

फ़ाइल संरचना:

app/
    app.ts
    components/
    models/
    services/
node_modules/ (npm install using Angular 2 quickstart's package.json)
    angular2/ (not all the files listed)
        bundles/ (not all the files listed)
            angular2.dev.js
        platform/
        src/
        ts/
        typings/
        common.d.ts
        core.d.ts
        http.d.ts
        router.d.ts
    es6-module-loader/
    es6-promise/
    es6-shim/
    rxjs/
    systemjs/
    zone.js/
    typescript/ (not sure if this needs to be here)

मैं टाइपस्क्रिप्ट से अपरिचित हूं, क्या अलग-अलग टाइपस्क्रिप्ट मॉड्यूल सिस्टम की वजह से एक त्रुटि हो सकती है? कोणीय 2 की सिफारिश की System.config को format: 'register' साथ सेट किया format: 'register' लेकिन https://www.npmjs.com/package/angular2 का कहना है कि फ़ाइलों का उपयोग आम जेएस का उपयोग कर किया जा सकता है

इन फ़ाइलों के साथ, मैं इन दो कंसोल त्रुटियों को प्राप्त करता हूं:

app.ts:1 Uncaught ReferenceError: require is not defined(anonymous function) @ app.ts:1
angular2-polyfills.js:143 Uncaught TypeError: Cannot read property 'split' of undefined

आपकी टीएस कॉन्फ़िग। जेएसन की वजह से छोटी लाल चक्कर लाइनें संभवतः हैं कम से कम यही मेरे लिए समस्या का कारण है मेरी समस्या यह थी कि मैं दोनों फाइल [] का इस्तेमाल कर रहा था और इसमें शामिल नहीं [] यह अपेक्षा के अनुरूप काम नहीं करता है और मान्य कॉन्फ़िग नहीं है।

मैंने इस समस्या का समाधान किया है लेकिन मुझे अभी भी "अनचाहे संदर्भ त्रुटि: आवश्यकता परिभाषित नहीं है" समस्या है


मुझे इसे एमएएमपी के साथ काम करने के लिए 5 मिनट की क्विकस्टार्ट में एक युगल संपादन करना था।

आपको SystemJS को कहने की ज़रूरत है कि आपका कस्टम मॉड्यूल कहां से है, लेकिन आप इसे करने के लिए आधारभूत नहीं सेट कर सकते हैं । आधारURL सेट करना नोड मॉड्यूल (जैसे कोणीय) के लिए गड़बड़ी मॉड्यूल संकल्प लगता है। इसके बजाय अपने systemjs कॉन्फ़िगरेशन में इसे जोड़ें:

map: {
    app: 'path/to/app/folder'
},

लेकिन कोणीय आयात स्टेटमेंट को बदलना नहीं है। वे पथ नहीं हैं, वे मॉड्यूल नाम हैं और सिस्टमजे इसे ठीक से हल कर सकते हैं यदि आपने सिर स्क्रिप्ट टैग में angular2.dev.js को शामिल किया है, तो आपके पास।

आपको यह भी शामिल करना पड़ सकता है:

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

अपने app.ts के शीर्ष पर (या जहाँ भी आप बूटस्ट्रैप कहते हैं)


निम्नलिखित मेरे लिए काम किया

System.config({    
          transpiler: 'typescript', 
          typescriptOptions: { emitDecoratorMetadata: true }, 
          packages: {       
          app: {
              defaultExtension: 'ts'
          }
        }
      });

मैं भी टाइपलेख int हेडर को शामिल किया था

<script src="https://code.angularjs.org/tools/typescript.js"></script>




systemjs