Browser-sync: scripts will not load from the parent directory

Question

I am trying to get browser sync to work in my project and not use live-server

The structure of the application is as follows:

personal-app
├── node_modules
└── src
    ├── app
    │   └── app.ts
    └── index.html  

in index.html scripts are loaded from node_modules dir

<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>

when I use live-server it loads the scripts and works fine, but since I switched to browser synchronization, the scripts do not load. here is the code in gulpfile.js:

gulp.task('serve', function() {
    browserSync.init({
        server: {
            baseDir: "./src"
        }
    });
    gulp.watch(sassfiles, ['sass']);
    gulp.watch(htmlfiles).on('change', browserSync.reload);
});

when I pass the src path as the base dir the baseDir: "./src" site works, but the scripts do not load

but when i change it to baseDir: "./"

GET/, , "/src" URL- chrome, " http://localhost:3000/src", .

, - baseDir.

baseDir : "./", index.html .

-?

Answer 1

baseDir . src, index.html.

gulp.task('serve', function() {
    browserSync.init({
        server: {
            baseDir: ["./", "./src"]   //added multiple directories 
        }
    });
    gulp.watch(sassfiles, ['sass']);
    gulp.watch(htmlfiles).on('change', browserSync.reload);
});