Question

我有一个使用ngx-socket-io的ngModule，我删除了不必要的导入和注入:)如您所见，我在构建完应用程序后立即注释了一些仅在应用程序的开发版本中具有吸引力的代码。使用--prod的应用程序，这些变量将不再起作用，如果登录到控制台，其值与静态声明相同，但是如果使用--prod标志进行构建，则SocketIoModule.forRoot（socketConfig）不会看到它们

import { SocketIoModule, SocketIoConfig } from "ngx-socket-io";
const socketConfig = {
    url: 'http://localhost:3000',
    options: {
        query: {
            userId: "f9ae03de-f043-4704-882e-d269ee514805"
        }
    }
};

// const userId = (<any>window).MaxDuel.instance.userId;
// const socket = (<any>window).MaxDuel.instance.socket;
// const socketConfig = {url: socket, options: {query: {userId}}};
// const socketConfig2 = JSON.parse(JSON.stringify(socketConfig));
console.log(socketConfig);

@NgModule({
  declarations: [],
  imports: [
    SocketIoModule.forRoot(socketConfig)
  ],
  entryComponents: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

，但是在注释完变量并引入了相同的副本但在静态声明中之后，应用程序再次开始工作！如您所见，我什至可以序列化和反序列化以模拟静态声明，但是再没有任何内容！

主要问题是我需要连接时使用userId，并且该变量不能为静态

Answer 1

这是因为在运行ng build --prod时默认使用AOT编译器，这意味着您的代码将在服务器上构建并提供给用户。那时，没有window对象或MaxDuel对象。因此，您需要找到另一种方法。幸运的是，那里！

我阅读了您使用的库的文档。还有另一种实例化Socket的方法。 Here you can read about it

您需要创建自己的Socket并提供它。

import { Injectable, NgModule } from '@angular/core';
import { Socket } from 'ngx-socket-io';

@Injectable()
export class MySocket extends Socket {

    constructor() {
        super({url: window.MaxDuel.instance.socket, 
               options: {
                 query: {window.MaxDuel.instance.userId
              }});
    }

}

@NgModule({
  declarations: [
    //components
  ],
  imports: [
    SocketIoModule,
    //...
  ],
  providers: [{
     provide: Socket, useClass: MySocket
  }],
  bootstrap: [/** AppComponent **/]
})
export class AppModule { }

现在，您可以在应用程序中的任意位置注入Socket并使用它。

ng build --prod动态变量丢失

1 个答案: