Angular 18：未知托管URL下用HTTP Client读取assets中JSON文件示例

要解决未知部署路径下读取JSON文件的问题，核心是避免硬编码绝对URL，利用Angular的基础路径机制或相对路径自动适配不同的部署环境。以下是具体实现步骤和示例代码：

1. 准备JSON文件 #

将你的JSON文件（比如data.json）放在项目的src/assets目录下。Angular默认会把assets目录中的文件打包到构建产物中，且保留相对目录结构。

2. 基础实现：使用相对路径请求 #

直接通过相对路径请求JSON文件，Angular的HttpClient会自动基于当前应用的基础路径（base href）解析请求地址，适配二级/三级子域名路径。

步骤2.1 导入HttpClientModule #

首先在根模块（app.module.ts）中导入HttpClientModule，否则无法使用HttpClient：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule], // 必须导入该模块
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤2.2 编写数据服务 #

创建服务封装JSON文件的请求逻辑：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class JsonDataService {
  constructor(private http: HttpClient) {}

  fetchData(): Observable<any> {
    // 相对路径会自动适配部署路径
    return this.http.get('assets/data.json');
  }
}

步骤2.3 在组件中调用服务 #

在组件中注入服务并请求数据：

import { Component, OnInit } from '@angular/core';
import { JsonDataService } from './json-data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  jsonData: any;

  constructor(private dataService: JsonDataService) {}

  ngOnInit(): void {
    this.dataService.fetchData().subscribe({
      next: (data) => {
        this.jsonData = data;
        console.log('加载的JSON数据:', data);
      },
      error: (err) => console.error('JSON加载失败:', err)
    });
  }
}

3. 进阶实现：结合APP_BASE_HREF动态拼接路径 #

如果需要更精确控制路径（比如处理特殊的base href配置），可以注入Angular的APP_BASE_HREF令牌获取当前应用的基础路径，再拼接JSON文件路径：

import { Injectable, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { APP_BASE_HREF } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class JsonDataService {
  constructor(
    private http: HttpClient,
    @Inject(APP_BASE_HREF) private baseHref: string
  ) {}

  fetchData(): Observable<any> {
    // 拼接路径并去重斜杠，避免路径错误
    const jsonUrl = `${this.baseHref}/assets/data.json`.replace(/\/+/g, '/');
    return this.http.get(jsonUrl);
  }
}

关键说明 #

• 无论应用部署在根域名、二级子域名还是多级路径下，相对路径或基于APP_BASE_HREF的动态路径都会自动适配，无需修改代码。
• 确保angular.json的assets配置包含src/assets（默认已配置），否则JSON文件不会被打包到构建产物中：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ]
  

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