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

【问题标题】：Running quick-start plunker on chrome browser?在 chrome 浏览器上运行快速启动 plunker？
【发布时间】：2017-02-26 02:49:34
【问题描述】：

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

为此，我遵循了这些步骤-

将https://angular.io/resources/live-examples/quickstart/ts/plnkr.html中的所有文件下载到我机器上的本地文件夹中。
双击 index.html 运行应用程序。

这样，我可以在 Firefox 上运行应用程序。但我在 chrome 上遇到错误-

zone.js@0.6.12?main=browser:101 XMLHttpRequest 无法加载 file:///C:/Adi/angular2-RC5-plunker/app/main.ts。跨源请求仅支持协议方案：http、data、chrome、 chrome-extension、https、chrome-extension-resource。

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

chrome error screenshot

【问题讨论】：

快速入门内置了一个 node lite 服务器。我建议改用这个。 github.com/angular/quickstart
难以置信当你有完整的源代码时，没有办法运行一个项目。少了什么东西？是否缺少配置？是否缺少依赖项？？？例如，在 Java 中，只有一个文件 pom 或 gradle 为您提供运行项目所需的所有配置/依赖项。 Angular 2 中缺少什么？？？
另外，奇怪的是它可以在 Firefox 上运行，但不能在 Chrome 上运行。我认为 Angular 的部分核心组件需要一些服务器端功能。虽然我真的很高兴事实并非如此。见Why does Angular require a server in their tutorials?。

标签： angular plunker

【解决方案1】：

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

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

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

我下载了 Plunker 的项目，和 Adi99 一样。

然后我尝试按照 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代码并显示消息：

你好角

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

【讨论】：