Giải quyết 'Mã thông báo không mong đợi '<' trong triển khai Angular và .NET 8

Khi quá trình triển khai hoạt động trong quá trình gỡ lỗi nhưng không thành công trên IIS

Bạn đã bao giờ phải đối mặt với sự thất vọng khi thấy ứng dụng của mình hoạt động hoàn hảo ở chế độ gỡ lỗi nhưng lại thất bại thảm hại khi triển khai chưa? 😟 Điều này có thể đặc biệt khó chịu khi di chuyển một dự án, như gần đây tôi đã gặp phải khi di chuyển ứng dụng Angular và .NET của mình từ .NET Core 2.1 sang .NET 8. Vấn đề có vẻ khó hiểu: 'Lỗi cú pháp chưa được xử lý: Mã thông báo không mong muốn'

Phần kỳ lạ? Việc kiểm tra các tệp triển khai cho thấy rằng một số tập lệnh—chẳng hạn như thời gian chạy, polyfill và main—được phân phát dưới dạng tệp HTML thay vì JavaScript. Hành vi này khiến tôi phải gãi đầu vì thư mục `dist` cục bộ hiển thị định dạng JS chính xác. Tuy nhiên, việc triển khai IIS đã vẽ ra một bức tranh rất khác.

Với tư cách là một nhà phát triển, việc gặp phải những mâu thuẫn như vậy giống như việc giải quyết một bí ẩn trong đó mỗi khách hàng tiềm năng lại mở ra một câu hỏi khó hiểu khác. Tôi đã kiểm tra kỹ các đường dẫn, lệnh và cấu hình nhưng không thể xác định được nguyên nhân ngay lập tức. Khi thời hạn sắp đến, việc giải quyết vấn đề này trở thành ưu tiên hàng đầu. 🕒

Trong bài đăng này, tôi sẽ đi sâu vào nguyên nhân cốt lõi của vấn đề này, chia sẻ những bài học tôi đã học được trong quá trình khắc phục sự cố và hướng dẫn bạn giải quyết vấn đề một cách hiệu quả. Nếu bạn gặp phải trường hợp tương tự, hãy chú ý theo dõi—tôi hứa rằng bạn không đơn độc trong hành trình này!

Làm sáng tỏ các lỗi triển khai trong các ứng dụng Angular và .NET

Trong các tập lệnh được cung cấp ở trên, mỗi giải pháp tập trung vào một khía cạnh cụ thể của việc khắc phục sự cố triển khai trong môi trường Angular và .NET. Tệp cấu hình IIS bằng cách sử dụng web.config là rất quan trọng để giải quyết sự không khớp loại MIME. Bằng cách ánh xạ rõ ràng các phần mở rộng tệp như `.js` tới loại MIME thích hợp (ứng dụng/javascript), IIS biết cách cung cấp chính xác các tệp này cho trình duyệt. Điều này ngăn chặn "Mã thông báo không mong đợi '

các Lệnh xây dựng góc (ng build --prod) đảm bảo ứng dụng được tối ưu hóa cho sản xuất. Tham số `--output-hashing=all` băm tên tệp, cho phép trình duyệt lưu tệp vào bộ đệm mà không vô tình sử dụng các phiên bản lỗi thời. Điều này đặc biệt quan trọng trong việc triển khai trong thế giới thực, nơi người dùng thường xuyên truy cập lại ứng dụng. Bằng cách định cấu hình `baseHref` và `deployUrl` trong `angular.json`, chúng tôi đảm bảo rằng việc định tuyến và tải nội dung hoạt động liền mạch ngay cả khi được lưu trữ trong thư mục con hoặc CDN. Các bước này giúp ứng dụng có khả năng phục hồi trước những thách thức triển khai phổ biến, cải thiện cả trải nghiệm người dùng và độ tin cậy.

Tập lệnh Node.js được cung cấp ở trên bổ sung thêm một lớp gỡ lỗi khác bằng cách quét thư mục `dist` để xác nhận tính toàn vẹn của tệp. Sử dụng các lệnh như `fs.readdirSync` và `mime.lookup`, tập lệnh sẽ xác minh rằng mỗi tệp có loại MIME chính xác trước khi triển khai. Bước chủ động này giúp phát hiện các lỗi tiềm ẩn trước khi chúng xảy ra trong quá trình sản xuất, tiết kiệm thời gian và giảm bớt sự thất vọng. Ví dụ: trong một lần triển khai, tập lệnh này đã giúp tôi nhận ra rằng sự cố cấu hình đã dẫn đến việc tệp JSON được cung cấp sai loại MIME! 🔍

Cuối cùng, tập lệnh kiểm thử Jest đảm bảo xác thực tự động các khía cạnh triển khai chính. Nó kiểm tra sự tồn tại của các tệp quan trọng như `runtime.js` và `main.js` trong thư mục `dist`. Điều này ngăn ngừa các lỗi bị bỏ qua trong quá trình triển khai, đặc biệt là trong môi trường nhóm có nhiều nhà phát triển tham gia. Bằng cách kết hợp các thử nghiệm như vậy, bạn có thể tự tin triển khai ứng dụng của mình khi biết rằng nó đã được xác thực kỹ lưỡng. Các giải pháp này, khi được sử dụng cùng nhau, sẽ tạo ra một quy trình mạnh mẽ để giải quyết các thách thức khi triển khai và đảm bảo quá trình phát hành sản phẩm diễn ra suôn sẻ.

<!-- 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);
  });
});

Hiểu tầm quan trọng của cấu hình tệp tĩnh trong triển khai

Một khía cạnh quan trọng thường bị bỏ qua trong quá trình triển khai là cấu hình xử lý tệp tĩnh thích hợp. Trong trường hợp ứng dụng Angular và .NET, các nội dung tĩnh như tệp JavaScript và CSS phải được cung cấp chính xác để ứng dụng hoạt động. Cài đặt loại MIME không đúng trên máy chủ có thể dẫn đến các lỗi như lỗi "Uncaught SyntaxError: Unexpected token ' khét tiếngnội dung tĩnh trong cấu hình IIS đảm bảo các tệp này được diễn giải chính xác. Những cấu hình cấp máy chủ như vậy là không thể thiếu để tránh những bất ngờ trong thời gian chạy. 🚀

Một góc độ khác cần khám phá là tác động của việc định tuyến cấu hình sai. Các ứng dụng góc sử dụng định tuyến phía máy khách, điều này thường xung đột với các thiết lập máy chủ mong đợi các điểm cuối được xác định trước. Thêm các tuyến dự phòng trong cấu hình máy chủ, như chuyển hướng tất cả yêu cầu đến `index.html`, đảm bảo ứng dụng không bị hỏng. Ví dụ: trong IIS, điều này có thể đạt được bằng `` quy tắc định tuyến tất cả các yêu cầu chưa từng có đến điểm vào Angular. Bước đơn giản nhưng mạnh mẽ này có thể tiết kiệm hàng giờ gỡ lỗi và cải thiện độ mạnh mẽ của ứng dụng của bạn. 🛠️

Cuối cùng, hãy xem xét vai trò của việc tối ưu hóa thời gian xây dựng. Lệnh `ng build` của Angular với các cờ sản xuất như `--aot` và `--optimization` biên dịch và thu nhỏ ứng dụng để có hiệu suất tốt hơn. Tuy nhiên, điều quan trọng là đảm bảo những tối ưu hóa này phù hợp với môi trường triển khai. Ví dụ: việc bật bản đồ nguồn trong quá trình triển khai ban đầu có thể giúp gỡ lỗi các sự cố trong quá trình sản xuất mà không ảnh hưởng đến bảo mật sau này bằng cách vô hiệu hóa chúng. Những phương pháp hay nhất như vậy giúp việc triển khai trở nên dễ dự đoán và hiệu quả hơn.