কৌণিক এবং .NET 8 স্থাপনায় 'অপ্রত্যাশিত টোকেন '<' সমাধান করা হচ্ছে

যখন স্থাপনা ডিবাগে কাজ করে কিন্তু IIS-এ ব্যর্থ হয়

আপনি কি কখনও আপনার অ্যাপ্লিকেশনটিকে ডিবাগ মোডে পুরোপুরি কাজ করতে দেখে হতাশার মুখোমুখি হয়েছেন কিন্তু মোতায়েন করার সময় খারাপভাবে ব্যর্থ হয়েছেন? 😟 একটি প্রকল্প স্থানান্তর করার সময় এটি বিশেষভাবে বিরক্তিকর হতে পারে, যেমনটি আমি সম্প্রতি আমার কৌণিক এবং .NET অ্যাপ্লিকেশনটি .NET Core 2.1 থেকে .NET 8-এ সরানোর সময় অনুভব করেছি৷ সমস্যাটি রহস্যজনক বলে মনে হয়েছিল: একটি 'অনক্ষিত সিনট্যাক্স ত্রুটি: অপ্রত্যাশিত টোকেন'

বিজোড় অংশ? স্থাপনার ফাইলগুলি পরিদর্শন করে জানা গেছে যে কিছু স্ক্রিপ্ট - যেমন রানটাইম, পলিফিল এবং প্রধান - জাভাস্ক্রিপ্টের পরিবর্তে HTML ফাইল হিসাবে পরিবেশন করা হয়েছিল। স্থানীয় `dist` ফোল্ডারটি সঠিক JS বিন্যাস দেখায় এই আচরণটি আমাকে আমার মাথা ঘামাচ্ছে। আইআইএস স্থাপনা, তবে, একটি খুব ভিন্ন চিত্র এঁকেছে।

একজন বিকাশকারী হিসাবে, এই ধরনের অসঙ্গতিগুলির সম্মুখীন হওয়া একটি রহস্য সমাধান করার মতো মনে হয় যেখানে প্রতিটি সীসা অন্য একটি বিভ্রান্তিকর প্রশ্ন খোলে। আমি পাথ, কমান্ড এবং কনফিগারেশন দুবার চেক করেছি কিন্তু অবিলম্বে কারণটি চিহ্নিত করতে পারিনি। সময়সীমা শেষ হওয়ার সাথে সাথে, এই সমস্যাটি সমাধান করা একটি অগ্রাধিকার হয়ে উঠেছে। 🕒

এই পোস্টে, আমি এই সমস্যার মূল কারণ সম্পর্কে আলোচনা করব, সমস্যা সমাধানের সময় আমি যে পাঠগুলি শিখেছি তা শেয়ার করব এবং এটি কার্যকরভাবে সমাধান করার জন্য আপনাকে গাইড করব৷ আপনি যদি একই রকম পরিস্থিতিতে পড়ে থাকেন, তাহলে সাথে থাকুন—আমি প্রতিশ্রুতি দিচ্ছি আপনি এই যাত্রায় একা নন!

কৌণিক এবং .NET অ্যাপ্লিকেশনগুলিতে স্থাপনার ত্রুটিগুলি ডিমিস্টিফাই করা

উপরে প্রদত্ত স্ক্রিপ্টগুলিতে, প্রতিটি সমাধান একটি কৌণিক এবং .NET পরিবেশে স্থাপনার সমস্যা সমাধানের একটি নির্দিষ্ট দিকের উপর ফোকাস করে। IIS কনফিগারেশন ফাইল ব্যবহার করে web.config MIME ধরনের অমিল সমাধানের জন্য গুরুত্বপূর্ণ। তাদের সঠিক MIME প্রকারের (অ্যাপ্লিকেশন/জাভাস্ক্রিপ্ট) সাথে `.js`-এর মতো ফাইল এক্সটেনশনগুলিকে স্পষ্টভাবে ম্যাপ করার মাধ্যমে, IIS জানে কিভাবে এই ফাইলগুলিকে ব্রাউজারে সঠিকভাবে পরিবেশন করা যায়। এটি "অপ্রত্যাশিত টোকেন" প্রতিরোধ করে

দ কৌণিক বিল্ড কমান্ড (ng বিল্ড --prod) নিশ্চিত করে যে অ্যাপ্লিকেশনটি উৎপাদনের জন্য অপ্টিমাইজ করা হয়েছে। `--output-hashing=all` প্যারামিটার ফাইলের নাম হ্যাশ করে, ব্রাউজারগুলিকে ভুলবশত পুরানো সংস্করণ ব্যবহার না করে ফাইল ক্যাশে করতে সক্ষম করে। এটি বাস্তব-বিশ্বের স্থাপনায় বিশেষভাবে গুরুত্বপূর্ণ যেখানে ব্যবহারকারীরা প্রায়শই অ্যাপ্লিকেশনটি পুনরায় দেখেন। `angular.json`-এ `baseHref` এবং `deployUrl` কনফিগার করার মাধ্যমে, আমরা নিশ্চিত করি যে সাবডিরেক্টরি বা CDN-এ হোস্ট করা থাকলেও রাউটিং এবং অ্যাসেট লোডিং নির্বিঘ্নে কাজ করে। এই পদক্ষেপগুলি অ্যাপ্লিকেশনটিকে সাধারণ স্থাপনার চ্যালেঞ্জগুলির জন্য স্থিতিস্থাপক করে তোলে, ব্যবহারকারীর অভিজ্ঞতা এবং নির্ভরযোগ্যতা উভয়ই উন্নত করে।

উপরে প্রদত্ত 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);
  });
});

স্থাপনায় স্ট্যাটিক ফাইল কনফিগারেশনের গুরুত্ব বোঝা

স্থাপনার সময় প্রায়ই উপেক্ষা করা একটি গুরুত্বপূর্ণ দিক হল স্ট্যাটিক ফাইল হ্যান্ডলিং এর সঠিক কনফিগারেশন। কৌণিক এবং .NET অ্যাপ্লিকেশনের ক্ষেত্রে, অ্যাপ্লিকেশানটি কার্যকর করার জন্য জাভাস্ক্রিপ্ট এবং CSS ফাইলের মতো স্ট্যাটিক সম্পদগুলি অবশ্যই সঠিকভাবে পরিবেশন করা উচিত। সার্ভারে অনুপযুক্ত MIME টাইপ সেটিংস কুখ্যাত "অপরাধিত সিনট্যাক্স ত্রুটি: অপ্রত্যাশিত টোকেন' এর মতো ত্রুটির কারণ হতে পারেস্ট্যাটিক সামগ্রী IIS কনফিগারেশন নিশ্চিত করে যে এই ফাইলগুলি সঠিকভাবে ব্যাখ্যা করা হয়েছে। রানটাইম বিস্ময় এড়ানোর জন্য এই ধরনের সার্ভার-স্তরের কনফিগারেশন অপরিহার্য। 🚀

অন্বেষণ করার জন্য আরেকটি কোণ হল রাউটিং ভুল কনফিগারেশনের প্রভাব। কৌণিক অ্যাপ্লিকেশনগুলি ক্লায়েন্ট-সাইড রাউটিং ব্যবহার করে, যা প্রায়শই পূর্বনির্ধারিত এন্ডপয়েন্ট আশা করে সার্ভার সেটআপের সাথে দ্বন্দ্ব করে। সার্ভার কনফিগারেশনে ফলব্যাক রুট যোগ করা, যেমন সকল অনুরোধকে `index.html`-এ পুনঃনির্দেশ করা, নিশ্চিত করে যে অ্যাপ্লিকেশনটি ভেঙে যাবে না। উদাহরণস্বরূপ, IIS-এ, এটি একটি ` দিয়ে অর্জন করা যেতে পারে` নিয়ম যা সমস্ত অতুলনীয় অনুরোধগুলিকে কৌণিক প্রবেশ বিন্দুতে রুট করে৷ এই সহজ কিন্তু শক্তিশালী পদক্ষেপটি কয়েক ঘন্টা ডিবাগিং বাঁচাতে পারে এবং আপনার অ্যাপ্লিকেশনের দৃঢ়তা উন্নত করতে পারে। 🛠️

সবশেষে, বিল্ড-টাইম অপ্টিমাইজেশানের ভূমিকা বিবেচনা করুন। কৌণিকের `ng build` কমান্ড `--aot` এবং `--অপ্টিমাইজেশন`-এর মতো প্রোডাকশন ফ্ল্যাগ সহ আরও ভালো পারফরম্যান্সের জন্য অ্যাপটিকে কম্পাইল করে এবং ছোট করে। যাইহোক, এই অপ্টিমাইজেশনগুলি স্থাপনার পরিবেশের সাথে সারিবদ্ধ হওয়া নিশ্চিত করা গুরুত্বপূর্ণ। উদাহরণস্বরূপ, প্রাথমিক স্থাপনার সময় উত্স মানচিত্রগুলিকে সক্ষম করা পরবর্তীতে তাদের নিষ্ক্রিয় করে নিরাপত্তার সাথে আপস না করে উত্পাদনে সমস্যাগুলি ডিবাগ করতে সহায়তা করতে পারে। এই ধরনের সর্বোত্তম অনুশীলন স্থাপনাগুলিকে আরও অনুমানযোগ্য এবং দক্ষ করে তোলে।