时间戳

首页 > 解决方案 > 如何在 Angular 中不为生产编译开发人员依赖项？

angular - 如何在 Angular 中不为生产编译开发人员依赖项？

问题描述

我正在一个网站上工作，该网站在生产中将与后端进行通信。开发人员在开发过程中使用虚拟数据来测试网站，但即使在生产构建之后，这些虚拟数据也会发送给客户端。我想让这些虚拟数据不包含在最终的生产版本中以减少捆绑包的大小。

我考虑过使用 Angular 编译器的文件替换功能，以便能够用生产变体替换开发文件。如果可能，我想避免这样做，因为此功能对于在编译时替换实现非常有用，而无需在替换中进行硬编码。想象一下，如果我有三个或四个不同的后端选项可供选择，并且想要根据我的环境服务中的设置动态选择。编译后，我只想有一个选择。

@Injectable({
  providedIn: 'root',
  useFactory: () => {
    const environment = inject(EnvironmentService);
    if (environment.dev) {
      return new DummyDataService();
    }
    return new HttpDataService(inject(HttpClient));
  }
})
export abstract class DataService() {
  public abstract getData(): Observable<string[]>;
}

export class HttpDataService implements DataService {

  constructor(private http: HttpClient) { }

  public getData(): Observable<string[]> {
    return this.http.get<string[]>('/url');
  }
}

export class DummyDataService implements DataService {

  public getData(): Observable<string[]> {
    return of([
      'angular',
      'babel',
      'webpack',
      'gulp'
    ]);
  }
}

当我使用“ng serve --prod”并将我的环境配置为在生产中运行时。我希望 DummyDataService 不包含在包中，但是当我检查发送到浏览器的内容时​​，DummyDataService 包含在包中（名称被编译器缩小，但字符串仍然存在）。

标签： angulartypescriptdependency-injection

解决方案

与其将虚拟数据保存在前端，不如只托管连接到测试数据库的后端的不同实例。这样你就可以使用 Angular 环境变量来达到它们的目的？

对于每个构建，我都有一个不同的环境文件，它在编译时被换出并注入到应用程序模块中，以提供不同的端点信息

编辑：编写单元测试来检查你的功能的有效性

推荐阅读