Problem in angular design

Asked

Viewed 242 times

0

I went to try to install the socket.io-client in my project and ruined my system

Is giving the following message:

inserir a descrição da imagem aqui

Unhandled Promise rejection Error: Zone.js has Detected that Zoneawarepromise (window|global).Promise has been overwritten.

I have already removed the node_modules folder and package-lock.json and the problem continues

How to solve the problem?

[EDIT]

My app.module.ts is like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AppRoutingModule } from './app-routing.module';

import { FrameComponent } from './shared/frame/frame.component';
import { HeaderComponent } from './shared/header/header.component';
import { FooterComponent } from './shared/footer/footer.component';
import { EnergiaServiceService } from './shared/provider/energia-service.service';
import { HttpClientModule } from '@angular/common/http';
import { FusionChartsModule } from 'angular-fusioncharts'
//import import FusionChart library and chart modules
import * as FusionCharts from 'fusioncharts'
import * as Charts from 'fusioncharts/fusioncharts.charts' //barras
import * as Widgets from 'fusioncharts/fusioncharts.widgets'; //gauge
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import { GaugeComponent } from './shared/gauge/gauge.component';
import { MedidorComponent } from './medidor/medidor.component'
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { AlertComponent } from './shared/alert/alert.component';



//Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot( FusionCharts, Widgets, FusionTheme )

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,    
    FrameComponent, HeaderComponent, FooterComponent, GaugeComponent, MedidorComponent, AlertComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FusionChartsModule
  ],
  providers: [
     EnergiaServiceService
     //{provide: LocationStrategy, useClass: HashLocationStrategy}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

My package.json looks like this:

{
  "name": "poraque-monitoramento",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.2.7",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.3.29",
    "@types/jquery-knob": "^1.2.31",
    "@types/node": "~6.0.60",
    "admin-lte": "^2.4.9",
    "angular-fusioncharts": "^3.0.1",
    "codelyzer": "~3.0.1",
    "fusioncharts": "^3.13.4",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "jquery": "^3.3.1",
    "jquery-knob": "^1.2.11",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Man .angular-cli.json is like this:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "poraque-monitoramento"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/admin-lte/bower_components/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/admin-lte/bower_components/font-awesome/css/font-awesome.min.css",
        "../node_modules/admin-lte/bower_components/Ionicons/css/ionicons.min.css",
        "../node_modules/admin-lte/dist/css/AdminLTE.min.css",
        "../node_modules/admin-lte/dist/css/skins/_all-skins.min.css",
        "../node_modules/admin-lte/bower_components/jvectormap/jquery-jvectormap.css",
        "../node_modules/admin-lte/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css",
        "../node_modules/admin-lte/bower_components/bootstrap-daterangepicker/daterangepicker.css",
        "../node_modules/admin-lte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/admin-lte/bower_components/jquery/dist/jquery.min.js",
        "../node_modules/admin-lte/bower_components/jquery-ui/jquery-ui.min.js",
        "../node_modules/admin-lte/bower_components/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/admin-lte/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js",
        "../node_modules/admin-lte/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js",
        "../node_modules/admin-lte/plugins/jvectormap/jquery-jvectormap-world-mill-en.js",
        "../node_modules/admin-lte/bower_components/jquery-knob/dist/jquery.knob.min.js",
        "../node_modules/admin-lte/bower_components/moment/min/moment.min.js",
        "../node_modules/admin-lte/bower_components/bootstrap-daterangepicker/daterangepicker.js",
        "../node_modules/admin-lte/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js",
        "../node_modules/admin-lte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js",
        "../node_modules/admin-lte/bower_components/jquery-slimscroll/jquery.slimscroll.min.js",
        "../node_modules/admin-lte/bower_components/fastclick/lib/fastclick.js",
        "../node_modules/admin-lte/dist/js/adminlte.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}
node.js angular socket npm

  • you used this ngx-socket-io package ?

  • I tried, but he was the one with the problem, so I switched to the socket.io-client

  • The ideal is to use this ngx-socket-io because they have the necessary Wrappers from Angular.... I looked here in their github and it seems quiet to configure https://github.com/rodgc/ngx-socket-io, you can include their main module, for me to try to reproduce here?

  • or create here https://stackblitz.com

  • I edited and added the app.module.ts, the package.json and the angular-cli

  • It’s just that I wouldn’t want to start my project again because of this failure

  • I put an answer, test and tell me the result, pf.

  • Let’s go continue this discussion in chat.

  • Pass me your e-mail in chat

Show 4 more comments

1 answer

0

Try this:

npm install ngx-socket-io

Your app module should look like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AppRoutingModule } from './app-routing.module';

import { FrameComponent } from './shared/frame/frame.component';
import { HeaderComponent } from './shared/header/header.component';
import { FooterComponent } from './shared/footer/footer.component';
import { EnergiaServiceService } from './shared/provider/energia-service.service';
import { HttpClientModule } from '@angular/common/http';
import { FusionChartsModule } from 'angular-fusioncharts'
//import import FusionChart library and chart modules
import * as FusionCharts from 'fusioncharts'
import * as Charts from 'fusioncharts/fusioncharts.charts' //barras
import * as Widgets from 'fusioncharts/fusioncharts.widgets'; //gauge
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import { GaugeComponent } from './shared/gauge/gauge.component';
import { MedidorComponent } from './medidor/medidor.component'
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { AlertComponent } from './shared/alert/alert.component';



//Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot( FusionCharts, Widgets, FusionTheme )
const config: SocketIoConfig = { url: 'http://localhost:8988', options: {} };

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,    
    FrameComponent, HeaderComponent, FooterComponent, GaugeComponent, MedidorComponent, AlertComponent
  ],
  imports: [
    BrowserModule,
    SocketIoModule.forRoot(config),
    AppRoutingModule,
    HttpClientModule,
    FusionChartsModule
  ],
  providers: [
     EnergiaServiceService
     //{provide: LocationStrategy, useClass: HashLocationStrategy}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

And you must use it like this:

import { Injectable } from '@angular/core';
import { Socket } from 'ngx-socket-io';

@Injectable()
export class ChatService {

    constructor(private socket: Socket) { }

    sendMessage(msg: string){
        this.socket.emit("message", msg);
    }
     getMessage() {
        return this.socket
            .fromEvent("message")
            .map( data => data.msg );
    }
}

What your application looks like now?

Browser other questions tagged node.js angular socket npm

You are not signed in. Login or sign up in order to post.