Question

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

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

应用程序找不到/app/boot.js，因为我正在使用gulp构建过程提供应用程序。我无法使用我的＆＃34; gulp serve＆＃34;访问任何目录。构建过程，正在使用浏览器同步。如何将SystemJS与浏览器同步结合使用，以便找到我的boot.js文件？

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

Answer 1

好吧，你没有发布代码，我们会在你的代码中检测到什么错误。但是浏览器同步是一个非常好的组合，使我们的项目顺利运行。我认为你没有正确导入你的bootstrap文件可能是错误。

我还是为我的项目使用了相同的项目设置。我在angular2中使用gulp任务和browsersync你可以参考我的存储库获取帮助。这个回购可能会帮助你找出错误

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

Answer 2

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

我吸取的教训：

加载脚本和配置库的顺序至关重要。
需要先设置System.config，然后才能包含Rx＆amp;角度库。
然后你可以导入和引导应用程序。

按照@ pardeep-jain的建议来查看他的datepicker回购，这对我有用。

<!-- 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，浏览器同步设置

2 个答案: