कोणीय पुस्तकालयों को स्थानीय रूप से कैसे विकसित करें

Nov 25 2022

नमस्ते ! इस कहानी में मैं आपको दिखाना चाहता हूं कि स्थानीय रूप से कोणीय पुस्तकालयों के साथ कैसे काम करें, और उन्हें दूरस्थ भंडार में लगातार धकेलने की आवश्यकता के बिना विकसित करें :) DRY - कोड पुनरावृत्ति से कैसे बचें यदि आप एक बड़े और जटिल कोणीय परियोजना पर काम करते हैं , मुझे यकीन है कि आपको कोड दोहराव की समस्या का सामना करना पड़ेगा। एक उदाहरण के रूप में आइए आपके एप्लिकेशन के "लुक" पर ध्यान दें - सभी पृष्ठों की संभवतः एक जैसी शैली होनी चाहिए (आप अपने उपयोगकर्ताओं को भ्रमित नहीं करना चाहते हैं और प्रत्येक पृष्ठ पर अलग-अलग दिखने वाले बटन हैं)।

Unsplash पर रयुनोसुके किकुनो द्वारा फोटो

नमस्ते ! इस कहानी में मैं आपको दिखाना चाहता हूं कि स्थानीय रूप से एंगुलर पुस्तकालयों के साथ कैसे काम करना है, और उन्हें दूरस्थ रिपॉजिटरी में लगातार धकेलने की आवश्यकता के बिना विकसित करना है :)

DRY - कोड दोहराव से कैसे बचें

यदि आप एक बड़े और जटिल एंगुलर प्रोजेक्ट पर काम करते हैं, तो मुझे यकीन है कि आपको कोड दोहराव की समस्या का सामना करना पड़ेगा। एक उदाहरण के रूप में आइए आपके एप्लिकेशन के "लुक" पर ध्यान दें - सभी पृष्ठों की संभवतः एक जैसी शैली होनी चाहिए (आप अपने उपयोगकर्ताओं को भ्रमित नहीं करना चाहते हैं और प्रत्येक पृष्ठ पर अलग-अलग दिखने वाले बटन हैं)। ठीक है, यह आसान है - आप केवल उन सामान्य शैलियों को styles.scssफ़ाइल में स्थानांतरित कर सकते हैं, या इसे सुरुचिपूर्ण तरीके से डिज़ाइन करने के लिए 7–1 पैटर्न का उपयोग कर सकते हैं।

लेकिन क्या होगा यदि आपके पास कुछ सामान्य घटक हैं , जो न केवल दिखते हैं, बल्कि समान व्यवहार भी करते हैं? यह अभी भी आसान है! बस अपने एप्लिकेशन में एक साझा मॉड्यूल बनाएं, वहां अपने घटकों को परिभाषित करें और उन्हें मॉड्यूल परिभाषा में निर्यात करें। महान !

अब, आइए अधिक जटिल समस्या पर ध्यान दें। क्या होगा यदि आपकी कंपनी के पास एक से अधिक कोणीय अनुप्रयोग हैं? और प्रत्येक एप्लिकेशन को समान दिखना चाहिए, उदाहरण के लिए:

एक ही शीर्षलेख और पाद लेख है
समान कॉर्पोरेट CSS स्टाइल हो
प्रपत्रों, सत्यापन त्रुटियों और अन्य संदेशों को प्रदर्शित करने का एक ही तरीका है

पुस्तकालय निर्माण

यहां आप लाइब्रेरी बनाने के बारे में आधिकारिक दस्तावेज़ पृष्ठ पा सकते हैं। आइए वहां बताए गए चरणों का पालन करें और अपनी लाइब्रेरी बनाएं:

ng new my-shared-workspace --no-create-application
cd my-shared-workspace
ng generate library my-buttons

my-shared-workspace आपके पुस्तकालयों के लिए एक सामान्य कार्यक्षेत्र है
माय-बटन एक उदाहरण पुस्तकालय है जिसे आप अन्य परियोजनाओं में पुन: उपयोग कर सकते हैं

{
  "name": "@my-company/my-buttons",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^14.2.0",
    "@angular/core": "^14.2.0"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  }
}

my-shared-workspace/projects/my-buttons/src/lib> ng g c fancy-button

घटक बनाया गया है, इसलिए हम एक बटन प्रदर्शित करने के लिए इसके टेम्पलेट को अपडेट कर सकते हैं

<button>fancy-button works!</button>

@NgModule({
  declarations: [
    MyButtonsComponent,
    FancyButtonComponent
  ],
  imports: [
  ],
  exports: [
    MyButtonsComponent,
    FancyButtonComponent // <-- here
  ]
})
export class MyButtonsModule { }

/*
 * Public API Surface of my-buttons
 */

export * from './lib/my-buttons.service';
export * from './lib/my-buttons.component';
export * from './lib/my-buttons.module';
export * from './lib/fancy-button/fancy-button.component'; // <-- here

हमने अपनी लाइब्रेरी पहले ही बना ली है, इसलिए अब क्लाइंट एप्लिकेशन का समय आ गया है। मैं इसे उत्पन्न करने के लिए कोणीय सीएलआई का उपयोग करूंगा: ng new my-applicationऔर मैं @my-company/my-buttonsआवेदन में निर्भरता के रूप में जोड़ूंगा package.json(अंतिम निर्भरता, के बाद zone.js)

{
  "name": "my-application",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/forms": "^14.2.0",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/router": "^14.2.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4",
    "@my-company/my-buttons": "0.0.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.6",
    "@angular/cli": "~14.2.6",
    "@angular/compiler-cli": "^14.2.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.2"
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyButtonsModule } from '@my-company/my-buttons';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MyButtonsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<lib-fancy-button></lib-fancy-button>

Error: src/app/app.component.html:1:1 - error NG8001: 'lib-fancy-button' is not a known element:
1. If 'lib-fancy-button' is an Angular component, then verify that it is part of this module.
2. If 'lib-fancy-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <lib-fancy-button></lib-fancy-button>
  ~~~~~~~~~~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

आपको कुछ और त्रुटियाँ भी दिखाई देंगी जैसे:

Error: src/app/app.module.ts:3:33 - error TS2307: Cannot find module '@my-company/my-buttons' or its corresponding type declarations.

3 import { MyButtonsModule } from '@my-company/my-buttons';

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@my-company%2fmy-buttons - Not found
npm ERR! 404
npm ERR! 404  '@my-company/[email protected]' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
Npm link to the rescue

यहां आप पूरा एनपीएम लिंक कमांड प्रलेखन पा सकते हैं। मैं आपको दिखाता हूँ कि लाइव रीलोड के साथ स्थानीय रूप से साझा लाइब्रेरी को विकसित करने के लिए इस कमांड का उपयोग कैसे करें।

my-shared-workspaceआइए डायरेक्टरी पर वापस जाएं , my-buttonsलाइब्रेरी बनाएं (फ्लैग --watchलाइव रीलोड के लिए जिम्मेदार है), और बिल्ड डायरेक्टरी पर जाएं

my-shared-workspace> ng build my-buttons --configuration development --watch
Building Angular Package

------------------------------------------------------------------------------
Building entry point '@my-company/my-buttons'
------------------------------------------------------------------------------
✔ Compiling with Angular sources in Ivy full compilation mode.
✔ Writing FESM bundles
✔ Copying assets
✔ Writing package manifest
✔ Built @my-company/my-buttons

------------------------------------------------------------------------------
Built Angular Package
 - from: /Users/<user>/<path>/my-shared-workspace/projects/my-buttons
 - to:   /Users/<user>/<path>/my-shared-workspace/dist/my-buttons
------------------------------------------------------------------------------

my-shared-workspace> cd dist/my-buttons
my-shared-workspace/dist/my-buttons> npm link

added 1 package, and audited 3 packages in 1s

found 0 vulnerabilities

my-applicationनिर्देशिका में, एक angular.jsonऔर विकल्प जोड़ें - प्रिजर्वसिम्लिंक, जो हमें इस लिंक्ड लाइब्रेरी का उपयोग करने की अनुमति देगा।

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-application": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-application",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "preserveSymlinks": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "my-application:build:production"
            },
            "development": {
              "browserTarget": "my-application:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "my-application:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

my-application> npm link @my-company/my-buttons

added 1 package, removed 1 package, and audited 918 packages in 2s

121 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

उसके बाद फिर से दौड़ें ng serve:

my-application> ng serve
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   3.30 MB |
polyfills.js          | polyfills     | 318.02 kB |
styles.css, styles.js | styles        | 210.56 kB |
main.js               | main          |  12.32 kB |
runtime.js            | runtime       |   6.53 kB |

                      | Initial Total |   3.84 MB

Build at: 2022-11-24T18:27:00.803Z - Hash: 7669daf65ca2f665 - Time: 4598ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

आइए देखते हैं रिजल्ट:

महान ! अब फैंसी-बटन-कंपोनेंट.html में कुछ बदलने की कोशिश करें

<button>fancy-button works - live reload!</button>

अब आप बिना किसी असुविधा के लाइब्रेरी और एप्लिकेशन दोनों पर काम कर सकते हैं :)

सत्यापन

यह सत्यापित करने के लिए कि आप लाइब्रेरी के किस संस्करण का उपयोग कर रहे हैं, आप निम्न आदेश चला सकते हैं:

npm list -g
/usr/local/lib
├── @angular/[email protected]
├── @my-company/[email protected]+1669314745555 -> ./../../../Users/<user>/<path>/my-shared-workspace/dist/my-buttons

जब आप स्थानीय रूप से अपने परिवर्तनों पर काम करना समाप्त कर लेंगे, तो आप निम्नलिखित तरीके से क्लाइंट एप्लिकेशन में लिंक की गई लाइब्रेरी का उपयोग बंद कर सकते हैं

कोणीय पुस्तकालयों को स्थानीय रूप से कैसे विकसित करें

DRY - कोड दोहराव से कैसे बचें

पुस्तकालय निर्माण

सत्यापन

सामग्री