Angular6। PWA। आलसी लोडिंग मॉड्यूल। फायरबेस में ऑटो की तैनाती

कोणीय 6 वस्तुतः कुछ आदेशों में प्रगतिशील वेब अनुप्रयोग (PWA) के लिए आधार बनाने की अनुमति देता है, नेविगेशन पृष्ठों, तालिकाओं, डैशबोर्ड के लिए लेआउट बनाता है।

हमें कोणीय-क्ली संस्करण की आवश्यकता 6.0.0 से कम नहीं है, इसलिए स्थापित पैकेज के संस्करण की जांच करें:

ng --version 

और यदि आवश्यक हो, तो नवीनतम संस्करण स्थापित करें:

 npm i -g @angular/cli 

हम यह सब करते हैं, क्योंकि कोणीय-क्ली 6 संस्करणों और पहले के संस्करणों द्वारा बनाई गई परियोजनाओं द्वारा बनाई गई परियोजनाओं की संरचना में अंतर हैं। कार्यक्षमता में भी अंतर हैं। इनमें से कुछ के बारे में इस लेख में बताया गया है।

इसलिए, हम राउटिंग कार्यक्षमता के साथ तुरंत एक विशिष्ट परियोजना बनाएंगे, क्योंकि यह लोडिंग मॉड्यूल की क्षमताओं के प्रदर्शन को लागू करने की योजना भी है:

 ng new angular-pwa-ci --routing 

परियोजना के साथ होने वाले परिवर्तनों को ट्रैक करने के लिए इसे और अधिक सुविधाजनक बनाने के लिए, हम पहली प्रतिबद्ध करेंगे।

 git init git add . git commit -m "Initial commit" 

निम्नलिखित टीम हमारी परियोजना को एक प्रगतिशील वेब अनुप्रयोग (PWA) में बदल देगी

 ng add @angular/pwa --project "angular-pwa-ci" 

कमांड के परिणाम जारी करने में निम्नलिखित शामिल हैं:

 Installed packages for tooling via yarn. CREATE ngsw-config.json (392 bytes) CREATE src/assets/icons/icon-128x128.png (1253 bytes) CREATE src/assets/icons/icon-144x144.png (1394 bytes) CREATE src/assets/icons/icon-152x152.png (1427 bytes) CREATE src/assets/icons/icon-192x192.png (1790 bytes) CREATE src/assets/icons/icon-384x384.png (3557 bytes) CREATE src/assets/icons/icon-512x512.png (5008 bytes) CREATE src/assets/icons/icon-72x72.png (792 bytes) CREATE src/assets/icons/icon-96x96.png (958 bytes) CREATE src/manifest.json (1085 bytes) UPDATE angular.json (3571 bytes) UPDATE package.json (1389 bytes) UPDATE src/app/app.module.ts (605 bytes) UPDATE src/index.html (390 bytes) 

चलो एक और कमिट करते हैं।

और हमें यह देखने की जल्दी है कि हमारा आवेदन अब PWA की आवश्यकताओं को कैसे पूरा करता है।

ऐसा करने के लिए, हम lighthouse उपयोगिता का उपयोग करेंगे, जो हमारे आवेदन का लेखा-जोखा करेगी और इसके परिणामों पर एक विस्तृत रिपोर्ट तैयार करेगी।

यदि यह उपयोगिता पहले से स्थापित नहीं है, तो आप इसे कमांड से स्थापित कर सकते हैं:

 npm i -g lighthouse 

यह उपयोगिता यह भी जांचेगी कि क्या ब्राउज़र में जावास्क्रिप्ट अक्षम होने पर हमारा आवेदन सामग्री प्रदर्शित करता है या नहीं। इसलिए, हम लाइन के src/index.html फ़ाइल में उपस्थिति की जांच करते हैं

  <noscript>Please enable JavaScript to continue using this application.</noscript> 

अब हम अपने प्रोजेक्ट को production मोड में बनाएंगे, क्योंकि डिफॉल्ट सेटिंग्स सर्विस वर्कर्स के लिए केवल production मोड में काम करने के लिए होती हैं।

 ng build --prod 

इस लेख में बाद में, फायरबेस सेवा द्वारा प्रदान की गई मुफ्त होस्टिंग के लिए ऑटो-परिनियोजन प्रक्रिया का वर्णन किया जाएगा, लेकिन अब विकास के प्रयोजनों के लिए, एक स्थानीय सर्वर हमारे लिए पर्याप्त होगा, जिसे हम अब लिखेंगे। प्रोजेक्ट रूट में server.js फ़ाइल बनाएँ
यदि आप एक संपादक के रूप में विज़ुअल स्टूडियो कोड का उपयोग करते हैं, तो मैं कोणीय आवश्यक विस्तार को स्थापित करने की सलाह देता हूं, जिसमें कोणीय v6 स्निपेट एक्सटेंशन शामिल है , जिसके साथ आप टाइप करना शुरू कर सकते हैं:

 ex-node- 

प्रस्तावित स्निपेट से सहमत, वांछित पोर्ट और फ़ोल्डर निर्दिष्ट करें जिसमें प्रदर्शन के लिए फाइलें स्थित हैं। और वह सब है। आप चला सकते हैं:

 node server.js 

हमारा आवेदन यहाँ उपलब्ध है: http://localhost:8080 और हम ऑडिट शुरू कर सकते हैं

 lighthouse http://localhost:8080 

उपयोगिता हमारे प्रोजेक्ट के मूल में एक फाइल बनाएगी, जो localhost_2018-06-08_23-42-21.report.html . localhost_2018-06-08_23-42-21.report.html । इसे एक ब्राउज़र में खोलें और ऑडिट परिणाम देखें। हमने 100% स्कोर नहीं किया, लेकिन फिर भी आगे रहे।

फायरबेस पर हमारे एप्लिकेशन के ऑटो-डंप को व्यवस्थित करने के लिए, आपको http://firebase.com पर एक खाते की आवश्यकता होगी।

इसके बाद firebase-tools इंस्टॉल करें। हम इसे स्थानीय रूप से स्थापित करेंगे, क्योंकि भविष्य में इस पैकेज का उपयोग ऑटो-डिप्लेशन के लिए किया जाएगा।

 npm i -D firebase-tools 

और हर बार एक लंबा रास्ता node_models/firebase-tools/bin/firebase लिखने के लिए नहीं - हम इसे विश्व स्तर पर भी स्थापित करेंगे।

 npm i -g firebase-tools 

फायरबेस सेवा में प्रवेश करें:

 firebase login 

यह कमांड पृष्ठ पर डिफ़ॉल्ट ब्राउज़र को खोलने का कारण बनेगी जहां आपको आवेदन की अनुमति देने के लिए कहा जाएगा। हम सहमत हैं। आप पर काम कर सकते हैं।

नया प्रोजेक्ट बनाना Firebase कंसोल में ही संभव है, इसलिए https://console.firebase.google.com पर https://console.firebase.google.com और एक नया प्रोजेक्ट बनाएं, जिसे हम angular-pwa-ci ।

अगली कमांड कॉन्फ़िगरेशन फ़ाइलों को बनाएगी।

 ./node_modules/firebase-tools/bin/firebase init 

यह कमांड एक संवाद लाएगा जहां हम:

• angular-pwa-ci प्रोजेक्ट चुनें;
• हम केवल hosting उपयोग करेंगे;
• हम dist/angular-pwa-ci/ सिंक्रनाइज़ेशन के लिए dist/angular-pwa-ci/ फ़ोल्डर के dist/angular-pwa-ci/ निर्दिष्ट dist/angular-pwa-ci/ ;
• एसपीए के रूप में हमारे एप्लिकेशन को कॉन्फ़िगर करें (index.html के सभी अनुरोधों को पुनर्निर्देशित करें);
• index.html को फिर से लिखने से मना करें।

अब हम मैनुअल मोड में होस्टिंग के लिए अपना आवेदन करेंगे

 ./node_modules/firebase-tools/bin/firebase deploy --only hosting 

इस आदेश को जारी करने में, जहां हमारा आवेदन उपलब्ध होगा, उसका पता दिया जाएगा। उदाहरण के लिए, https://angular-pwa-ci.firebaseapp.com ।

और अब एक बार फिर हम अपने आवेदन का ऑडिट करेंगे।

 lighthouse https://angular-pwa-ci.firebaseapp.com 

यहां हमारा आवेदन PWA 100% हो गया है।

आलसी लोडिंग मॉड्यूल

चलो हमारे आवेदन को थोड़ा सजाने के लिए। इसी समय, हम कोणीय 6 की एक और विशेषता की खोज कर रहे हैं।
हमारी परियोजना के लिए कोणीय / सामग्री समर्थन जोड़ें।

 ng add @angular/material@6.2.1 @angular/cdk 

UPD: हम कोणीय / सामग्री के लिए संस्करण को इंगित करते हैं, क्योंकि पिछले 6.3 में कोई त्रुटि है।

अब हमारे एप्लिकेशन का नेविगेशन पेज बनाएं

 ng g @angular/material:material-nav --name=nav -m app 

हमारे प्रोजेक्ट कोड में मैन्युअल बदलाव करने का समय आ गया है।

 // src/app/app.component.html <app-nav></app-nav> 

  // src/app/nav/nav.component.ts @Component({ - selector: 'nav', + selector: 'app-nav', templateUrl: './nav.component.html', styleUrls: ['./nav.component.css'] }) 

एक मॉड्यूल बनाएँ

 ng gm table --routing 

निर्मित table मॉड्यूल में, तैयार मार्कअप और शैलियों के साथ एक घटक बनाएं।

 ng g @angular/material:material-nav --name=table --flat=table -m table 

  // src/app/app-routing.module.ts -const routes: Routes = []; +const routes: Routes = [ + { + path: 'table', + loadChildren: './table/table.module#TableModule' + }, + { + path: '', + redirectTo: '', + pathMatch: 'full' + } +]; 

  // src/app/table/table-routing.module.ts -const routes: Routes = []; +const routes: Routes = [ + { + path: '', + component: TableComponent + } +]; 

routerLink लिंक को routerLink और router-outlet जोड़ें

  // src/app/app.component.html <mat-toolbar color="primary">Menu</mat-toolbar> <mat-nav-list> - <a mat-list-item href="#">Link 1</a> + <a mat-list-item routerLink="/table">Table</a> <a mat-list-item href="#">Link 2</a> <a mat-list-item href="#">Link 3</a> </mat-nav-list> @@ -25,5 +25,6 @@ </button> <span>Application Title</span> </mat-toolbar> + <router-outlet></router-outlet> </mat-sidenav-content> </mat-sidenav-container> 

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

डैशबोर्ड के लिए मार्कअप के साथ एक और कार्यात्मक मॉड्यूल और घटक बनाते हैं

 ng gm dashboard --routing ng g @angular/material:material-dashboard --flat=dashboard --name=dashboard -m dashboard 

कोड को बदलने की क्रियाएं टेबल मॉड्यूल के समान हैं।

नतीजतन, हमें दो गतिशील रूप से लोड कार्यात्मक मॉड्यूल के साथ एक PWA आवेदन मिलता है।
यह फायरबेस पर हमारे आवेदन की एक स्वचालित तैनाती को लागू करने के लिए आगे बढ़ने का समय है।

फायरबेस के लिए सी.डी.

हमें https://travis-ci.org पर एक खाते और https://github.com पर एक खाते की आवश्यकता होगी।
चलिए angular-pwa-ci में angular-pwa-ci रिपॉजिटरी बनाते हैं और इसमें हमारे एप्लिकेशन का कोड angular-pwa-ci

 git remote add https://github.com/< >/angular-pwa-ci.git git push -u origin master 

उसके बाद, हम अपने angular-pws-ci रिपॉजिटरी angular-pws-ci सेवा से जोड़ेंगे। ऐसा करने के लिए, पृष्ठ https://travis-ci.org/profile/ सिंक्रनाइज़ बटन पर क्लिक करें, और सूची में रिपॉजिटरी के साथ हम angular-pwa-ci कनेक्ट करते हैं

हमारे आवेदन को तैनात करने के लिए, हमें इसके लिए एक कुंजी की आवश्यकता है, कमांड निष्पादित करें

 firebase login:ci 

इस आदेश के जारी होने में कुंजी शामिल होगी। इसके मान को कॉपी करें और इसे FIREBASE_TOKEN नाम के ट्रैविस-सीआई पर्यावरण चर में जोड़ें

यह हमारे प्रोजेक्ट में .travis.yml फ़ाइल को जोड़ने के लिए रहता है

 language: node_js node_js: - "node" before_script: - npm i -g firebase-tools script: - npm install - npm run build - firebase use --token $FIREBASE_TOKEN angular-pwa-ci - firebase deploy -m "build $TRAVIS_BUILD_ID" --non-interactive --token $FIREBASE_TOKEN cache: directories: - "node_modules" 

हम कमिट करें और हमारे को जिठूब के पास भेजें। नतीजतन, ट्रिगर में आग लग जाएगी, जो ट्रैविस-सीआई पर काम का शुभारंभ करेगी। अंत में, फायरबेस होस्टिंग पर हमारी परियोजना को अपडेट किया जाएगा।

प्रोजेक्ट सोर्स कोड उपलब्ध है
प्रोजेक्ट डेमो
आप कोड के साथ खेल सकते हैं