Angular2-quickstart not loading, no errors

Question

I followed Angular.io's typescript tutorial to the T - all code is the same as shown at the bottom, as well as the file structure.

When I start the server, with npm start, the log shows:

 tsc && concurrently "npm run tsc:w" "npm run lite"

  [0]
  [0] > [email protected] tsc:w /Users/jr/angular2-quickstart
  [0] > tsc -w
  [0]
  [1]
  [1] > [email protected] lite /Users/jr/angular2-quickstart
  [1] > lite-server
  [1]
  [1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using  lite-   server defaults...
  [1] ** browser-sync config **
  [1] { injectChanges: false,
  [1]   files: [ './**/*.{html,htm,css,js}' ],
  [1]   watchOptions: { ignored: 'node_modules' },
  [1]   server: { baseDir: './', middleware: [ [Function], [Function] ] } }
  [1] [BS] Access URLs:
  [1]  --------------------------------------
  [1]        Local: http://localhost:3000
  [1]     External: http://192.168.0.181:3000
  [1]  --------------------------------------
  [1]           UI: http://localhost:3001
  [1]  UI External: http://192.168.0.181:3001
  [1]  --------------------------------------
  [1] [BS] Serving files from: ./
  [1] [BS] Watching files...
  [0] 10:21:10 PM - Compilation complete. Watching for file changes.
  [1] [BS] File changed: app/app.component.js
  [1] [BS] File changed: app/main.js

The html page shows nothing, and the console gives a 500 internal error. When doing NPM install there were no errors at the bottom, but when I do npm ls, I get:

npm ERR! peer dep missing: @angular/[email protected], required by [email protected]
npm ERR! peer dep missing: @angular/[email protected], required by [email protected]
npm ERR! peer dep missing: [email protected], required by [email protected]
npm ERR! peer dep missing: es6-shim@^0.35.0, required by [email protected]
npm ERR! extraneous: [email protected] /Users/jr/angular2-quickstart/node_modules/angular2

I've been chasing my own tail for the past couple of hours trying to install dependencies, deleteing the node_module folder, and doing npm cache clean.

Much love if you can lend a hand

Edit: Using NPM 3.10.2 and Node 6.2.2

EDIT2: Tried the above steps on a different machine, and it worked. Will update back on results from debugging first machine.

EDIT3: Removed all global npm packages, nothing. Here's the code:

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.2",
    "@angular/compiler":  "2.0.0-rc.3",
    "@angular/core":  "2.0.0-rc.3",
    "@angular/http":  "2.0.0-rc.2",
    "@angular/forms": "0.1.1",
    "reflect-metadata": "0.1.2",
    "@angular/http":  "2.0.0-rc.3",
    "@angular/platform-browser":  "2.0.0-rc.3",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.3",
    "@angular/router":  "3.0.0-alpha.7",
    "@angular/router-deprecated":  "2.0.0-rc.2",
    "@angular/upgrade":  "2.0.0-rc.3",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.12",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Structure

@RidaBENHAMMANE Failed to load resource: the server responded with a status of 500 (Internal Server Error) — Jack Rothrock
– Jack Rothrock, Commented Jun 28, 2016 at 5:00
change in tsconfig.json with es6 and re run "compilerOptions": { "target": "es6", — xkeshav
– xkeshav, Commented Jun 28, 2016 at 5:18
@pro.mean it threw a lot of similar errors: node_modules/typescript/lib/lib.es6.d.ts(17,14): error TS2300: Duplicate identifier 'PropertyKey' ... This happened when both es6-shim was installed and when it was not. If that matters — Jack Rothrock
– Jack Rothrock, Commented Jun 28, 2016 at 5:29
will you show the code of tsconfig.json and typings.json files here — xkeshav
– xkeshav, Commented Jun 28, 2016 at 6:06

parnesh sharma · Accepted Answer · 2016-06-28 06:19:35Z

0

check the filename of the files you have created manually , i did the same mistake here

answered Jun 28, 2016 at 6:19

parnesh sharma

362 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jack Rothrock Over a year ago

Unfortunately, this isn't the case. This originally began when I was trying to use this github repo, got fed up with it, and tried doing it the manual way.

parnesh sharma Over a year ago

@JackRothrock i tried the folder structure using the tutorial available here angular.io/docs/ts/latest/tutorial . try creating the same , it has clear explanation of what to do and what not to do .

Jack Rothrock Over a year ago

Yeah, I got it to work on a different machine following the same things as I did above, and with having the problems with the other repo, it leads me to believe it's something on this machine - what idk yet

Jack Rothrock · Accepted Answer · 2016-06-30 18:56:39Z

0

Okay, for anyone else having this problem, the issue that I was having was that there was a dead process on the port. For those of you who are using a Mac. Check out this post:

Find (and kill) process locking port 3000 on Mac

answered Jun 30, 2016 at 18:56

Jack Rothrock

4271 gold badge9 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular2-quickstart not loading, no errors

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related