在chrome浏览器上运行快速启动的plunker？

Question

我正在尝试在我的本地环境中运行有关plunker的angular2 quickstart示例。

为此，我遵循了以下步骤 -

1. 将https://angular.io/resources/live-examples/quickstart/ts/plnkr.html中的所有文件下载到我计算机上的本地文件夹中。

2. 双击index.html以运行应用程序。

通过这种方式，我可以在Firefox上运行应用程序。但我在chrome上遇到错误 -

  

zone.js@0.6.12?main = browser：101 XMLHttpRequest无法加载   文件：/// C：/Adi/angular2-RC5-plunker/app/main.ts。交叉原始请求   只支持协议方案：http，data，chrome，   chrome-extension，https，chrome-extension-resource。

如何成功在Chrome浏览器上运行此快速启动应用程序？

chrome error screenshot

Answer 1

结合步骤来修复流程说明。按照编号的修复程序修复配置。

*基于official Angular 2 guide中使用的npm的解决方案。

Angular 2 plunker link将我重定向到Angular 2 QuickStart示例（与Plunker的Angular 2模板 - FYI不同）。

我按照Adi99的说法下载了Plunker的项目。

然后我尝试按照Angular QuickStart setup中的步骤操作，但在npm install上失败。

错误：ENOENT: no such file or directory, open '/home/alik/Dev/help2/package.json'。

修复第1步：从Angular 2 QuickStart source code下载package.json，将其放在根目录的项目文件夹中，并使用src更改文件.

现在正在运行npm install成功通过，可能会下载所有必需的依赖项。

快速入门教程的下一步是运行在npm start上失败的error TS5057: Cannot find a tsconfig.json file at the specified directory: './'。

修复第2步：从Angular 2 QuickStart source code下载tsconfig.json并将其放在根目录的项目文件夹中。

现在正在运行npm start成功通过，创建服务器并打开地址为http://localhost:3000/的浏览器页面，并使用以下消息成功呈现Angular 2代码：

  

Hello Angular

希望这有所帮助， Angular团队：）将使初始配置更容易。拥有大量配置文件是一个糟糕的架构。很难理解需要什么，为什么以及如何改变它。 例如，在Angular's QuickStart source project中，有10个配置文件：bs-config.e2e.json，bs-config.json，karma-test-shim.js，karma.conf.js，package.json，{{1} }，protractor.config.js，tslint.json，src/systemjs.config.extras.js，src/systemjs.config.js