EXCEPTION: Token must be defined!

mchavezi commented 8 years ago

My app is a simple clone of Ng2Play and following along the video on the homepage of this repo, Full Stack Angular 2 - AngularConnect, Oct 2015

When running ts-node server.ts, I get this error:

~/Sites/Angular2-Fullstack-Boilerplate/ng2-play-universal 👊  ts-node server.ts
Listening on http://localhost:3000...
EXCEPTION: Token must be defined!
STACKTRACE:
Error: Token must be defined!
    at new BaseException (angular2/src/facade/exceptions.ts:9:24)
    at new Key (angular2/src/core/di/key.ts:27:13)
    at KeyRegistry.get (angular2/src/core/di/key.ts:67:18)
    at Function.Key.get (angular2/src/core/di/key.ts:39:62)
    at resolveProvider (angular2/src/core/di/provider.ts:541:36)
    at Array.map (native)
    at Array.map (/Users/Bigbassroller/Sites/Angular2-Fullstack-Boilerplate/ng2-play-universal/node_modules/es6-shim/es6-shim.js:1113:14)
    at Object.resolveProviders (angular2/src/core/di/provider.ts:549:29)
    at Function.Injector.resolve (angular2/src/core/di/injector.ts:457:12)
    at Injector.resolveAndCreateChild (angular2/src/core/di/injector.ts:661:38)
DEPRECATION WARNING: 'enqueueTask' is no longer supported and will be removed in next major release. Use addTask/addRepeatingTask/addMicroTask
Error: Token must be defined!
    at new BaseException (angular2/src/facade/exceptions.ts:9:24)
    at new Key (angular2/src/core/di/key.ts:27:13)
    at KeyRegistry.get (angular2/src/core/di/key.ts:67:18)
    at Function.Key.get (angular2/src/core/di/key.ts:39:62)
    at resolveProvider (angular2/src/core/di/provider.ts:541:36)
    at Array.map (native)
    at Array.map (/Users/Bigbassroller/Sites/Angular2-Fullstack-Boilerplate/ng2-play-universal/node_modules/es6-shim/es6-shim.js:1113:14)
    at Object.resolveProviders (angular2/src/core/di/provider.ts:549:29)
    at Function.Injector.resolve (angular2/src/core/di/injector.ts:457:12)
    at Injector.resolveAndCreateChild (angular2/src/core/di/injector.ts:661:38)
^C

Here are my files:

src/hello.ts:

import {Component} from 'angular2/core';

@Component({
    selector: 'hello-app',
    template: `
        <h1>Hello, {{name}}!</h1>
        Say hello to: <input [value]="name" (input)="name = $event.target.value">
    `
})
export class HelloApp {
    name: string = 'World';
}

src/bootstrap.ts:

import {bootstrap} from 'angular2-universal-preview';

import {HelloApp}  from './hello'; 

bootstrap(HelloApp);

server.ts:

import * as express from 'express';
import {ng2engine} from 'angular2-universal-preview';
import {HelloApp} from './src/hello';

let app = express();

app.engine('.html', ng2engine);
app.set('views', __dirname);
app.set('view engine', 'html');

app.use(express.static(__dirname));

app.use('/', function(req, res) {
    res.render('index', { HelloApp })
})

app.listen(3000, () => {
    console.log('Listening on http://localhost:3000...');
});

index.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular2 playground</title>
</head>

<body>
    <hello-app>Loading...</hello-app>
</body>

<!-- ES6-related imports -->
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system.js"></script>
<script>
    //configure system loader
      System.config({
          defaultJSExtensions: true,
          map: {
            'typescript': 'node_modules/typescript/lib/typescript.js',
            'angular2': 'node_modules/angular2',
            'angular2-universal-preview': 'node_modules/angular2-universal-preview/dist/client/index',
            'rxjs': 'node_modules/rxjs'
        }});
</script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.min.js"></script>
<script>
    //bootstrap the Angular2 application
    System.import('dist/bootstrap').catch(console.log.bind(console));
</script>

</html>

package.json:

{
  "name": "ng2-play.ts",
  "version": "1.0.0",
  "description": "A minimal Angular2 playground using TypeScript",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/pkozlowski-opensource/ng2-play.ts.git"
  },
  "keywords": [],
  "author": "Michael Chavez, Space-Rocket | Web & Graphic Design",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/bigbassroller/Angular2-Fullstack-Boilerplate/issues"
  },
  "homepage": "https://github.com/pkozlowski-opensource/ng2-play.ts#readme",
  "dependencies": {
    "angular2": "^2.0.0-beta.7",
    "angular2-universal-preview": "^0.55.3",
    "css": "2.2.1",
    "es6-shim": "^0.33.13",
    "express": "^4.13.4",
    "lodash": "^3.10.1",
    "parse5": "^1.5.0",
    "preboot": "^1.0.2",
    "reflect-metadata": "^0.1.2",
    "rxjs": "^5.0.0-beta.2",
    "xhr2": "^0.1.3",
    "zone.js": "^0.5.15"
  },
  "devDependencies": {
    "del": "^2.2.0",
    "gulp": "^3.9.0",
    "gulp-connect": "^2.2.0",
    "gulp-nodemon": "^2.0.6",
    "gulp-rimraf": "^0.2.0",
    "gulp-typescript": "^2.10.0",
    "gulp-util": "^3.0.7",
    "gulp-watch": "^4.3.5",
    "open": "0.0.5",
    "systemjs": "^0.19.6",
    "systemjs-builder": "^0.14.11",
    "typescript": "^1.7.3",
    "typings": "^0.6.2"
  }
}

tsconfig.json:

{
  "version": "1.6.2",
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "removeComments": true,
    "sourceMap": false
  },
  "exclude": [
    "typings/main.main.d.ts",
    "typings/main",
    "node_modules"
  ]
}

tsd.json:

{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "master",
  "path": "typings",
  "bundle": "typings/tsd.d.ts",
  "installed": {
    "node/node.d.ts": {
      "commit": "163a4277199c3d896d9efffe24ea84c85f55c8ac"
    },
    "express/express.d.ts": {
      "commit": "27d7b56688bfeba9c6fc1ce0ecb611d929982d44"
    },
    "serve-static/serve-static.d.ts": {
      "commit": "163a4277199c3d896d9efffe24ea84c85f55c8ac"
    },
    "mime/mime.d.ts": {
      "commit": "163a4277199c3d896d9efffe24ea84c85f55c8ac"
    },
    "source-map/source-map.d.ts": {
      "commit": "163a4277199c3d896d9efffe24ea84c85f55c8ac"
    },
    "source-map-support/source-map-support.d.ts": {
      "commit": "163a4277199c3d896d9efffe24ea84c85f55c8ac"
    }
  }
}

and here is my typings folder tree

├── angularjs
│   └── angular.d.ts
├── es6-shim
│   └── es6-shim.d.ts
├── express
│   └── express.d.ts
├── jquery
│   └── jquery.d.ts
├── mime
│   └── mime.d.ts
├── node
│   └── node.d.ts
├── serve-static
│   └── serve-static.d.ts
├── source-map
│   └── source-map.d.ts
├── source-map-support
│   └── source-map-support.d.ts
└── tsd.d.ts

Is this a bug or I am missing something?

mchavezi commented 8 years ago

Renaming hello.ts to app.ts solved the problem.

PatrickJS commented 8 years ago

ya we used a lot of defaults for the sugar so

res.render('index', { App })

in es6 is really

res.render('index', { App: App })

which means your app sould be

res.render('index', { App: HelloApp })

mchavezi commented 8 years ago

Oh that makes perfect sense, especially with regards to what you said in the video.

Thanks for your response and all the hard work you've put into Universal:)

angular-automatic-lock-bot[bot] commented 5 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

angular / universal

EXCEPTION: Token must be defined! #291