کونیی اور .NET 8 کی تعیناتی میں 'غیر متوقع ٹوکن '<' کو حل کرنا

جب تعیناتی ڈیبگ میں کام کرتی ہے لیکن IIS پر ناکام ہوجاتی ہے۔

کیا آپ نے کبھی اپنی ایپلیکیشن کو ڈیبگ موڈ میں بالکل کام کرتے ہوئے دیکھ کر مایوسی کا سامنا کیا ہے لیکن تعینات ہونے پر بری طرح ناکام ہو گئے ہیں؟ 😟 کسی پروجیکٹ کو منتقل کرتے وقت یہ خاص طور پر پریشان کن ہوسکتا ہے، جیسا کہ میں نے حال ہی میں اپنی Angular اور .NET ایپلیکیشن کو .NET Core 2.1 سے .NET 8 میں منتقل کرتے وقت تجربہ کیا ہے۔ یہ مسئلہ خفیہ لگ رہا تھا: ایک 'Uncaught SyntaxError: Unexpected token'

عجیب حصہ؟ تعیناتی فائلوں کا معائنہ کرنے سے معلوم ہوا کہ کچھ اسکرپٹس جیسے کہ رن ٹائم، پولی فلز، اور مین کو جاوا اسکرپٹ کے بجائے HTML فائلوں کے طور پر پیش کیا گیا تھا۔ اس رویے نے مجھے سر کھجانے کے لیے چھوڑ دیا کیونکہ مقامی `dist` فولڈر نے درست JS فارمیٹ دکھایا۔ تاہم، IIS کی تعیناتی نے ایک بہت ہی مختلف تصویر پیش کی۔

ایک ڈویلپر کے طور پر، اس طرح کی تضادات کا سامنا کرنا ایک معمہ حل کرنے جیسا محسوس ہوتا ہے جہاں ہر برتری ایک اور الجھا دینے والا سوال کھول دیتی ہے۔ میں نے راستوں، کمانڈز اور کنفیگریشنز کو دو بار چیک کیا لیکن فوری طور پر وجہ کی نشاندہی نہیں کر سکا۔ ڈیڈ لائن ختم ہونے کے ساتھ، اس مسئلے کو حل کرنا ایک ترجیح بن گیا۔ 🕒

اس پوسٹ میں، میں اس مسئلے کی بنیادی وجہ کا پتہ لگاؤں گا، ان اسباق کا اشتراک کروں گا جو میں نے ٹربل شوٹنگ کے دوران سیکھے ہیں، اور اسے مؤثر طریقے سے حل کرنے میں آپ کی رہنمائی کروں گا۔ اگر آپ بھی ایسے ہی منظر نامے سے دوچار ہوئے ہیں، تو دیکھتے رہیں — میں وعدہ کرتا ہوں کہ آپ اس سفر میں اکیلے نہیں ہیں!

کونیی اور .NET ایپلی کیشنز میں تعیناتی کی خرابیوں کو ختم کرنا

اوپر فراہم کردہ اسکرپٹس میں، ہر حل ایک Angular اور .NET ماحول میں تعیناتی کے مسائل کو حل کرنے کے مخصوص پہلو پر توجہ مرکوز کرتا ہے۔ IIS کنفیگریشن فائل کا استعمال کرتے ہوئے web.config MIME قسم کی مماثلتوں کو حل کرنے کے لیے اہم ہے۔ واضح طور پر فائل ایکسٹینشنز جیسے `.js` کو ان کی مناسب MIME قسم (ایپلی کیشن/جاوا اسکرپٹ) سے نقشہ بنا کر، IIS جانتا ہے کہ ان فائلوں کو براؤزرز کو صحیح طریقے سے کیسے پیش کیا جائے۔ یہ "غیر متوقع ٹوکن" کو روکتا ہے

دی کونیی تعمیر کمانڈ (ng تعمیر --prod) اس بات کو یقینی بناتا ہے کہ ایپلیکیشن پیداوار کے لیے موزوں ہے۔ `--output-hashing=all` پیرامیٹر فائل کے ناموں کو ہیش کرتا ہے، براؤزر کو غلطی سے پرانے ورژن کا استعمال کیے بغیر فائلوں کو کیش کرنے کے قابل بناتا ہے۔ یہ خاص طور پر حقیقی دنیا کی تعیناتیوں میں اہم ہے جہاں صارفین کثرت سے ایپلیکیشن کو دوبارہ دیکھتے ہیں۔ `angular.json` میں `baseHref` اور `deployUrl` کو ترتیب دے کر، ہم اس بات کو یقینی بناتے ہیں کہ روٹنگ اور اثاثوں کی لوڈنگ بغیر کسی رکاوٹ کے کام کرتی ہے یہاں تک کہ سب ڈائرکٹریاں یا CDNs میں میزبانی کی جائے۔ یہ اقدامات ایپلیکیشن کو عام تعیناتی چیلنجوں کے لیے لچکدار بناتے ہیں، جس سے صارف کے تجربے اور قابل اعتماد دونوں میں بہتری آتی ہے۔

اوپر فراہم کردہ Node.js اسکرپٹ فائلوں کی سالمیت کی تصدیق کے لیے `dist` ڈائریکٹری کو اسکین کرکے ڈیبگنگ کی ایک اور پرت کا اضافہ کرتی ہے۔ 'fs.readdirSync' اور 'mime.lookup' جیسی کمانڈز کا استعمال کرتے ہوئے، اسکرپٹ اس بات کی تصدیق کرتا ہے کہ ہر فائل میں تعیناتی سے پہلے درست MIME قسم ہے۔ یہ فعال قدم پیداوار میں ہونے سے پہلے ممکنہ غلطیوں کو پکڑنے میں مدد کرتا ہے، وقت کی بچت اور مایوسی کو کم کرتا ہے۔ مثال کے طور پر، میری ایک تعیناتی کے دوران، اس اسکرپٹ نے مجھے یہ سمجھنے میں مدد کی کہ کنفیگریشن کا مسئلہ JSON فائلوں کو غلط MIME قسم کے ساتھ پیش کرنے کا باعث بنا! 🔍

آخر میں، جیسٹ ٹیسٹ اسکرپٹ کلیدی تعیناتی پہلوؤں کی خودکار توثیق کو یقینی بناتا ہے۔ یہ 'dist' فولڈر میں اہم فائلوں جیسے `runtime.js` اور `main.js` کے وجود کی جانچ کرتا ہے۔ یہ تعیناتی کے دوران نظر انداز کی جانے والی غلطیوں کو روکتا ہے، خاص طور پر ٹیم کے ماحول میں جہاں متعدد ڈویلپرز ملوث ہوتے ہیں۔ اس طرح کے ٹیسٹوں کو شامل کر کے، آپ یہ جانتے ہوئے کہ اپنی درخواست کو مکمل طور پر درست کر لیا گیا ہے اعتماد کے ساتھ تعینات کر سکتے ہیں۔ یہ حل، جب ایک ساتھ استعمال ہوتے ہیں، تعیناتی کے چیلنجوں کو حل کرنے اور ہموار پروڈکشن ریلیز کو یقینی بنانے کے لیے ایک مضبوط عمل تخلیق کرتے ہیں۔

<!-- web.config solution to fix MIME type issues in IIS -->
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".*" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>

// Angular CLI commands to rebuild the application
ng build --prod --output-hashing=all
// Ensure deployment paths in angular.json are set correctly
{
  "outputPath": "dist/my-app",
  "baseHref": "/",
  "deployUrl": "/"
}
// Copy contents of dist folder to IIS hosted directory

// Node.js script to check MIME types of files in the dist folder
const fs = require('fs');
const path = require('path');
const mime = require('mime-types');
// Directory to check
const distDir = path.join(__dirname, 'dist');
// Function to validate file types
function validateFiles(dir) {
  fs.readdirSync(dir).forEach(file => {
    const fullPath = path.join(dir, file);
    if (fs.lstatSync(fullPath).isDirectory()) {
      validateFiles(fullPath);
    } else {
      const mimeType = mime.lookup(fullPath);
      console.log(`File: ${file}, MIME Type: ${mimeType}`);
    }
  });
}
validateFiles(distDir);

// Jest test to validate Angular dist folder integrity
const fs = require('fs');
const path = require('path');
test('All JavaScript files should exist and be served correctly', () => {
  const distDir = path.join(__dirname, 'dist');
  const requiredFiles = ['runtime.js', 'polyfills.js', 'main.js'];
  requiredFiles.forEach(file => {
    const filePath = path.join(distDir, file);
    expect(fs.existsSync(filePath)).toBe(true);
  });
});

تعیناتی میں جامد فائل کنفیگریشن کی اہمیت کو سمجھنا

ایک اہم پہلو جسے اکثر تعیناتی کے دوران نظر انداز کیا جاتا ہے وہ ہے جامد فائل ہینڈلنگ کی مناسب ترتیب۔ Angular اور .NET ایپلیکیشنز کے معاملے میں، جاوا اسکرپٹ اور CSS فائلوں جیسے جامد اثاثوں کو ایپلیکیشن کے کام کرنے کے لیے صحیح طریقے سے پیش کیا جانا چاہیے۔ سرور پر غلط MIME قسم کی ترتیبات بدنام زمانہ "Uncaught SyntaxError: Unexpected token' جیسی خرابیوں کا باعث بن سکتی ہیں۔جامد مواد IIS کنفیگریشن میں یہ یقینی بناتا ہے کہ ان فائلوں کی صحیح تشریح کی گئی ہے۔ رن ٹائم سرپرائزز سے بچنے کے لیے سرور کی سطح کی اس طرح کی تشکیلات ناگزیر ہیں۔ 🚀

دریافت کرنے کے لیے ایک اور زاویہ روٹنگ کی غلط کنفیگریشنز کا اثر ہے۔ کونیی ایپلیکیشنز کلائنٹ سائیڈ روٹنگ کا استعمال کرتی ہیں، جو اکثر سرور سیٹ اپ سے متصادم ہوتی ہیں جو پہلے سے طے شدہ اینڈ پوائنٹس کی توقع کرتے ہیں۔ سرور کی ترتیب میں فال بیک روٹس کو شامل کرنا، جیسے تمام درخواستوں کو `index.html` پر ری ڈائریکٹ کرنا، اس بات کو یقینی بناتا ہے کہ ایپلیکیشن ٹوٹے نہیں۔ مثال کے طور پر، IIS میں، یہ ایک ` کے ساتھ حاصل کیا جا سکتا ہے۔` قاعدہ جو تمام غیر مماثل درخواستوں کو کونیی اندراج پوائنٹ پر لے جاتا ہے۔ یہ آسان لیکن طاقتور قدم ڈیبگنگ کے گھنٹوں کو بچا سکتا ہے اور آپ کی ایپلیکیشن کی مضبوطی کو بہتر بنا سکتا ہے۔ 🛠️

آخر میں، تعمیراتی وقت کی اصلاح کے کردار پر غور کریں۔ Angular کی `ng build` کمانڈ جس میں پروڈکشن فلیگ ہیں جیسے `--aot` اور `--optimization` بہتر کارکردگی کے لئے ایپ کو مرتب اور چھوٹا کرتا ہے۔ تاہم، یہ یقینی بنانا ضروری ہے کہ ان اصلاحات کو تعیناتی کے ماحول کے ساتھ ہم آہنگ کیا جائے۔ مثال کے طور پر، ابتدائی تعیناتی کے دوران ماخذ کے نقشوں کو فعال کرنے سے بعد میں سیکیورٹی سے سمجھوتہ کیے بغیر پروڈکشن میں مسائل کو ڈیبگ کرنے میں مدد مل سکتی ہے۔ اس طرح کے بہترین طریقوں سے تعیناتیوں کو زیادہ قابل قیاس اور موثر بنایا جاتا ہے۔