SystemJS，浏览器同步设置

Question

我正在尝试按照 angular 2 设置指南进行操作，但遇到了问题。我正在使用 browsersync，我似乎无法弄清楚如何让这段代码工作。

 <script>
   .......
  System.import('./app/boot')
        .then(null, console.error.bind(console));
  </script>

应用程序找不到 /app/boot.js，因为我正在使用 gulp 构建过程提供应用程序。我无法通过 "gulp serve" 构建过程访问任何目录，并且正在使用浏览器同步。我怎样才能将 SystemJS 与浏览器同步结合使用，以便它可以找到我的 boot.js 文件？

抱歉，如果这是一个简单的问题。我是这种构建过程的新手，通常只包含文件会很简单。谢谢

Answer 1

好吧，您并没有从我们检测到您的代码中有什么错误的地方发布您的代码。但是是的 gulp 与 browsersync 是使我们的项目运行顺利进行的非常好的组合。我认为您没有正确导入 bootstrap 文件，这可能是错误所在。

我仍然为我的项目使用相同的项目设置。我在 angular2 中使用了 gulp 任务和 browsersync 你可以参考我的存储库寻求帮助。这个 repo 可以帮助你找出错误是什么

https://github.com/MrPardeep/Angular2-DatePicker

Answer 2

更改构建过程以将所有内容编译到 dist 文件夹而不是根目录后，我遇到了类似的问题。我尝试在 System.config 中调整 baseUrl、添加地图、路径、手动将 .js 扩展名添加到导入等

我学到的教训：

加载脚本和配置库的顺序至关重要。
System.config 需要在包含 Rx 和 angular 库之前设置。
然后您可以导入 bootstrap 应用程序。

按照@pardeep-jain 的建议查看他的日期选择器存储库，这对我有用。

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="js/libs/es6-shim.min.js"></script>
<script src="js/libs/system-polyfills.js"></script>
<script src="js/libs/angular2-polyfills.js"></script>
<script src="js/libs/system.src.js"></script>

 <script>
    System.config({
        defaultJSExtensions: true,
         map: {
            rxjs: '/node_modules/rxjs'
        },
        packages: {
            rxjs: {
            defaultExtension: 'js'
            }
        }
    });
  </script>

<script src="js/libs/Rx.js"></script>
<script src="js/libs/angular2.dev.js"></script>
<script src="js/libs/router.dev.js"></script>
<script src="js/libs/http.dev.js"></script>

<script>
    System.import('js/boot');
</script>

<link rel="stylesheet" href="css/app.css">
</head>
<base href="/">
<!-- 3. Display the application -->
<body>
<app>Loading...</app>

SystemJS，浏览器同步设置

SystemJS, Browser Sync Setup

html

javascript

systemjs

angular