ng build --prod 动态变量丢失答案

【问题标题】：ng build --prod dynamic variables get lostng build --prod 动态变量丢失
【发布时间】：2019-04-27 13:51:27
【问题描述】：

我有一个使用 ngx-socket-io 的 ngModule，我删除了不必要的导入和注入 :) 正如你所看到的，我已经评论了一些代码，这些代码仅在应用程序的开发构建中像魅力一样起作用，只要我使用构建应用程序--prod 这些变量将不再起作用，如果记录到控制台，则值与静态声明相同，但 SocketIoModule.forRoot(socketConfig) 如果使用 --prod 标志构建则不会看到它们

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 并且该变量不能是静态的

【问题讨论】：

标签： angular angular-cli production ng-modules ng-build

【解决方案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 并正常使用它。

【讨论】：