3

I am trying to run angular2 quickstart example of plunker in my local environment.

For this, I followed these steps-

  1. Download all files from https://angular.io/resources/live-examples/quickstart/ts/plnkr.html into local folder on my machine.

  2. Double-click on index.html to run application.

this way, I am able to run application on Firefox. but I get an error on chrome-

zone.js@0.6.12?main=browser:101 XMLHttpRequest cannot load file:///C:/Adi/angular2-RC5-plunker/app/main.ts. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

How do I run this quick-start application on chrome browser successfully?

chrome error screenshot

AlikElzin-kilaka
  • 34,335
  • 35
  • 194
  • 277
Adi99
  • 65
  • 8
  • The quick start has a node lite server built into it. I would recommend using this instead. https://github.com/angular/quickstart – khollenbeck Aug 22 '16 at 16:05
  • **Unbelievable** that there's no way to to run a project when you have the complete source code. What's missing? Is the configuration missing? Are the dependencies missing??? In Java, for example, there's a single file, pom or gradle, that provides you with all the configuration/dependencies needed to run a project. What's missing in Angular 2??? – AlikElzin-kilaka Feb 25 '17 at 16:13
  • Also, strange that this runs on Firefox but not on Chrome. I thought Angular requires some server side functionality for part of it's core components. Though I would be really glad it wasn't the case. See [Why does Angular require a server in their tutorials?](http://stackoverflow.com/q/31624686/435605). – AlikElzin-kilaka Feb 26 '17 at 06:08

1 Answers1

1

Combining steps to fix with the process explanation. Follow the numbered fixes to fix the configuration.

* Solution based on npm as used in the official Angular 2 guide.

Angular 2 plunker link redirected me to an Angular 2 QuickStart example (which is different from Plunker's Angular 2 template - FYI).

I downloaded Plunker's project, as Adi99 did.

I then tried following the steps in Angular's QuickStart setup but failed on npm install.

Error: ENOENT: no such file or directory, open '/home/alik/Dev/help2/package.json'.

Fix step 1: Download package.json from Angular 2 QuickStart source code, put it in the root's project folder and change in the file src with ..

Running npm install now passes successfully, probably downloading all the necessary dependencies.

The next step in the QuickStart tutorial is to run npm start which fails on error TS5057: Cannot find a tsconfig.json file at the specified directory: './'.

Fix step 2: Download tsconfig.json from Angular 2 QuickStart source code and put it in the root's project folder..

Running npm start now passes successfully, creating the server and opening a browser page with the address http://localhost:3000/, rendering Angular 2 code successfully with the message:

Hello Angular

Hope this helped and Angular team :) will make the initial configuration easier. It's a bad architecture to have lots of configuration files. Hard to understand what's needed, why and how to change it. For example, in Angular's QuickStart source project, there are 10 configuration files: 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, src/systemjs.config.js, src/tsconfig.json

AlikElzin-kilaka
  • 34,335
  • 35
  • 194
  • 277