SignalR 核心 Angular SSR - 找不到模块 'request'
SignalR Core Angular SSR - Cannot find module 'request'
我们刚刚将 API 从 .NET Framework 升级到 .NET Core。我们迁移到了 SignalR Core。因此，我们还必须在 Angular 前端升级我们的 SignalR 客户端。没问题。一切都在本地工作。但是当我们在 Azure App Service 上部署时，我们得到这个错误：
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/browser 中找到 signalr.js 个文件。我们使用的是最新的软件包版本。在互联网上找到的所有相关内容都没有帮助。
使用 SignalR Framework 版本，一切正常。
我们已经花了一个星期的时间来解决这个问题。但是，我们仍然不明白为什么它会不断发生。
我们尝试了什么：
- 将 signalR 包降级到较低版本
- 卸载后一切正常。
- 升级 npm 和节点版本
- 将 signalr.js 复制到资产中并改为使用它（当然是个坏主意）
- 我检查了每个问题 dotnet/signalr github 但什么也没做
- 然后我停止数了...
也许 Azure 有一些特别之处。我们不能说。所以我们需要帮助。
谢谢！
我们的angular服务
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": {}
}
刚刚解决了这个问题。
我发现缺少一个依赖项，而是三个依赖项。所以我在我的管道 Azure DevOps 中添加了一个任务，就在“npm install”之后：npm install request eventsource ws.
如果您的应用服务上的节点版本太旧，“ws”将无法编译。因此，在我的 Azure 应用服务配置中，我将“WEBSITE_NODE_DEFAULT_VERSION”从 6.3.1 设置为 10.16.3。
重新启动您的应用服务并重新启动您的管道。
我希望它能帮助人们解决这个问题！
Task "npm install request eventsource ws"
我们刚刚将 API 从 .NET Framework 升级到 .NET Core。我们迁移到了 SignalR Core。因此，我们还必须在 Angular 前端升级我们的 SignalR 客户端。没问题。一切都在本地工作。但是当我们在 Azure App Service 上部署时，我们得到这个错误：
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/browser 中找到 signalr.js 个文件。我们使用的是最新的软件包版本。在互联网上找到的所有相关内容都没有帮助。
使用 SignalR Framework 版本，一切正常。
我们已经花了一个星期的时间来解决这个问题。但是，我们仍然不明白为什么它会不断发生。 我们尝试了什么：
- 将 signalR 包降级到较低版本
- 卸载后一切正常。
- 升级 npm 和节点版本
- 将 signalr.js 复制到资产中并改为使用它（当然是个坏主意）
- 我检查了每个问题 dotnet/signalr github 但什么也没做
- 然后我停止数了...
也许 Azure 有一些特别之处。我们不能说。所以我们需要帮助。
谢谢！
我们的angular服务
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": {}
}
刚刚解决了这个问题。 我发现缺少一个依赖项，而是三个依赖项。所以我在我的管道 Azure DevOps 中添加了一个任务，就在“npm install”之后：npm install request eventsource ws.
如果您的应用服务上的节点版本太旧，“ws”将无法编译。因此，在我的 Azure 应用服务配置中，我将“WEBSITE_NODE_DEFAULT_VERSION”从 6.3.1 设置为 10.16.3。
重新启动您的应用服务并重新启动您的管道。
我希望它能帮助人们解决这个问题！
Task "npm install request eventsource ws"