ng build --prod 动态变量丢失

Posted 2023-03-15

【中文标题】ng build --prod 动态变量丢失

【英文标题】：ng build --prod dynamic variables get lost

【发布时间】：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 并且该变量不能是静态的

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