कोणीय 2 बंडल आयात/आयात कई मॉड्यूल

Question

मुझे नहीं पता था कि सवाल कैसे बताना है ... तो, मूल रूप से मैं टाइपरक्रिप्ट के साथ कोणीय 2 का उपयोग करके अपना स्वयं का एप्लिकेशन लिख रहा हूं। मैं अपने मॉड्यूल को कोणीय के साथ करने के तरीके को आयात करना चाहता हूं, जहां हम एक पंक्ति में कई संबंधित मॉड्यूल आयात कर सकते हैं। उदाहरण के लिए, हम angular2 बीटा में ऐसा कर सकता है:

import { Component, OnInit, Input } from 'angular2/core'; 

मैं अपने अनुप्रयोग के साथ कुछ ऐसा ही करना चाहते हैं। उदाहरण के लिए:

import { UserService, RoleService } from 'my-project/services';

इसके अलावा, मैं मॉडल, पाइप, घटक, आदि के लिए भी ऐसा ही करने में सक्षम होना चाहते ...

एक और बात, फ़ोल्डर संरचना कुछ इस तरह होगा :

src/ऐप्स/सेवाओं
src/ऐप्स/घटकों
src/ऐप्स/मॉडल
src/ऐप्स/पाइप

मैं क्या करने की कोशिश की: पथ src/इसका एप, मैं हर 'बंडल', services.d.ts, models.d.ts, pipes.d.ts तरह के लिए फ़ाइल पर बनाया ... और फिर मैं तो जैसे SystemJS config पर मैप करने के लिए, की कोशिश की:

(function(global) { 

    // map tells the System loader where to look for things 
    var map = { 
    'app':      'src/app', // 'dist', 
    'rxjs':      'node_modules/rxjs', 
     'my-project/components':     'src/app/components', 
     'my-project/services':    'src/app/services', 
     'my-project/models':      'src/app/models', 
     'my-project/pipes':       'src/app/pipes', 
    '@angular':     'node_modules/@angular' 
    }; 

    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'app':      { format: 'register', main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    }; 

    var packageNames = [ 
    'my-project/components', 
    'my-project/services', 
    'my-project/models', 
    'my-project/pipes', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/core', 
    '@angular/http', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 
    '@angular/router-deprecated', 
    '@angular/testing', 
    '@angular/upgrade', 
    ]; 

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' } 
    packageNames.forEach(function(pkgName) { 
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    }); 

    var config = { 
    map: map, 
    packages: packages 
    }; 

    System.config(config); 

})(this); 

समस्या दृश्य स्टूडियो संहिता मेरी .ts फ़ाइलों में आयात को नहीं पहचानता है। यह कहता है कि यह मॉड्यूल नहीं मिला।

Answer 1

आप services फ़ोल्डर (उदाहरण के लिए) के अंदर एक बैरल बनाना चाहते हैं जो सभी नेस्टेड निर्यात मैन्युअल रूप से निर्यात करेगा, इस तरह आप बैरल से 2 (या अधिक) मॉड्यूल आयात कर सकते हैं, जहां आपको पहले 2 अलग आयात का उपयोग करें।

आखिर में मैंने सुना, यह कुछ कारणों से पेड़-हिलाने को तोड़ता है, लेकिन मैं इसके बारे में गलत कर सकता हूं।

वैसे भी, कुछ और here पढ़ें।

Answer 2

संपादित करें: आप क्या चाहते हैं

आप अपने ऐप की घोषणा फाइलों पैदा करते हैं और उन्हें @types फ़ोल्डर में जोड़े गए (या अपने स्वयं बना सकते हैं और है कि tsconfig के typeRoots सरणी में जोड़ने के लिए) हो सकता है के करीब।

न्यू tsconfig

आप कंसोल इस्तेमाल कर सकते हैं लेकिन मैं एक नया tsconfig_decl.json फ़ाइल बनाने की सिफारिश करेंगे। अफसोस की बात है कि मुझे घोषणाएं बनाने का कोई तरीका नहीं मिला, इसलिए आपको बाद में dist फ़ोल्डर को साफ़ करने की आवश्यकता है।

उदाहरण tsconfig_decl.json

महत्वपूर्ण गुणों declaration, declarationDir और मैं outDir लगता है जो फ़ोल्डर हटाना पता करने के लिए कर रहे हैं।

{ 
    "compilerOptions": { 
    "baseUrl": "", 
    "declaration": true, 
    "declarationDir": "../node_modules/@types/myproject", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": ["es6", "dom"], 
    "mapRoot": "./", 
    "module": "es6", 
    "moduleResolution": "node", 
    "outDir": "../dist/dec-del", 
    "sourceMap": true, 
    "target": "es5", 

    "typeRoots": [ 
     "../node_modules/@types" 
    ] 
    } 
} 

उत्पन्न घोषणाओं

tsc -p "src/tsconfig_decl.json" 

परंतु फ़ोल्डर संरचनाएँ/बैरल सही हैं, आप

import { AuthService, UserService } from 'myproject/services'; 

उपयोग करने के लिए सक्षम होना चाहिए --------- ------ पुराना उत्तर ---------------

आप इस संरचना

src/ऐप्स/सेवाओं
src/ऐप्स/घटकों
src/ऐप्स/मॉडल
src/ऐप्स/पाइप

आप index.ts फ़ाइलें बना सकते है, तो (बैरल) इन फ़ोल्डरों के अंदर जो सभी उपलब्ध सेवाओं/घटकों/... निर्यात करते हैं। फिर आप app/services का उपयोग कर उन्हें एक्सेस कर सकते हैं। यह पूरी तरह से नहीं है कि आप क्या चाहते हैं लेकिन आप वहां अपना प्रोजेक्ट नाम प्राप्त करने के लिए ऐप फ़ोल्डर का नाम बदल सकते हैं या मुझे लगता है कि बिल्ड प्रक्रिया को बदलने से उसकी मदद मिल सकती है।

src/ऐप्स/सेवाओं/index.ts

export * from './auth.service'; 
export * from './user.service'; 
... 

सेवाओं

import { AuthService, UserService } from 'app/services'; 
... 

का उपयोग करके आप एक गहरी संरचना आप चेन या उपयोग अप बैरल बनाने की जरूरत है, तो जिस मार्ग को आप चाहते हैं उसे प्राप्त करने के लिए शीर्ष स्तर पर सापेक्ष पथ।

Answer 3

आपको इसे पूरा करने के लिए 2 चीजों की आवश्यकता है। सबसे पहले, जैसा कि अन्य उत्तर बताते हैं, आपको src/app/services, src/app/models और अन्य ऐसे फ़ोल्डर्स के अंदर "बैरल" (index.ts) बनाने की आवश्यकता है।

कहाँ index.ts फ़ाइलों सामान के निर्यात है कि आप अपने आवेदन में आयात करना चाहते हैं शामिल:

export * from './service1'; 
export * from './service2'; 

अब तक, यह आप दे देंगे तो आप फ़ोल्डर संरचना इस तरह दिखता है संभावना यह करने के लिए:

import { Service1, Service2 } from '../../services'; 

बहरहाल, यह आदर्श है क्योंकि +०१२३८७१९९३१० की तरह संबंधित पथ का है। इसे ठीक करने के लिए, आपको एक और कदम की आवश्यकता है: baseUrl और pathstsconfig.json में टाइपस्क्रिप्ट विकल्प निर्दिष्ट करें (https://www.typescriptlang.org/docs/handbook/module-resolution.html देखें)।

tsconfig:

आप संबंधित पथ से छुटकारा पाने के लिए चाहते हैं, तो आप सिर्फ baseUrl विकल्प इस तरह निर्दिष्ट करने के लिए की जरूरत है।json:

{ 
    "compilerOptions": { 
    ... 
    "baseUrl": "./src" 
    } 
} 

इस के बाद किया जाता है, तो आप इस तरह अपनी सेवाओं को आयात करने के लिए सक्षम होना चाहिए:

import { Service1, Service2 } from 'app/services'; 

लेकिन क्या आप भी my-project/services की तरह आयात करने के लिए (app के बजाय my-project) की आवश्यकता है,

{ 
    "compilerOptions": { 
    ... 
    "baseUrl": "./src", 
    "paths": { 
     "my-project/*": [ 
     "app/*" 
     ]  
    } 
    } 
} 

इस विन्यास के लिए के साथ

: तो आप भी निम्न तरह paths विन्यास निर्दिष्ट करने की आवश्यकता llowing काम करना चाहिए:

import { Service1, Service2 } from 'my-project/services';