Angular 2 disable mirror of browsersync

Question

I use a template for my Angular 2 project. This project doesn't use gulp, or webpack. I'm really new on Angular 2. If I open a multiple web browsers on different computers it mirror all of I do on specific one. How can I disable this? I don't see any config file of my port (it is 3000 but I don't know how to change it) or any config file for browser sync... I'm so confused!

Also, I start my project with this command:

npm start

Here is my files:

UPDATE 1

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'angular2-jwt': 'npm:angular2-jwt/angular2-jwt.js',
      'ng2-toasty': 'node_modules/ng2-toasty/bundles/index.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      "angular2-jwt": {
                "defaultExtension": "js"
            },
    }
  });
})(this);


package.json

{
  "name": "cayena-oak",
  "private": true,
  "version": "1.1.1",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "engines": {
    "node": "5.9.1"
  },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/creativetimofficial/light-bootstrap-dashboard-angular.git"
  },
  "bugs": {
    "url": "https://github.com/creativetimofficial/light-bootstrap-dashboard-angular/issues"
  },
  "dependencies": {
    "@angular/common": "~2.2.2",
    "@angular/compiler": "~2.2.2",
    "@angular/core": "~2.2.2",
    "@angular/forms": "~2.2.2",
    "@angular/http": "~2.2.2",
    "@angular/platform-browser": "~2.2.2",
    "@angular/platform-browser-dynamic": "~2.2.2",
    "@angular/router": "~3.2.2",
    "@angular/upgrade": "~2.2.2",
    "@types/core-js": "0.9.35",
    "@types/node": "^6.0.45",
    "angular-in-memory-web-api": "~0.1.13",
    "angular2-chartist": "~0.10.1",
    "angular2-google-maps": "~0.16.0",
    "angular2-jwt": "^0.1.28",
    "chartist": "~0.9.8",
    "compression": "^1.6.2",
    "core-js": "2.4.1",
    "jquery": "~3.1.1",
    "ng2-bootstrap": "~1.1.16",
    "ng2-toasty": "^2.5.0",
    "reflect-metadata": "~0.1.8",
    "rxjs": "5.0.0-rc.5",
    "systemjs": "~0.19.41",
    "systemjs-builder": "^0.15.17",
    "typescript": "^2.0.3",
    "yargs": "^4.7.1",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@types/chartist": "~0.9.33",
    "@types/core-js": "~0.9.34",
    "@types/jquery": "~2.0.34",
    "@types/node": "~6.0.45",
    "concurrently": "^3.0.0",
    "lite-server": "~2.2.2",
    "typescript": "~2.0.3",
    "ejs": ">= 0.0.1",
    "express": "~4.9.8",
    "nodemon": "^1.11.0",
    "systemjs": "0.19.39"
  }
}

Anybody can help me?

score 4 · Accepted Answer · edited May 23 '17 at 12:02

4

You need to find where your browserSync instance is initialized, and change ghostMode to false.

Search your code repository for browserSync.init and see if you can see where is initialized, and then you can modify the init options. I would think it would be in systemjs.config.js but it's hard to say without seeing your code.

If you can't find it, try tracing through your package configuration, start at packages.json and find your start command, see what that runs, and what files it loads, and trace until you find the browserSync initialization.

Reference: How to disable cross-device action mirroring functionality of BrowserSync? (GhostMode)

Edit

Regarding your comment, it looks like you're using lite-server in order to run your application. To override the default browsersync configuration, you need to create a file named my-bs-config.json to overwrite the default configuration, and put in your file:

{
  "ghost": false
}

And then also change your "start" command in package.json to run lite-server with the new configuration file, something along these lines:

lite-server -c my-bs-config.json

So your new command would be:

"start": "tsc && concurrently \"tsc -w\" \"lite-server -c my-bs-config.json\" "

I haven't tested that to ensure it works, so you may need to tweak that command a bit to get it to work. If you have trouble, leave a comment and I'll try to fix the command for you.

This is based off of the lite-server documentation, which can be found here.

edited May 23 '17 at 12:02

Community

1
1

answered Apr 05 '17 at 21:34

Adam

4,445
1
31
49

Thanks for your answer @Adam i don't see any "start" on any of my files :( i will update my answer with these files contents. – Ali Briceño Apr 05 '17 at 21:41
My bad! I find this on packages.json: "start": "tsc && concurrently \"tsc -w\" \"lite-server\" " – Ali Briceño Apr 05 '17 at 21:45
Check out my edit, it looks like `lite-server` uses browser sync by default, and you just need to override the configuration. – Adam Apr 05 '17 at 21:53
Thanks a lot my friend! I will review this and I tell you if works – Ali Briceño Apr 05 '17 at 22:59
Hi my friend this works like a charm! Thanks a lot. I still have a question... maybe you can help me. How can i turn this project to a production env? I see that other projects have a "dist" folder... – Ali Briceño Apr 06 '17 at 01:28
That's a bit out of the scope of this question. It's also pretty broad, since it's hard to know without looking at your code (specifically your `tsconfig.json` file. If your code is being built to your `dist` directory, that should be compiled, ready to run, JavaScript code. Deploying that to production is a different question though because that depends on the server you are running and how that is setup. – Adam Apr 06 '17 at 14:58
Ok Adam thanks for your help. Do you suggest to me to open a new question? – Ali Briceño Apr 06 '17 at 15:00
Yes, that would be my recommendation. In that question you should post the contents of your your `systemjs.config.js` and `tsconfig.json` files. – Adam Apr 06 '17 at 15:00
Thanks @Adam. Here is my new question if you can help me. http://stackoverflow.com/questions/43259004/how-to-generate-a-production-app-on-angular-4 – Ali Briceño Apr 06 '17 at 15:07

score 0 · Answer 2 · edited Jan 24 '18 at 11:17

0

For me I needed to add;

{"ghostMode": false}

on a newly created bs-config.json to make it work.

edited Jan 24 '18 at 11:17

WhatsThePoint

3,395
8
31
53

answered Jan 24 '18 at 09:58

SyamAhmad

45
1
8

Angular 2 disable mirror of browsersync

2 Answers2