Angular+Capacitor安卓应用：如何让assetlinks.json返回JSON而非HTML？

核心原因 #

Angular默认会将未匹配到路由的请求导向index.html，导致访问.well-known/assetlinks.json时，JSON内容被HTML页面包裹；另外静态文件的MIME类型配置错误也会引发这个问题。

方法1：配置Angular路由排除.well-known路径 #

在app-routing.module.ts中添加优先匹配规则，让.well-known路径直接返回静态文件：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  // 优先匹配.well-known路径，避免被通配符路由拦截
  { 
    path: '.well-known', 
    loadChildren: () => import('./well-known/well-known.module').then(m => m.WellKnownModule) 
  },
  // 你的其他路由规则
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

配套创建WellKnown模块 #

1. 生成模块：ng generate module well-known
2. 生成处理assetlinks.json的组件：ng generate component well-known/asset-links
3. 在well-known-routing.module.ts中配置子路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AssetLinksComponent } from './asset-links/asset-links.component';

const routes: Routes = [
  { path: 'assetlinks.json', component: AssetLinksComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class WellKnownRoutingModule { }

4. 修改组件逻辑，直接返回JSON并设置正确响应头：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-asset-links',
  template: '' // 无需渲染模板
})
export class AssetLinksComponent implements OnInit {

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get('./assets/.well-known/assetlinks.json', { responseType: 'text' }).subscribe(data => {
      // 清空页面内容，只保留JSON文本
      document.body.innerHTML = data;
      // 设置正确的Content-Type
      const meta = document.createElement('meta');
      meta.setAttribute('http-equiv', 'Content-Type');
      meta.setAttribute('content', 'application/json');
      document.head.appendChild(meta);
    });
  }
}

方法2：配置静态文件与服务器MIME类型 #

1. 修改angular.json的assets配置，确保文件被正确打包到根目录的.well-known下：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "assetlinks.json",
    "input": "src/.well-known/",
    "output": "/.well-known/"
  }
]

2. 服务器端配置（以Nginx为例）：
   在站点配置或nginx.conf中添加MIME类型映射，确保JSON文件返回正确的响应头：

types {
  application/json json;
}

方法3：Capacitor内置服务器路径重写 #

如果是在Capacitor安卓应用内访问，修改capacitor.config.ts添加重写规则：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.your.app',
  appName: 'YourApp',
  webDir: 'www',
  server: {
    rewriteRules: [
      {
        action: 'rewrite',
        regex: '^/.well-known/assetlinks.json$',
        replacement: '/assets/.well-known/assetlinks.json'
      }
    ]
  }
};

export default config;

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