कोणीय 2 - उन्नत विन्यास

इस अध्याय में, हम अन्य विन्यास फाइलों को देखेंगे जो कि कोणीय 2 परियोजना का हिस्सा हैं।

tsconfig.json

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

{ 
   "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [ "es2015", "dom" ],
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
   }
}

उपरोक्त कोड के बारे में ध्यान देने के लिए कुछ प्रमुख बिंदु निम्नलिखित हैं।

  • संकलन का लक्ष्य es5 है और ऐसा इसलिए है क्योंकि अधिकांश ब्राउज़र केवल ES5 टाइपस्क्रिप्ट को समझ सकते हैं।

  • SourceMap विकल्प का उपयोग मैप फ़ाइलों को उत्पन्न करने के लिए किया जाता है, जो डीबगिंग के समय उपयोगी होते हैं। इसलिए, विकास के दौरान इस विकल्प को सही रखना अच्छा है।

  • "EmitDecoratorMetadata": सही और "प्रयोगात्मकDecorators": सच को Angular JSecators के लिए आवश्यक है। यदि जगह नहीं है, तो कोणीय जेएस आवेदन संकलन नहीं करेगा।

package.json

इस फ़ाइल में कोणीय 2 परियोजना के बारे में जानकारी है। फ़ाइल में विशिष्ट सेटिंग्स निम्नलिखित हैं।

{
   "name": "angular-quickstart",
   "version": "1.0.0",
   "description": "QuickStart package.json from the documentation,
      supplemented with testing support",
   
   "scripts": {
      "build": "tsc -p src/",
      "build:watch": "tsc -p src/ -w",
      "build:e2e": "tsc -p e2e/",
      "serve": "lite-server -c=bs-config.json",
      "serve:e2e": "lite-server -c=bs-config.e2e.json",
      "prestart": "npm run build",
      "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
      "pree2e": "npm run build:e2e",
      "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" 
         --killothers --success first",
      "preprotractor": "webdriver-manager update",
      "protractor": "protractor protractor.config.js",
      "pretest": "npm run build",
      "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
      "pretest:once": "npm run build",
      "test:once": "karma start karma.conf.js --single-run",
      "lint": "tslint ./src/**/*.ts -t verbose"
   },

   "keywords": [],
   "author": "",
   "license": "MIT",
   "dependencies": {
      "@angular/common": "~2.4.0",
      "@angular/compiler": "~2.4.0",
      "@angular/core": "~2.4.0",
      "@angular/forms": "~2.4.0",
      "@angular/http": "~2.4.0",
      "@angular/platform-browser": "~2.4.0",
      "@angular/platform-browser-dynamic": "~2.4.0",
      "@angular/router": "~3.4.0",
      "angular-in-memory-web-api": "~0.2.4",
      "systemjs": "0.19.40",
      "core-js": "^2.4.1",
      "rxjs": "5.0.1",
      "zone.js": "^0.7.4"
   },

   "devDependencies": {
      "concurrently": "^3.2.0",
      "lite-server": "^2.2.2",
      "typescript": "~2.0.10",
      "canonical-path": "0.0.2",
      "tslint": "^3.15.1",
      "lodash": "^4.16.4",
      "jasmine-core": "~2.4.1",
      "karma": "^1.3.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~4.0.14",
      "rimraf": "^2.5.4",
      "@types/node": "^6.0.46",
      "@types/jasmine": "2.5.36"
   },
   "repository": {}
}

उपरोक्त कोड के बारे में ध्यान देने योग्य कुछ मुख्य बातें -

  • दो प्रकार की निर्भरताएं हैं, पहले निर्भरताएं हैं और फिर देव निर्भरताएं हैं। विकास प्रक्रिया के दौरान देवों की आवश्यकता होती है और दूसरों को आवेदन चलाने की आवश्यकता होती है।

  • "बिल्ड: वॉच": "tsc -p src / -w" कमांड का उपयोग बैकग्राउंड में टाइपस्क्रिप्ट को टाइप करने के लिए किया जाता है।

systemjs.config.json

इस फ़ाइल में कोणीय JS एप्लीकेशन के लिए आवश्यक सिस्टम फाइल्स हैं। यह HTML पृष्ठों में स्क्रिप्ट टैग जोड़ने की आवश्यकता के बिना सभी आवश्यक स्क्रिप्ट फ़ाइलों को लोड करता है। विशिष्ट फ़ाइलों में निम्न कोड होगा।

/** 
 * System configuration for Angular samples 
 * Adjust as necessary for your application needs. 
*/ 
(function (global) { 
   System.config ({ 
      paths: { 
         // paths serve as alias 
         'npm:': 'node_modules/' 
      }, 
      
      // map tells the System loader where to look for things 
      map: { 
         // our app is within the app folder 
         app: 'app',  
         
         // angular bundles 
         '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
         '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
         '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
         '@angular/platform-browser': 'npm:@angular/platformbrowser/bundles/platform-browser.umd.js', 
         '@angular/platform-browser-dynamic': 
            'npm:@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js', 
         '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
         '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
         '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',  
         
         // other libraries 
         'rxjs':  'npm:rxjs', 
         'angular-in-memory-web-api': 
            'npm:angular-in-memory-web-api/bundles/inmemory-web-api.umd.js' 
      }, 
     
      // packages tells the System loader how to load when no filename 
         and/or no extension 
      packages: { 
         app: { 
            defaultExtension: 'js' 
         }, 
         
         rxjs: { 
            defaultExtension: 'js' 
         } 
      } 
   
   }); 
})(this);

उपरोक्त कोड के बारे में ध्यान देने योग्य कुछ मुख्य बातें -

  • 'npm:': 'node_modules /' हमारी परियोजना में उस स्थान को बताता है जहां सभी npm मॉड्यूल स्थित हैं।

  • ऐप की मैपिंग: 'ऐप' उस फ़ोल्डर को बताता है जहां हमारे सभी एप्लिकेशन फाइल लोड होते हैं।