Angular 7与WordPress集成：如何正确获取资源路径？

首先，你的核心问题在于WordPress的路由机制会拦截所有请求——即便你创建了自定义路由，默认情况下WP仍会继续执行后续流程，最终输出404页面内容，导致你的图片响应被污染。另外，Angular默认以部署路径为基础请求资源，和WordPress主题的资源路径不匹配，也会引发路径错误。下面给你几个可行的解决方案：

方案一：修复自定义路由，终止WordPress后续执行 #

你之前的自定义路由仅输出了文件路径或内容，但没有阻止WP继续加载404模板。需要修改路由处理函数，确保输出正确的文件内容、HTTP头，并终止WP的执行流程：

WP_Route::get("dashboard/assets/{image_name}", 'get_image_for_angular');

function get_image_for_angular($image_name) {
    // 获取主题assets文件夹的绝对路径
    $image_path = get_template_directory() . "/assets/{$image_name}";
    
    // 检查文件是否存在
    if (!file_exists($image_path)) {
        status_header(404);
        exit;
    }
    
    // 获取文件的MIME类型
    $mime_type = wp_check_filetype($image_path)['type'];
    
    // 设置正确的HTTP头
    header("Content-Type: {$mime_type}");
    header("Content-Length: " . filesize($image_path));
    
    // 输出文件内容
    readfile($image_path);
    
    // 终止WordPress的后续执行，避免输出404内容
    exit;
}

注意这里把路由路径改成了dashboard/assets/{image_name}，刚好匹配Angular发起的https://mywordpresssite.com/dashboard/assets/xxx请求，能直接返回主题assets文件夹里的对应文件；同时用exit终止WP流程，不会再附加404内容。

方案二：调整Angular的基础路径配置（无需修改WP路由） #

如果你不想修改WordPress代码，可以在Angular构建时调整基础路径，让资源请求指向WordPress主题的assets文件夹。你提到不想用绝对路径，那可以试试相对路径配合Angular的--base-href参数：

在构建Angular项目时，执行：

ng build --prod --base-href ./

这样Angular会以当前页面路径为基础请求资源——比如用户访问https://mywordpresssite.com/dashboard时，资源会请求./assets/xxx，也就是https://mywordpresssite.com/assets/xxx（./相对于/dashboard的上级目录）。此时你只需要确保WordPress主题的assets文件夹能通过根路径/assets访问，最简单的方式是在WordPress根目录的.htaccess文件中添加以下规则（放在WP默认rewrite规则之前）：

RewriteRule ^assets/(.*)$ wp-content/themes/你的主题名/assets/$1 [L]

这样所有/assets/xxx的请求都会被重定向到主题的assets文件夹，Angular的资源请求就能正确命中文件了。

方案三：使用WordPress的模板重写钩子（更简洁） #

另一种方式是利用WP的template_include钩子，拦截Angular的资源请求，直接加载对应的文件：

add_filter('template_include', 'handle_angular_assets');

function handle_angular_assets($template) {
    $request_uri = $_SERVER['REQUEST_URI'];
    
    // 匹配Angular的资源请求路径
    if (preg_match('/^\/dashboard\/assets\/(.*)$/', $request_uri, $matches)) {
        $image_name = $matches[1];
        $image_path = get_template_directory() . "/assets/{$image_name}";
        
        if (file_exists($image_path)) {
            $mime_type = wp_check_filetype($image_path)['type'];
            header("Content-Type: {$mime_type}");
            readfile($image_path);
            exit;
        }
    }
    
    return $template;
}

这个钩子会在WP加载模板之前触发，我们检查请求是否为Angular的资源请求，如果是就直接输出文件内容并终止执行，避免404页面的输出。

总结 #

推荐优先使用方案二，因为它不需要修改WP的PHP代码，通过构建配置和rewrite规则就能解决问题，更符合你保持Angular原有配置的需求。如果方案二无法实施，方案一或方案三也能有效解决404和内容污染的问题。

内容的提问来源于stack exchange，提问作者Konstantin