فایل های Angular Universal گم شده اند؟ راهنمای رفع سریع

بیایید این شکست فایل Angular Universal را برطرف کنیم. شما Angular Universal را راه‌اندازی کرده‌اید، اما برنامه رندر شده در سمت سرور شما دارایی‌های مهم CSS، JS یا سایر دارایی‌ها را ندارد. وحشت نکنید؛ ما این را مرتب خواهیم کرد این علم موشک نیست، اما نیاز به دقت دارد. این مراحل را دنبال کنید و در کمترین زمان به برنامه‌های کاملاً کاربردی SSR سرویس خواهید داد.

مرحله 1: تایید کنید angular.json پیکربندی

اول از همه، بیایید مطمئن شویم که شما angular.json به درستی برای Universal پیکربندی شده است. به دنبال server هدف در پروژه شما angular.json فایل این بخش نحوه ساخت اپلیکیشن سمت سرور شما توسط Angular را دیکته می کند. آن را باید به فایل ها و تنظیمات صحیح اشاره کنید. یک نظارت رایج، یک مسیر نادرست به فایل اصلی برنامه سمت سرور شما است. معمولی server هدف ممکن است شبیه به این باشد:

{
  "projects": {
    "your-project-name": {
      "architect": {
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/your-project-name/browser",
            "main": "src/main.server.ts",
            "tsConfig": "tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }
      }
    }
  }
}

نکات مهم:

• outputPath: این مسیر باید درست باشد مشخص می کند که فایل های کاربردی سمت سرور ساخته شده در کجا قرار می گیرند. دوبار بررسی کنید که این مسیر با ساختار استقرار شما همسو باشد.
• main: این به نقطه ورود اصلی سمت سرور شما (src/main.server.ts). مطمئن شوید که این فایل وجود دارد و به درستی پیکربندی شده است.
• tsConfig: این به پیکربندی TypeScript سمت سرور شما (tsconfig.server.json). این فایل شامل گزینه های کامپایلر مخصوص سرور شما می باشد.

مرحله 2: package.json بررسی دقیق

بعد، خود را بررسی کنید package.json. مطمئن شوید که بسته های Angular Universal را به درستی نصب کرده اید. به دنبال این وابستگی ها باشید:

"@angular/platform-server": "~16.0.0", //or your Angular version
"@nguniversal/angular": "~16.0.0" //or your Angular version

اگر گم شده‌اند یا نسخه‌های نادرستی دارند، با استفاده از آنها اصلاح کنید npm install یا yarn add. به سازگاری نسخه توجه زیادی داشته باشید. نسخه های نامتناسب منبع رایج مشکلات هستند.

مرحله 3: خود را بازرسی کنید main.server.ts

شما main.server.ts قلب رندر سمت سرور شما است. مطمئن شوید که این فایل به درستی برنامه شما را بوت استرپ می کند platformServer. یک اشتباه رایج، گم شدن یا پیکربندی نادرست است platformServer بوت استرپ یک مثال تصحیح شده:

import { enableProdMode } from '@angular/core';
import { platformServer } from '@angular/platform-server';

import { AppModule } from './app/app.module';

import * as express from 'express';
const app = express();

// ... your express server logic ...

if (process.env.NODE_ENV === 'production') {
  enableProdMode();
}

const server = platformServer(AppModule);

const port = process.env.PORT || 4000; // Set your desired port

// ... your server logic to handle requests and render ...

//Start the server
app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

مرحله 4: فرآیند ساخت

بیایید برنامه شما را برای سرور بسازیم. از دستور Angular CLI درست استفاده کنید: ng build --prod --configuration server.

این دستور فایل های لازم را برای برنامه سمت سرور شما تولید می کند. دوبار بررسی کنید که این دستور با موفقیت اجرا شود و فایل هایی را در قسمت مشخص شده شما تولید کند outputPath.

مرحله 5: تأیید استقرار

ساخت سمت سرور خود را مستقر کنید. اگر از پلتفرمی مانند Node.js استفاده می‌کنید، مطمئن شوید که وب سرور شما (مانند Express) برای ارائه فایل‌ها از دایرکتوری صحیح پیکربندی شده است. مطمئن شوید که فایل‌ها را از درستی سرویس می‌دهید dist پوشه، نه پوشه ساخت کلاینت. خطاهای رایج در اینجا شامل ارائه دایرکتوری اشتباه یا عدم رسیدگی به درخواست‌ها به سرور شما است.

مرحله 6: راهبردهای اشکال زدایی

اگر همچنان با مشکلاتی مواجه هستید، در اینجا نحوه اشکال زدایی آورده شده است:

• کنسول مرورگر را بررسی کنید: به دنبال خطاها در کنسول توسعه دهنده مرورگر خود باشید. درخواست های شبکه در اینجا اهمیت ویژه ای دارند.
• گزارش های سرور را بررسی کنید: گزارش‌های سمت سرور شما ممکن است مشکلاتی را در روند ارائه فایل آشکار کنند.
• ساده کردن: یک مثال حداقلی و قابل تکرار برای جداسازی مشکل ایجاد کنید. با یک برنامه Angular Universal بدون استخوان شروع کنید و به تدریج اجزا را اضافه کنید تا زمانی که مشکل دوباره ظاهر شود.
• کنترل نسخه: اطمینان حاصل کنید که از کنترل نسخه (Git) استفاده می‌کنید تا در صورت ایجاد تغییراتی که عملکرد را خراب می‌کند، بتوانید به نسخه فعال برگردید.

عیب یابی سناریوهای خاص

• CSS موجود نیست: بررسی کنید که آیا styles آرایه در شما angular.json زیرا پیکربندی سرور به درستی به فایل های CSS شما ارجاع می دهد.
• جاوا اسکریپت از دست رفته: دوبار بررسی کنید که فرآیند ساخت سمت سرور شما شامل تمام فایل‌های جاوا اسکریپت لازم باشد.
• مسیرهای دارایی: بررسی کنید که تمام مسیرهای دارایی (تصاویر، فونت‌ها و غیره) توسط پیکربندی برنامه شما به‌ویژه در رندر سمت سرور به درستی مدیریت می‌شوند.

با دنبال کردن دقیق این مراحل و توجه به جزئیات، این چالش جهانی Angular را غلبه کرده و یک برنامه کاربردی رندر شده در سمت سرور با کارایی بالا ایجاد خواهید کرد. به یاد داشته باشید، توجه دقیق به فایل های پیکربندی و یک رویکرد اشکال زدایی سیستماتیک، کلید موفقیت شما است. تسلیم نشو! شما این را دارید!