Angular 未找到模块

Question

我正在使用 sockJS 和 STOMP 为我的项目进行聊天，在安装 2 个库时遇到各种困难后我认为我做到了（我尝试从 index.html、npm 安装甚至下载 2 min 文件并将它们放在 assets 文件夹中），过了一会儿我添加了

import * as Stomp from 'stompjs';

import * as SockJS from 'sockjs-client';

而且我的打字稿文件中没有收到更多错误（实际上它仍然给我关于那些导入声明的错误，但我点击了一个快速修复 'download missing types' 它自己解决了所以基本上我以某种方式我不知道安装了那些东西）

所以我一直在以最小的方式处理我的代码，只是为了进行快速测试，当我完成时你不知道吗？运行项目不起作用

它给了我这个错误

./node_modules/stompjs/lib/stomp-node.js:14:8-22 - Error: Module not found: Error: Can't resolve 'net' in 'C:\Users\UTENTE\Desktop\CORSO AZIENDA FORMAZIONE\angular-projects\gestionaleFrontEnd\node_modules\stompjs\lib'

我不知道如何解决这个问题，所以我要把我的东西留在这里希望你们能帮助我

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { User } from '../model/user';
import { UserService } from '../user.service';
import * as Stomp from 'stompjs';
import * as SockJS from 'sockjs-client';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css'],
})
export class ChatComponent implements OnInit {
  url = 'http://localhost:8080';
  otherUser?: User;
  thisUser: User = JSON.parse(sessionStorage.getItem('user')!);
  channelName?: string;
  socket?: WebSocket;
  stompClient?: Stomp.Client;
  newMessage = new FormControl('');

  constructor(
    private route: ActivatedRoute,
    private userService: UserService
  ) {}

  ngOnInit(): void {
    this.userService
      .getUserByNickname(this.route.snapshot.paramMap.get('user')!)
      .subscribe((data) => {
        this.otherUser = data;
        this.connectToChat();
      });
  }

  connectToChat() {
    const id1 = this.thisUser.id!;
    const nick1 = this.thisUser.nickname;
    const id2 = this.otherUser?.id!;
    const nick2 = this.otherUser?.nickname!;

    if (id1 > id2) {
      this.channelName = nick1 + '&' + nick2;
    } else {
      this.channelName = nick2 + '&' + nick1;
    }

    console.log('connecting to chat...');
    this.socket = new SockJS(this.url + '/chat');
    this.stompClient = Stomp.over(this.socket);

    this.stompClient.connect({}, (frame) => {
      //func = what to do when connection is established
      console.log('connected to: ' + frame);
      this.stompClient!.subscribe(
        '/topic/messages/' + this.channelName,
        function (response) {
          //func = what to do when client receives data (messages)
          let data = JSON.parse(response.body);
          console.log(data);
        }
      );
    });
  }

  //String sender, String t_stamp, String content
  sendMsg() {
    if (this.newMessage.value !== '') {
      this.stompClient!.send(
        '/app/chat/' + this.channelName,
        {},
        JSON.stringify({
          sender: this.thisUser.nickname,
          t_stamp: 'to be defined in server',
          content: this.newMessage.value,
        })
      );
    }
  }
}

接下来是 app.module.ts，其中错误最有可能是 idk

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
import { RegistrationComponent } from './registration/registration.component';
import { HomeComponent } from './home/home.component';
import { ConfirmationComponent } from './confirmation/confirmation.component';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';
import { UserHomeComponent } from './user-home/user-home.component';
import { NewAnnuncioComponent } from './new-annuncio/new-annuncio.component';
import { MyAnnunciComponent } from './my-annunci/my-annunci.component';
import { EditAnnuncioComponent } from './edit-annuncio/edit-annuncio.component';
import { SearchComponent } from './search/search.component';
import { SearchResultComponent } from './search-result/search-result.component';
import { OtherUserComponent } from './other-user/other-user.component';
import { OtherAnnunciComponent } from './other-annunci/other-annunci.component';
import { ViewAnnuncioComponent } from './view-annuncio/view-annuncio.component';
import { ProvaFileComponent } from './prova-file/prova-file.component';
import { FormsModule } from '@angular/forms';
import { QAndAComponent } from './q-and-a/q-and-a.component';
import { ChatComponent } from './chat/chat.component';



@NgModule({
  declarations: [
    AppComponent,
    RegistrationComponent,
    HomeComponent,
    ConfirmationComponent,
    LoginComponent,
    UserComponent,
    UserHomeComponent,
    NewAnnuncioComponent,
    MyAnnunciComponent,
    EditAnnuncioComponent,
    SearchComponent,
    SearchResultComponent,
    OtherUserComponent,
    OtherAnnunciComponent,
    ViewAnnuncioComponent,
    ProvaFileComponent,
    QAndAComponent,
    ChatComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

下一个是 package.json，因为让我失望，所以

{
  "name": "gestionale-front-end",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.1.0",
    "@angular/common": "~12.1.0",
    "@angular/compiler": "~12.1.0",
    "@angular/core": "~12.1.0",
    "@angular/forms": "~12.1.0",
    "@angular/platform-browser": "~12.1.0",
    "@angular/platform-browser-dynamic": "~12.1.0",
    "@angular/router": "~12.1.0",
    "rxjs": "~6.6.0",
    "sockjs": "^0.3.21",
    "sockjs-client": "^1.5.2",
    "stompjs": "^2.3.3",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.4",
    "@angular/cli": "~12.1.4",
    "@angular/compiler-cli": "~12.1.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "@types/sockjs-client": "^1.5.1",
    "@types/stompjs": "^2.3.5",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.3.2"
  }
}

如果你们需要我向你们展示更多内容，请告诉我

编辑：我发现这正是我的情况 https://github.com/jmesnil/stomp-websocket/issues/119 所以我尝试了他们的解决方案 (npm i net -s)

现在我只看到 index.html 和在浏览器控制台上我得到了

Uncaught ReferenceError: global is not defined at Object.5103 (vendor.js:74896)
    at __webpack_require__ (runtime.js:23)
    at Object.8263 (vendor.js:75368)
    at __webpack_require__ (runtime.js:23)
    at Object.9834 (vendor.js:75023)
    at __webpack_require__ (runtime.js:23)
    at Object.4014 (vendor.js:74613)
    at __webpack_require__ (runtime.js:23)
    at Object.1428 (vendor.js:72979)
    at __webpack_require__ (runtime.js:23)

这非常令人沮丧

Answer 1

添加

(window as any).global = window;

到 polifills 文件。

Angular 未找到模块

Angular module not found

stomp

sockjs

typescript

angular