दिलचस्प पोस्ट
window.print () IE में काम नहीं कर रहा है LINQ अभिव्यक्ति में String.IsNullOrWhiteSpace मैं अपनी कंपनी का नाम कहां सेट करूँ? Google खोज में साइट के नीचे दिए गए लिंक HTML में छवि लोड ऑर्डर को नियंत्रित करना आप Xcode का निर्माण लॉग कैसे दिखा सकते हैं? (अगर iPhone वितरण बिल्ड ज़िप सही तरीके से बनाया गया था तो यह सत्यापित करने की कोशिश कर रहा है।) डब्ल्यूसीएफ के लिए आवश्यक डाटा कंट्रेक्ट विशेषता है जावा विधि अभिविन्यास बनाम एक चर का उपयोग करके कोड-पीछे से जावास्क्रिप्ट फ़ंक्शन कैसे कॉल करें क्या जीएनयू का जावा कम्पाइलर (जीसीजे) मर चुका है? क्यों मेरे कार्यक्रम में "पकड़े जाने या घोषित करने की घोषणा हो रही है" मुझे क्यों मिल रहा है? कांजी 2 नए राउटर का उपयोग करके पृष्ठ का शीर्षक बदलना आईओएस पर क्षेत्र निगरानी गड़बड़ी 7 – एक ही समय में कई सूचनाएं क्या इनलाइन के लिए अभी भी एक प्रयोग है? आईओएस 7 में नेविगेशन बार का रंग कैसे बदल सकता है?

केवल फ़ोल्डर नाम से एक बैरल आयात कैसे करें?

कोणीय 2 बैरल

कोन्यूलर 2 में, मैं बैरल को काम करने की कोशिश कर रहा हूं जैसा कि दस्तावेज़ीकरण में वर्णित है।

आधिकारिक कोनालर 2 स्टाइल गाइड बैरल्स का इस्तेमाल करने के लिए import स्टेटमेंट को कम और छोटा करने के बारे में चर्चा करता है।

मुझे पता है कि कुछ बैरल के लिए मुझे आयात पर जावास्क्रिप्ट फ़ाइल नाम निर्दिष्ट करना होगा जब मुझे ये नहीं करना चाहिए था

बैरल उदाहरण

(app / app.component.ts फ़ाइल को लाइन 12 पर संशोधित करें)

मेरे वास्तविक प्रोजेक्ट (एएसपी.नेट में चल रहे) के बाद मैंने इस समस्या को प्रदर्शित करने के लिए एक प्लंकर बनाया है, जहां मैंने बैरल का उपयोग करने के लिए हीरोज के टूर को संशोधित किया।

app/app.component , आयात करने का बुनियादी तरीका इस तरह है:

 import { HeroService } from './hero.service'; import { HeroesComponent } from './heroes.component'; import { HeroDetailComponent } from './hero-detail.component'; 

लेकिन, बजाय बैरल का उपयोग करने के लिए, आयात परिभाषा इस प्रकार दिखाई देगी:

 import { HeroService, HeroesComponent, HeroDetailComponent } from '../app'; 

from '../app'; रेखा index.ts के नाम से एक फाइल इंगित index.ts है जिसमें निर्यात / आयात किए गए घटक होते हैं:

 // app/index.ts export * from './hero-detail.component'; export * from './hero.service'; export * from './heroes.component'; 

लेकिन यह सभी मामलों में मेरे लिए काम नहीं करता है जिस तरह से मैंने इसे सही तरीके से काम करने के लिए प्राप्त किया है, वह स्पष्ट रूप से index फ़ाइल नाम सहित है:

 import { HeroService, HeroesComponent, HeroDetailComponent } from '../app/index'; // have to indicate 'index' 

मैं यह कैसे काम कर सकता हूं जहां index.js फ़ाइल नाम निहित है?

Solutions Collecting From Web of "केवल फ़ोल्डर नाम से एक बैरल आयात कैसे करें?"

SystemJS बैरल को अपने द्वारा नहीं समझती है, लेकिन SystemJS करता है। बीटीडब्ल्यू, खुदाई के बाद यह कैसे मॉड्यूल के लिए Angular करता है, मैंने एक समाधान पाया है


system.config.js आपको निम्नलिखित चीजों को करने की आवश्यकता होगी

नोट: एक index.ts की पैरेंट डायरेक्टरी barrel , आईसीवायडीके है

  • अपने बैरल के पथ जोड़ें
 // map tells the System loader where to look for things var map = { 'app': 'app', // 'dist', 'rxjs': 'node_modules/rxjs', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', '@angular': 'node_modules/@angular', 'barrel': 'path/to/your/barrel' }; 
  • packages बैरल न जोड़ें (बाद में समझाया गया) ##
 // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'app/boot.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { defaultExtension: 'js' } }; 
  • packageNames उन्हें जोड़ दें, जैसे कोणीय
 var packageNames = [ '@angular/common', ... '@angular/upgrade', 'barrel' ]; 

और आपने कल लिया।


##

packages बजाय हमने packageNames उपयोग क्यों किया है, क्योंकि आपको हर barrel लिए { main: 'index.js', defaultExtension: 'js' } (फ़ाइल नाम और एक्सटेंशन) को दोहराना होगा, लेकिन कोणीय पहले से यह साथ पाशन करके कर रहा है ।

 packageNames.forEach(function(pkgName) { packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; }); 

जो अंततः उन्हें packages जोड़ रहा है


प्रयोग

 import {something} from '../../barrel'; // relative path to directory of barrel 

तथा

 import {something} from 'barrel'; // name of barrel 

दोनों काम करते हैं, लेकिन बाद में intellisense प्रदान करने में विफल रहता है और यह कहकर एक त्रुटि दिखाती है कि cannot find module 'barrel' जिसके लिए मेरे पास समाधान नहीं है I लेकिन जब मैं करता हूँ, मैं इसे जोड़ दूँगा

यह सब अति जटिल है।

नक्शा करने के लिए कुछ भी जोड़ने की कोई आवश्यकता नहीं है, क्योंकि app , जिसमें सब कुछ शामिल होना चाहिए, वहां पहले से ही मौजूद है। हम सिर्फ उपपैकेज के साथ एक सरणी बना सकते हैं मेरे मामले में यह था:

 var subPackageNames = [ '+heroes', '+heroes/shared', '+heroes/hero-list', '+heroes/hero-detail', '+heroes/hero-dashboard' ]; 

और फिर दूसरा तर्क लेने के लिए प्रदान किए गए packIndex फ़ंक्शन को संशोधित करें

 function packIndex(pkgName, baseName) { packages[baseName+pkgName] = { main: 'index.js', defaultExtension: 'js' }; } 

अब हम संकुल ऑब्जेक्ट जैसे कोणीय की तरह हमारे उप पैकेज जोड़ सकते हैं।

 ngPackageNames.forEach(name => setPackageConfig(name, '@angular/')); subPackageNames.forEach(name => packIndex(name, 'app/')); 

मैंने आस्ट्रेलिया के विचारों का पालन ​​किया, लेकिन अभी तक इसे टूर-ऑफ-नायर्स ट्यूटोरियल के आधार पर अलग-अलग करने के लिए मेरे systemjs.config.js अलग-अलग systemjs.config.js से इसे अनुकूलित करना पड़ा। (3 जून 2016 – आरसी 1)

यह संशोधन काम करता है, और VisualStudio कोड के तहत, Intellisense मेरे लिए अच्छी तरह से काम किया

मैं भी मॉड्यूलर चीजों को रखने के लिए निर्देशिका संरचना के साथ खेल रहा हूं, और यहां वह जगह है जहां बैरल की भावनाएं हैं।

इस तरह मैंने tour-of-heroes परियोजना को संशोधित किया है

 app |- main.ts |- app.component.ts |- app.component.css |-+ components | |-+ dashboard | |- dashboard.component.css | |- dashboard.component.html | |- dashboard.component.ts |-+ modules | |-+ hero | |- index.ts <-- //The barrel for the Hero module | |-+ components | | |-+ detail | | | |- hero-detail.component.css | | | |- hero-detail.component.html | | | |- hero-detail.component.ts | | |-+ list | | |- hero-list.component.css | | |- hero-list.component.html | | |- hero-list.component.ts | |-+ models | | |- hero.model.ts | |-+ services | |- hero.service.ts | |- mock-heroes.ts 

और यहां अद्यतन systemjs.config.js

 (function(global) { // map tells the System loader where to look for things var map = { 'app': 'app', // 'dist', '@angular': 'node_modules/@angular', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 'rxjs': 'node_modules/rxjs', // The added barrel map 'hero': 'app/modules/hero' }; var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { defaultExtension: 'js' }, // The package definition (notice I had to declare index.js) 'hero': { main: 'index.js', defaultExtension: 'js' } }; var ngPackageNames = [ 'common', 'compiler', 'core', 'http', 'platform-browser', 'platform-browser-dynamic', 'router', 'router-deprecated', 'upgrade', ]; ngPackageNames.forEach(function(pkgName) { packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' }; }); var config = { map: map, packages: packages } System.config(config); })(this); 

और अंत में, यहां बताया गया है कि app.component.ts अब कैसा दिखता है

 import { Component } from '@angular/core'; import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; import { DashboardComponent } from './components/dashboard/dashboard.component'; import { HeroListComponent, HeroDetailComponent, HeroService } from './modules/hero'; @Component({ selector: 'my-app', directives: [ROUTER_DIRECTIVES], providers: [ ROUTER_PROVIDERS, HeroService ], template: ` <h1>{{title}}</h1> <nav> <a [routerLink]="['Dashboard']">Dashboard</a> <a [routerLink]="['HeroList']">Hero List</a> </nav> <router-outlet></router-outlet> `, styleUrls: ['app/app.component.css'] }) @RouteConfig([ { path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true }, { path: '/hero-list', name: 'HeroList', component: HeroListComponent }, { path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent } ]) export class AppComponent { title: string = 'Tour of Heroes'; } 

एक अंतिम नोट, आप इस रूप में आयात कर सकते हैं

 import { HeroListComponent, HeroDetailComponent, HeroService } from 'hero'; 

और यह काम करेगा, हालांकि, क्योंकि यह तकनीकी तौर पर नोडजेएस आयातित मॉड्यूल नहीं है, वी.एस. कोड शिकायत करता है कि उसे यह नहीं मिल सकता है। इसलिए, मेरी व्यक्तिगत पसंद स्पष्ट है / / ./modules/hero / ./modules/hero छोड़ने के लिए, यह मुझे पता है कि यह मेरे मॉड्यूल में से एक है और आयातित नहीं है और मैं लाल रेखाओं को देखने के लिए खुश हूं