SignalR核心角度SSR-找不到模块“请求”

时间:2020-04-21 16:02:13

标签: angular azure asp.net-core module signalr

我们刚刚将API从.NET Framework升级到了.NET Core。我们迁移到SignalR Core。因此,我们还必须在Angular前端升级SignalR客户端。没问题。一切都在本地工作。但是,当我们在Azure应用服务上进行部署时,会出现此错误:

Error: Cannot find module 'request'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:\home\site\wwwroot\server.js:276222:21)
    at webpack_require (D:\home\site\wwwroot\server.js:20:30)
    at Object.@microsoft/signalr (D:\home\site\wwwroot\server.js:264546:18)
    at webpack_require (D:\home\site\wwwroot\server.js:248813:30)
    at Object../src/app/shared/services/signalR/signarRService.ts (D:\home\site\wwwroot\server.js:263030:17)
    at webpack_require (D:\home\site\wwwroot\server.js:248813:30)

我检查了一下,我们可以在dist /浏览器中找到signalr.js文件。我们正在使用最新的软件包版本。互联网上发现的所有相关信息甚至都无济于事。

使用SignalR Framework版本,一切正常。

已经过了一个星期了。但是,我们仍然不明白为什么它会继续发生。 我们尝试了什么:

  • 将signalR软件包降级到较低版本
  • 卸载后,一切正常。
  • 升级npm和节点版本
  • 在资产中复制signalr.js并使用它(当然是个坏主意)
  • 我检查了dotnet / signalr github中的每个问题,但什么都没做
  • 我停止计数...

也许Azure有一些特别之处。我们不能说。所以我们需要帮助。

谢谢!

我们的角度服务

import ...;
import { HubConnection, HubConnectionBuilder, HubConnectionState } from '@microsoft/signalr';

@Injectable({
    providedIn: 'root'
})
export class SignalRService {

    private readonly frontHub: string = 'FrontHub';
    private readonly BroadCastAuditStatus: string = 'BroadCastAuditStatus';
    private readonly SubscribeToAuditStatutUpdate: string = 'SubscribeToAuditStatutUpdate';

    private hubConnection: HubConnection;

    constructor(private store: Store<AppState>) {}

    public listenToAuditedAccountStatus(accountIds: Array<string>, userId: number) {
        const subscribeAccountStatusUpdateRequest = new SubscribeAccountStatusUpdateRequestDto(userId, accountIds);
        if (this.hubConnection &&
            this.hubConnection.state === HubConnectionState.Connected) {
            this.subscribeToAuditStatutUpdate(subscribeAccountStatusUpdateRequest);
        } else {
            this.startConnection().then(() => {
                this.subscribeToAuditStatutUpdate(subscribeAccountStatusUpdateRequest);
            });
        }
    }

    private startConnection() {
        this.hubConnection = new HubConnectionBuilder()
          .withUrl(environment.webSignalR + '/' + this.frontHub)
          .build();

        this.hubConnection.on(this.BroadCastAuditStatus, (googleAdsAccountDto: GoogleAdsAccountDTO) => {
            this.store.dispatch(DoUpdateStatusAccountAuditedAction({ payload: googleAdsAccountDto }));
        });

        return this.hubConnection.start()
        .then(() => console.log('Connection started!'))
        .catch(err => console.log('Error while establishing connection :('));
    }

    private subscribeToAuditStatutUpdate = (subscribeAccountStatusUpdateRequest: SubscribeAccountStatusUpdateRequestDto) => {
        this.hubConnection.invoke(this.SubscribeToAuditStatutUpdate, subscribeAccountStatusUpdateRequest);
    }
}

Package.json

{
  "name": "seiso",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "scripts": {
    "ng": "ng",
    "build": "ng build --prod",
    "start": "ng serve",
    "test": "ng test",
    "lint": "tslint ./src/**/*.ts -t verbose",
    "e2e": "ng e2e",
    "start:fr": "ng serve --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",
    "build:fr": "ng build --prod --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",
    "extract": "ng xi18n --outputPath=src/locale",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "build:ssr:staging": "npm run build:client-and-server-bundles-staging && npm run webpack:server",
    "build:ssr:testing": "npm run build:client-and-server-bundles-testing && npm run webpack:server",
    "serve:ssr": "node dist/server",
    "build:client-and-server-bundles": "ng build --prod && ng run seiso:server:production",
    "build:client-and-server-bundles-staging": "ng build --configuration=staging && ng run seiso:server:staging",
    "build:client-and-server-bundles-testing": "ng build --configuration=testing && ng run seiso:server:testing",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "prepare-azure-app": "copy web.config dist && cd dist && mkdir dist && mv browser server ./dist"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "^8.1.1",
    "@angular/cdk": "^8.0.2",
    "@angular/common": "^8.1.1",
    "@angular/compiler": "^8.1.1",
    "@angular/core": "^8.1.1",
    "@angular/forms": "^8.1.1",
    "@angular/material": "^8.0.2",
    "@angular/platform-browser": "^8.1.1",
    "@angular/platform-browser-dynamic": "^8.1.1",
    "@angular/platform-server": "^8.1.1",
    "@angular/router": "^8.1.1",
    "@gilsdav/ngx-translate-router": "~2.0.1",
    "@gilsdav/ngx-translate-router-http-loader": "~1.0.0",
    "@microsoft/signalr": "^3.1.2",
    "@ngrx/effects": "^8.2.0",
    "@ngrx/store": "^8.2.0",
    "@ngrx/store-devtools": "^6.0.0",
    "@nguniversal/express-engine": "~8.1.1",
    "@nguniversal/module-map-ngfactory-loader": "~8.1.1",
    "@ngx-cache/core": "~7.0.0",
    "@ngx-translate/core": "~11.0.1",
    "@ngx-translate/http-loader": "~4.0.0",
    "@nicky-lenaers/ngx-scroll-to": "^2.0.0",
    "angular-in-memory-web-api": "~0.8.0",
    "core-js": "~2.5.7",
    "express": "^4.15.2",
    "hammerjs": "^2.0.8",
    "localize-router-lazy-universal-module-loader": "1.0.0-ntr",
    "moment": "^2.24.0",
    "ngx-clipboard": "^12.2.0",
    "ngx-countdown": "^8.0.3",
    "ngx-custom-validators": "^8.0.0",
    "ngx-device-detector": "^1.3.9",
    "roboto-fontface": "^0.10.0",
    "rxjs": "~6.4.0",
    "ts-loader": "~5.3.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.1",
    "@angular/compiler-cli": "^8.1.1",
    "@angular/language-service": "^8.1.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "karma-phantomjs-launcher": "~1.0.2",
    "lodash": "^4.17.14",
    "phantomjs-prebuilt": "^2.1.7",
    "protractor": "~5.4.0",
    "ts-loader": "^5.2.0",
    "ts-node": "~7.0.1",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3",
    "webpack-cli": "^3.3.6"
  },
  "repository": {}
}

1 个答案:

答案 0 :(得分:0)

只需解决该问题即可。 我发现缺少的不是一个而是三个依赖项。因此,在“ npm install”之后,我在管道Azure DevOps中添加了一个任务:npm install request eventsource ws。

如果您的节点版本在您的应用程序服务上过旧,则“ ws”将无法编译。因此,在我的Azure App Service配置中,我将“ WEBSITE_NODE_DEFAULT_VERSION”从6.3.1设置为10.16.3。

重新启动您的应用程序服务并重新启动管道。

我希望它可以帮助解决此问题的人!

Task "npm install request eventsource ws"