使用Angular 17 CLI生成的独立应用程序会将app. config. ts导入app. config. server. ts,默认情况下合并这两个配置.

这会导致在app.config. ts中导入的所有提供程序也会导入到app.config. server. ts中,从而在服务器上进行实例化.

如果客户端所需的提供程序在构造函数中使用sessionStorage,则会导致错误,因为服务器上没有定义sessionStorage.例如:

export class MyStoreItem extends StoreItem <Stuff> {
  constructor() {
    const storedStuff: any = sessionStorage.getItem('stuff');
  }
}

我try 从app. config. server. ts中删除app. config. ts的导入,以及对mergeApplicationconfig(appconfig,serverconfig)的调用.这解决了这个问题,应用程序似乎工作正常.

我的问题是,有必要合并app.config. server.ts中的两个配置吗?如果有,为什么?

其次,如果有必要,我如何解决这个问题,而不判断提供者的构造函数是从服务器还是浏览器调用,因为它实际上不应该被服务器调用.

谢谢你!

推荐答案

是否有必要合并app. config. server. ts中的两个配置,如果需要,为什么?

尽管有几个依赖项可能会有所不同(如你所说的SessionStorage个),很少有两个是共同的(例如:provideHttpClient()provideRouter([]))在两个位置维护重复代码会很麻烦,因此我们有mergeApplicationConfig(appConfig, serverConfig)来帮助你更好地维护共同的依赖项!

如果有必要的话,我如何解决这个问题,而不判断提供者的构造函数是从服务器还是浏览器调用的,因为它实际上不应该被服务器调用.

当你删除所有这些时,应用程序仍然可以工作,只是代码将在两个地方重复,你需要维护,即使你删除了依赖项app.config.server.ts,组件中仍然有导入,客户端和服务器代码共享.

因此,必须有代码块,这可能会在服务器上出错,使用isPlatformBrowser来停止服务器中的执行!

使用isPlatformBrowser的示例:

import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID } from '@angular/core';
import { Component, Inject } from '@angular/core';

export class MyStoreItem extends StoreItem <Stuff> {
    isBrowser: boolean;

    constructor( @Inject(PLATFORM_ID) platFormId: Object) {
        this.isBrowser = isPlatformBrowser(platFormId);
        let storedStuff: any;
        // run code only on browser!
        if(this.isBrowser) {
            storedStuff = sessionStorage.getItem('stuff');
        }
    }
}

Angular相关问答推荐

运行容器后,Docker容器立即退出

NG构建后多余的国旗

如何动态呈现组件并以Angular 访问它们的方法?

Angular :为什么我得到了一个可观察到的共鸣

Observable转换为Observable

Angular APP_INITIALIZER 中的 MSAL 身份验证

iss 声明无效 Keycloak

如何将我的数组数据转换为逗号分隔的字符串

RxJS 基于先前的数据响应执行请求(涉及循环对象数组)

找不到模块'webpack'

如何在Angular Material2中获取活动选项卡

Angular 6 - NullInjectorError:单元测试中没有 HttpClient 的提供者

如何在Angular 4中为数字管道指定语言环境千位分隔符

Angular 4:InvalidPipeArgument:管道AsyncPipe的[object Object]

Angular 2 单元测试 - @ViewChild 未定义

ngx-toastr,Toast 未在 Angular 7 中显示

Angular2 - 如何开始以及使用哪个 IDE

@angular/platform-b​​rowser 与 @angular/platform-b​​rowser-dynamic

Angular @NGRX中这三个点的含义是什么

NG 测试中的调试测试