angular / universal-starter Goto Github PK

Hi, I tried this out and noticed the bundle.js created was 1.7 meg.

I had a quick look and found that Webpack has a -p option that will uglify the output. People who know Webpack, may have better ideas.

I realise Angular 2 is in development, but you could add this as a default or an option to make the bundle size a little less scary ;)

Cheers.

@Angular-Class links to the wrong organization in the description - it should be @AngularClass

Hi!

Instead of sending my serverside rendered Angular App straight back to the client I'd like to access it as one long HTML string and save it in a file.

basically I'm trying to get the output of

res.render('index', { directives: [Html], providers: [ NODE_ROUTER_PROVIDERS, NODE_HTTP_PROVIDERS ], async: true, preboot: false });

in server.ts as a long HTML string so I can write it somewhere else instead of sending it as a response back to the client in Express.

What would be the best way to achieve this?

Components that have separate html and css files and reference them via templateUrl and styleUrls do not prerender but client-side still loads i.e. this doesn't work:

@Component({
  selector: 'app',
  templateUrl: 'path/to/my/template.html',
  styleUrls: ['path/to/my/stylesheet.css'],
})

But this does:

@Component({
  selector: 'app',
  template: `
<div>Here is my template</div>
`,
  styles: [`
   .classy {
        background: red;
   }
`],

Error: Cannot find module 'hoek'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (/home/manna/Project/e-munna/node_modules/angular2-universal-preview/node_modules/angular2-hapi-engine/dist/src/engine.js:3:12)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)

The repo works great. There are just some dependencies that have suffered some changes and would be nice to maybe update the package.json.

Its complicated to make all of them work well together. Mainly these ones :

ts-node
rxjs
angular

have suffered some changes.

I do get an error : Uncaught SyntaxError: Unexpected token < in my bundle.js

I think its a minor thing and updates will of course still happen as angular and all its dependencies progress until beta.

Great work;)

After git clone && npm install ... npm start I get error message in console

...

> [email protected] start /home/miuan/projects/universal-starter
> nodemon dist/server/bundle.js

[nodemon] 1.9.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: /home/miuan/projects/universal-starter/dist/**/*
[nodemon] starting `node dist/server/bundle.js`
Listen on http://localhost:3000
/home/miuan/projects/universal-starter/node_modules/parse5/lib/tokenization/preprocessor.js:50
    this.lastCharPos = this.html.length - 1;
                                ^

TypeError: Cannot read property 'length' of null
    at Preprocessor.write (/home/miuan/projects/universal-starter/node_modules/parse5/lib/tokenization/preprocessor.js:50:33)
    at new module.exports (/home/miuan/projects/universal-starter/node_modules/parse5/lib/tokenization/preprocessor.js:29:10)
    at new module.exports (/home/miuan/projects/universal-starter/node_modules/parse5/lib/tokenization/tokenizer.js:148:25)
    at Parser._reset (/home/miuan/projects/universal-starter/node_modules/parse5/lib/tree_construction/parser.js:399:22)
    at Parser.parse (/home/miuan/projects/universal-starter/node_modules/parse5/lib/tree_construction/parser.js:361:10)
    at Object.parseDocument (/home/miuan/projects/universal-starter/node_modules/angular2-universal-preview/dist/node/platform/document.js:17:22)
    at Function.Bootloader.parseDocument (/home/miuan/projects/universal-starter/node_modules/angular2-universal-preview/dist/node/bootloader.js:32:72)
    at Bootloader.document (/home/miuan/projects/universal-starter/node_modules/angular2-universal-preview/dist/node/bootloader.js:38:31)
    at Bootloader.application (/home/miuan/projects/universal-starter/node_modules/angular2-universal-preview/dist/node/bootloader.js:47:24)
    at new Bootloader (/home/miuan/projects/universal-starter/node_modules/angular2-universal-preview/dist/node/bootloader.js:14:28)
[nodemon] app crashed - waiting for file changes before starting...

I also found command npm run watch doesn't turn on the server

tsd will be deprecated so switch to typings

angular/universal-starter

So i was trying to pass an object to a child component using @Input , but its not working correctly.
I have used dynamic component loader to load child component and I want to pass the object to child component.
Following is my code snippet:

app.component.ts

`import {Component, Directive, Renderer, DynamicComponentLoader, ElementRef} from 'angular2/core';
import {Http} from 'angular2/http';    
import {headingComponent} from './heading.component';


@Directive({
  selector: '[x-large]'
})
export class XLarge {
  constructor(element: ElementRef, renderer: Renderer) {
    // we must interact with the dom through Renderer for webworker/server to see the changes
    renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large');
  }
}

@Component({
  selector: 'app',
  directives: [    
    XLarge
  ],  
  template: `
        <div>
            <div>
            <span x-large>Hello, {{ user.name }}!</span>
            </div>
            <icici-heading [user]="user"></icici-heading>      
        </div>
    `
})
export class App {
  public user;       
  constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) {          
      dcl.loadNextToLocation(headingComponent, elementRef);
  }
  ngOnInit(){
      this.user = { "id": 11, "name": "Mr. Nice" };
  }  
}

`
heading.component.ts

`import {Component, OnInit,Input} from 'angular2/core';

@Component({
    selector: 'icici-heading',
    template: `
        <div>
            <!--{{user.name}}-->this is not working
            {{name}}
       </div>
    `   
 })

export class headingComponent implements OnInit {
    @Input() user;
    name: string;
    constructor() { }
    ngOnInit() { 
        this.name="heading is rendered";
    }    
}`

Hi,
is it possible to start an Angular 2 App as client side only and later transform it as Universal App?
What do I need to be aware of ?
Or is it better to start as Universal App?

I am getting some erros on a project and also is happening on the starter where zone js is trowing some errors :

bundle.js:30881 EXCEPTION: UnsubscriptionError

seems to be somehow related to the subscribe method. Looking at the longtrace I can see it goes back to

javascript
scheduleResolveOrReject(promise, queue[i++], queue[i++], queue[i++], queue[i++]);

in the resolvePromise method.

By the way. I am having always longStacktrace enabled when pulling in the universal pollyfills, is this normal? I dont have it on the starter though..How to I enable / disable longtrace when using universal?

I am not doing

Error['stackTraceLimit'] = Infinity;
require('zone.js/dist/long-stack-trace-zone');

Anywhere. that would be the normal way of enabling it right?

I just noticed the following on a clean installation of the starter using preview 0.84.0.

The data coming from an HTTP request gets rendered on the server side, and is visible on the HTML initially sent.

The problem is, once the page finishes to load the ajax request is issued again, and the part of the screen containing HTTP data is re-rendered. This causes a flickering effect, where the data is displayed, erased and then re-rendered.

This is not visible on the current version of the starter, because there is a small amount of data. But by throwing a bit some more data, the flickering becomes apparent:

// Our API for demos only
app.get('/data.json', (req, res) => {
  res.json([
      {
          "teamId": 1610612737,
          "abbreviation": "ATL",
          "teamName": "Atlanta Hawks",
          "simpleName": "Hawks",
          "location": "Atlanta"
      },
      {
          "teamId": 1610612738,
          "abbreviation": "BOS",
          "teamName": "Boston Celtics",
          "simpleName": "Celtics",
          "location": "Boston"
      },
      {
          "teamId": 1610612751,
          "abbreviation": "BKN",
          "teamName": "Brooklyn Nets",
          "simpleName": "Nets",
          "location": "Brooklyn"
      },
      {
          "teamId": 1610612766,
          "abbreviation": "CHA",
          "teamName": "Charlotte Hornets",
          "simpleName": "Hornets",
          "location": "Charlotte"
      },
      {
          "teamId": 1610612741,
          "abbreviation": "CHI",
          "teamName": "Chicago Bulls",
          "simpleName": "Bulls",
          "location": "Chicago"
      },
      {
          "teamId": 1610612739,
          "abbreviation": "CLE",
          "teamName": "Cleveland Cavaliers",
          "simpleName": "Cavaliers",
          "location": "Cleveland"
      },
      {
          "teamId": 1610612742,
          "abbreviation": "DAL",
          "teamName": "Dallas Mavericks",
          "simpleName": "Mavericks",
          "location": "Dallas"
      }
  ]);
});

I am trying to get angular universal into a existing angular2 app. I am getting the following error when accessing the site :

`EXCEPTION: Error during instantiation of BlogList!.
STACKTRACE:

ORIGINAL EXCEPTION: Error
ERROR CONTEXT:
_Context {
element:
{ type: 'tag',
name: 'blog-list',
namespace: 'http://www.w3.org/1999/xhtml',
attribs: { '_ngcontent-fid-4': '' },
'x-attribsNamespace': {},
'x-attribsPrefix': {},
children: [],
parent: null,
prev: null,
next: null },
componentElement:
{ type: 'tag',
name: 'router-outlet',
namespace: 'http://www.w3.org/1999/xhtml',
attribs: {},
'x-attribsNamespace': {},
'x-attribsPrefix': {},
children: [],
parent:
{ type: 'tag',
name: 'div',
namespace: 'http://www.w3.org/1999/xhtml',
attribs: [Object],
'x-attribsNamespace': {},
'x-attribsPrefix': {},
children: [Object],
parent: [Object],
prev: [Object],
next: null,
className: 'blog-app' },
prev:
{ type: 'text',
data: '\n ',
parent: [Object],
prev: null,
next: [Circular] },
next:
{ type: 'text',
data: '\n ',
parent: [Object],
prev: [Circular],
next: null } },
injector:
Injector {
_isHostBoundary: false,
_depProvider:
AppElement {
proto: [Object],
parentView: [Object],
parent: null,
nativeElement: [Object],
embeddedViewFactory: null,
nestedViews: null,
componentView: null,
ref: [Object],
_queryStrategy: _EmptyQueryStrategy {},
_injector: [Circular],
_strategy: [Object] },
_debugContext: [Function],
_constructionCounter: 2,
_proto: ProtoInjector { numberOfProviders: 2, _strategy: [Object] },
_parent:
Injector {
_isHostBoundary: true,
_depProvider: null,
_debugContext: null,
_constructionCounter: 0,
_proto: [Object],
_parent: [Object],
_strategy: [Object] },
_strategy:
InjectorInlineStrategy {
injector: [Circular],
protoStrategy: [Object],
obj0: {},
obj1: [Object],
obj2: {},
obj3: {},
obj4: {},
obj5: {},
obj6: {},
obj7: {},
obj8: {},
obj9: {} } } }
DEPRECATION WARNING: 'dequeueTask' is no longer supported and will be removed in next major release. Use removeTask/removeRepeatingTask/removeMicroTask
Angular 2 is running in the production mode. Call enableDevMode() to enable the development mode.`

In the browser I see the following :

Uncaught TypeError: Cannot read property 'cloneNode' of null

The task npm start runs without probems, the issue only occurs when I actually navigate to the URL.

The app does use HTTP, but I followed the instructions given here : #7 (comment)

Any help would be much appreciated ;)

Hi,

I think, I don't get it. I've cloned this repo and did a npm install as well as a npm start. Everything seems to work fine - the server is started at port 3000 and I can access it with a browser.

But when I trace the received html, I don't see anything that has been pre-rendered at server-side. I just see angular2-code that is executed at client-side, things like in the next listing. And it doesn't work without javascript.

Do I have to enable server-side rendering in this starter-kit?
Have I done something wrong?

Best wishes,
Manfred

<body>

  <app>
    Loading...
  </app>

  <script src="/node_modules/reflect-metadata/Reflect.js"></script>
  <script src="/node_modules/zone.js/dist/zone.js"></script>
  <script src="/__build__/bundle.js"></script>
</body>

I have added a service using HTTP fetch as described at https://angular.io/docs/ts/latest/guide/server-communication.html#!#fetch-data to my universal app but the request fails on the server side.

I have seen that there is a Node XHR Implementation but I don't know how to use it or if it even works.

Sample code at https://github.com/bjwyse/universal-starter/tree/http_fetch_test will reproduce the error.

EXCEPTION: ReferenceError: XMLHttpRequest is not defined in [null]
ORIGINAL EXCEPTION: ReferenceError: XMLHttpRequest is not defined
ORIGINAL STACKTRACE:
ReferenceError: XMLHttpRequest is not defined
    at BrowserXhr.build (c:\Users\bwyse\projects\ng2\universal-starter-bw\node_modules\angular2\src\http\backends\browser_xhr.js:19:60)
    at Observable._subscribe (c:\Users\bwyse\projects\ng2\universal-starter-bw\node_modules\angular2\src\http\backends\xhr_backend.js:32:35)
    at Observable._subscribe (c:\Users\bwyse\projects\ng2\universal-starter-bw\node_modules\rxjs\Observable.js:118:28)
    at Observable._subscribe (c:\Users\bwyse\projects\ng2\universal-starter-bw\node_modules\rxjs\Observable.js:118:28)
    at Observable.subscribe (c:\Users\bwyse\projects\ng2\universal-starter-bw\node_modules\rxjs\Observable.js:74:29)
    at App.getAppPropertiesApi (c:\Users\bwyse\projects\ng2\universal-starter-bw\dist\server\bundle.js:186:15)
    at App.ngOnInit (c:\Users\bwyse\projects\ng2\universal-starter-bw\dist\server\bundle.js:181:15)
    at AbstractChangeDetector.ChangeDetector_HostApp_0.detectChangesInRecordsInternal (viewFactory_HostApp:21:99)
    at AbstractChangeDetector.detectChangesInRecords (c:\Users\bwyse\projects\ng2\universal-starter-bw\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:105:18)
    at AbstractChangeDetector.runDetectChanges (c:\Users\bwyse\projects\ng2\universal-starter-bw\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:82:14)

When i try to npm run build in the command this error will appear.

jeyachanthuruj@JeyarathnamJ:~/Workspace/ngUnivers/universal-starter$ npm run build

> [email protected] build /home/jeyachanthuruj/Workspace/ngUnivers/universal-starter
> webpack

ts-loader: Using [email protected] and /home/jeyachanthuruj/Workspace/ngUnivers/universal-starter/tsconfig.json
Hash: 06903815e07b1afaab6c
Version: webpack 1.12.9
Time: 186ms
    + 1 hidden modules

ERROR in ./src/bootstrap.ts
Module build failed: TypeError: undefined is not a function
    at ensureTypeScriptInstance (/home/jeyachanthuruj/Workspace/ngUnivers/universal-starter/node_modules/ts-loader/index.js:147:38)
    at Object.loader (/home/jeyachanthuruj/Workspace/ngUnivers/universal-starter/node_modules/ts-loader/index.js:365:14)

Would be cool to add an example with some routes.

Hello,

Is there a way or a flag to set to determine when the initial state ( the one that should be prerendered ) is complete? Let's assume the following usecase:

1. I have an app that consistst of 1 main component and 1 route with a component
2. The route component does an async http call to a backend API
3. The component for that route has several child components / directives
4. The result from the asycn API call needs to be passed into the several child components and rendered

After all this, the "state zero" should be rendered.

How to achieve this? Is there something on the roadmap to accomplish this?

Grtz!

This is not really an issue, more of a noob's question. How to perform http requests in universal mode.
I'm trying to follow the current documentation.

app.ts:

import {Component} from 'angular2/angular2';
import {Http, HTTP_PROVIDERS} from 'angular2/http';

@Component({
    selector: 'app',
    viewProviders: [HTTP_PROVIDERS],
    template: `
    <div>
        <h1>Hello, {{ name }}!</h1>
    </div>
    `
})
export class App {
    public people: any;
    constructor(http: Http) {
        http.get('people.json').map((res: any) => res.json()).subscribe((people: any) =>
            this.people = people
        );
    }
}

But the code is actually run in the server, and therefore nodejs is unhappy of XMLHttpRequest not being present (which is normal since running this code by the universal bootstrap).

ReferenceError: XMLHttpRequest is not defined
    at BrowserXhr.build (app/node_modules/angular2/src/http/backends/browser_xhr.js:17:60)
    at Observable._subscribe (app/node_modules/angular2/src/http/backends/xhr_backend.js:34:35)
    at Observable._subscribe (app/node_modules/angular2/node_modules/@reactivex/rxjs/dist/cjs/Observable.js:134:28)
    at Observable.subscribe (app/node_modules/angular2/node_modules/@reactivex/rxjs/dist/cjs/Observable.js:103:29)
    at new App (app/built/client/app.js:15:78)

If we look into result html, we found no client bundle js plugged in:

<html>
<head>...</head>
<body>
...
<server-only-app>
  <footer>Angular 2 Universal - server only rendered component</footer>
  </server-only-app>
<!-- Missing script tag here -->
  </body>
</html>

With versions angular2": "2.0.0-beta.15, angular2-universal": "~0.95.1" of the starter (I just freshly cloned it now), I've noticed the following behaviour:

If we open the starter and go to the about page in localhost:3000/about, and then hit refresh and inspect the response:

We notice that the home page is being rendered by the server, and not the about page. We can see that in this video demo.

Before this used to work OK, meaning the about page was rendered server side as expected. With the version of the starter that used Angular 2 Beta 14 this was working OK, it must have been a very recent commit.

To summarize the versions:

• using the starter with universal 0.91.0 and angular 2 beta 14 - it works
• after upgrade to universal 0.95.1and angular 2 beta 14 - issue occurs

Note: The about page ends up getting displayed in the end, although it was not rendered on the server side.

This is due to some other issue that causes the page to get re-rendered at client boot up time (maybe #338 or #359?)

Is there a way I'm not seeing right from the start to reload the app with changes when files are modified in the src folder? Should we set it up ourselves?

I get this when I have built the app and try to run it

universal-starter/node_modules/angular2-universal-preview/node_modules/angular2-hapi-engine/node_modules/hoek/lib/index.js:5
const Crypto = require('crypto');
^^^^^
SyntaxError: Use of const in strict mode.
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (universal-starter/node_modules/angular2-universal-preview/node_modules/angular2-hapi-engine/dist/src/engine.js:3:12)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
[nodemon] app crashed - waiting for file changes before starting...

I just tried the following:

• using node 4.2.1 and npm 3.7.5
• clean clone of the project
• npm install
• npm run build
• npm start
• go to http://localhost:3000/

The page gets rendered on the server side correctly, but change detection is not working.

What i mean by that is that as we type on the input text field, the title of the page does not get updated.
By trying with a keydown event, we get the same result:

<input type="text" [value]="name" (keydown)="name = input.value" autofocus #input>{{name}}

There are no errors in the console.

having a systemjs branch would be great

I am getting an error in ubuntu that says

Unable to compile TypeScript

server.ts (1,26): Cannot find module 'express'. (2307)
server.ts (13,18): Cannot find name '__dirname'. (2304)
server.ts (18,24): Cannot find name '__dirname'. (2304)
server.ts (21,15): Parameter 'req' implicitly has an 'any' type. (7006)

server.ts (21,20): Parameter 'res' implicitly has an 'any' type. (7006)

npm ERR! Linux 2.6.32-042stab103.6
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v4.1.0
npm ERR! npm v2.14.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: ts-node server.ts
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'ts-node server.ts'.
npm ERR! This is most likely a problem with the angular2-universal-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ts-node server.ts
npm ERR! You can get their info via:
npm ERR! npm owner ls angular2-universal-starter
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/joao/angular-universal/npm-debug.log

Its running fine on mac os =/

Express is installed and present in node_modules so that is not the issue.

Don't know if this is by design or a bug in webpack merge, but attempting to call it twice in a row as in the example results in the 'Client' getting some configuration data from the 'Server'.

module.exports = [
  // Client
  webpackMerge({}, defaultConfig, commonConfig, clientConfig),

  // Server
  webpackMerge({}, defaultConfig, commonConfig, serverConfig)
]

After a clean clone and install the preboot does not seem to take effect.

I changed the client to :

function ngApp(req, res) {
  let baseUrl = '/';
  let url = req.originalUrl || '/';
  res.render('index', {
    directives: [ Html ],
    providers: [
      provide(APP_BASE_HREF, {useValue: baseUrl}),
      provide(REQUEST_URL, {useValue: url}),
      ROUTER_PROVIDERS,
      NODE_LOCATION_PROVIDERS,
      NODE_PRELOAD_CACHE_HTTP_PROVIDERS,
    ],
    async: true,
    preboot: true
  });
}

So that preboot is set to true but I don't see it updating the app.

I have set the preboot flag to true in server.ts and I am getting the following error:

Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': Only one element on document allowed.

I am using the latest version @ 1b5e933

I tried with this starter to import the template file from templateUrl: './a.html' instead of putting the template inside the component, but the console shows .
I have tried also with ./app/a.html and /src/app/a.html but everything fails, any suggestion?

I don't think the project root should be used to serve static files as all files are then accessible (https://github.com/angular/universal-starter/blob/master/src/server.ts#L36).

I can see how some node_modules components need to be served but is there an alternative approach?

I also see some code in the universal project with these components hard coded (https://github.com/angular/universal/blob/master/modules/angular2-express-engine/src/engine.ts).

What is the future plan for these dependencies?

Did fresh install - on npm start get following deprecation warnings once server is running...

DEPRECATION WARNING: 'enqueueTask' is no longer supported and will be removed in next major release. Use addTask/addRepeatingTask/addMicroTask
DEPRECATION WARNING: 'dequeueTask' is no longer supported and will be removed in next major release. Use removeTask/removeRepeatingTask/removeMicroTask

What's wrong?

server.js

import {ng2engine, BASE_URL, HTTP_PROVIDERS, SERVER_LOCATION_PROVIDERS} from 'angluar2-universal-preview';
import {provide} from 'angular2/angular2';
import {ROUTER_PROVIDERS, ROUTER_PRIMARY_COMPONENT} from 'angular2/router';

app.use('/', (req, res) => {
  res.render('index', {
    App,
    providers: [
      ROUTER_PROVIDERS,
      HTTP_PROVIDERS,
      SERVER_LOCATION_PROVIDERS,
      provide(BASE_URL, {useValue: '/'}),
      provide(ROUTER_PRIMARY_COMPONENT, { useValue: App }),
    ]
  });
});

bootstrap.ts

import {bootstrap} from 'angluar2-universal-preview';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS, ROUTER_PRIMARY_COMPONENT, APP_BASE_HREF} from 'angular2/rout
import {App} from './app';


bootstrap(App, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    provide(ROUTER_PRIMARY_COMPONENT, { useValue: App }),
    provide(APP_BASE_HREF, { useValue: '/' })
]);

Error:

TypeError: appRef.registerDisposeListener is not a function
    at routerFactory (/home/dev/universal-starter/node_modules/angular2/router.js:137:12)
    at Injector._instantiate (/home/dev/universal-starter/node_modules/angular2/src/core/di/injector.js:763:27)
    at Injector._instantiateProvider (/home/dev/universal-starter/node_modules/angular2/src/core/di/injector.js:711:25)
    at Injector._new (/home/dev/universal-starter/node_modules/angular2/src/core/di/injector.js:700:21)
    at InjectorDynamicStrategy.getObjByKeyId (/home/dev/universal-starter/node_modules/angular2/src/core/di/injector.js:317:50)
    at Injector._getByKeyDefault (/home/dev/universal-starter/node_modules/angular2/src/core/di/injector.js:896:37)
    at Injector._getByKey (/home/dev/universal-starter/node_modules/angular2/src/core/di/injector.js:842:25)
    at Injector._getByDependency (/home/dev/universal-starter/node_modules/angular2/src/core/di/injector.js:828:25)
    at Injector._instantiate (/home/dev/universal-starter/node_modules/angular2/src/core/di/injector.js:720:36)
    at Injector._instantiateProvider (/home/dev/universal-starter/node_modules/angular2/src/core/di/injector.js:711:25)

I am using this repo for loading dynamic components. i am not getting any error in browser nor on console.but my child component is also not getting loaded in browser.
Its working correctly if i am defining child component inside app.ts itself.
for eg. this works:
`

import {Component, Directive, DynamicComponentLoader, ElementRef} from 'angular2/core';
import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig} from 'angular2/router';

@Component({
  selector: 'dcl-comp',
  template: `
  <div>dynamic</div>
`})
export class DynamicBody1Component {}

@Directive({
  selector: '[x-large]'
  host: {
    '[style.fontSize]': 'x-large',
  }
})
export class XLarge {
}


@Component({
  selector: 'my-app',
  directives: [
    ...ROUTER_DIRECTIVES,
    XLarge
  ],
  styles: [`
    .router-link-active {
      background-color: lightgray;
    }`],
 template: `
  <div>    
    <div>
      <span x-large>Hello, {{ name }}!</span>
    </div>
    <div>
        <div #container></div>
    </div>
  </div>
  `
})
export class App {
  name: string = 'Angular 2';
  constructor(
    private dynamicComponentLoader: DynamicComponentLoader, 
    private elementRef: ElementRef) {}

  ngOnInit() {
    this.dynamicComponentLoader.loadIntoLocation(DynamicBody1Component, this.elementRef, 'container');

  }
}`

But its not getting rendered when I am doing following,because DynamicBody1Component is in different file.
`

import {Component, Directive, ElementRef, Renderer,DynamicComponentLoader} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {DynamicBody1Component} from './DYNAMIC-BODY-1.component';


@Directive({
  selector: '[x-large]'
})
export class XLarge {
  constructor(element: ElementRef, renderer: Renderer) {
    // we must interact with the dom through Renderer for webworker/server to see the changes
    renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large');
  }
}


@Component({
  selector: 'app',
  directives: [
    ...ROUTER_DIRECTIVES,
    XLarge
  ],
  styles: [`
    .router-link-active {
      background-color: lightgray;
    }` ],
  template: `
  <div>    
    <div>
      <span x-large>Hello, {{ name }}!</span>
    </div>
    <div>
        <div #container></div>
    </div>
  </div>
  `
})
export class App {
  name: string = 'Angular 2';
  constructor(private dynamicComponentLoader: DynamicComponentLoader, private elementRef:     ElementRef) {}

  ngOnInit() {
    this.dynamicComponentLoader.loadIntoLocation(DynamicBody1Component, this.elementRef, 'container');
  }
}`

I cant figure out why this is happening.
Any inputs?

As can be seen if you load up the seed and type in the input field, the input value is not updated until a new value is entered. This problem exists even when using ngModel and/or form controls. The big issue is, if you are filling out a form or input field before the app fully loads, the forms fields or variable bindings won't be up to date until you type a new value, which could result in a very bad and confusing user experience if your form is invalid because some of the controls/variables that you updated before the page fully loaded are registering as null.

Sometimes the developer would want things like ads, or comments section to load progressively on the browser so that the page load faster. So if this has to be done with server renderering, how could this be achieved with angular universal?

Hello,

I am trying to setup an app, everything seems to work okay but the loaders (namely the sass loader) is throwing some errors.

Error: Cannot find module '!css!sass!./css/_siteintro.scss'

In my webpack config in the common var I have my loaders :

var common = {
  resolve: {
    extensions: ['', '.ts', '.js', '.json'],
  },
  module: {
    loaders: [
      // Support for *.json files.
      {test: /\.json$/, loader: 'json'},

      // Support for CSS as raw text
      {test: /\.css$/, loader: 'raw'},

      //sass loader implementation
      {test: /\.scss$/, loaders: ["style", "css", "sass"]},

...

and in the ts file I am requiring the sass file :

var css = require("!css!sass!./css/_siteintro.scss");

Any idea what might be the issue?

The client bundle code is huge after optimization.
new webpack.optimize.UglifyJsPlugin({
mangle: false
})

Its coming around 1.37 MB.
Is there a way I can specify the angular common modules to be imported rather than importing everything?

Hi all, im trying to use the HTTP functionality of Angular Universal, by doing the following:

• take the latest universal starter
• add a REST API to return some test data

    app.use('/api/hello', (req,res) => res.send({text:"Hello World"}));
    app.use('/', ngApp);

• On the Home component, add an Ajax request:

    import {Http} from 'angular2/http';

    export class Home {
        message:string;
        constructor(http:Http) {
            http.get('/api/hello')
                .subscribe(data => {
                    console.log('Hello world!!');
                    console.log(data);
            });
        }
    }

• The result is that on the console nothings gets logged

• I I then use NODE_HTTP_PROVIDERS instead of NODE_PRELOAD_CACHE_HTTP_PROVIDERS in server.ts, the console gives the following error:

  Listen on http://localhost:3000
  EXCEPTION: [object Object]

I did not manage to get this to work so far, do you have some insight on what I could be doing wrong?

Would it be possible to add a small example here in the starter on how to use HTTP in Universal, Thxs

Would be great to get the repository working agains angular2 beta. I still run into some issues with typescript namely the one with "Typescript Module build failed: TypeError: compiler.parseConfigFile is not a function"

I think there is some issues with some breaking changes on ts-node. I am not sure.

I have few issues with my code.

Here the code:

/Users/gena/project/node_modules/angular2-universal-preview/dist/node/router/node_platform_location.d.ts(3,26): error TS2307: Cannot find module 'url'.
src/server-only-app/server-only-app.ts(25,14): error TS2305: Module '"/Users/gena/project/src/app/app"' has no exported member 'Home'.
src/server-only-app/server-only-app.ts(25,20): error TS2305: Module '"/Users/gena/project/src/app/app"' has no exported member 'About'.

I followed by universal-starter - systemjs version.
Dependencies: package.json

"angular2": "^2.0.0-beta.13",
"angular2-universal-preview": "^0.86.0",
"parse5": "^1.5.1",
"rxjs": "^5.0.0-beta.2",

@gdi2290 After add

import {Component, Directive, ElementRef, Renderer, Inject} from 'angular2/angular2';
import {HTTP_BINDINGS, Http} from 'angular2/http';


@Directive({
  selector: '[x-large]'
})
class XLarge {
  constructor(element: ElementRef, renderer: Renderer) {
    // we must interact with the dom through Renderer for webworker/server to see the changes
    renderer.setElementStyle(element, 'fontSize', 'x-large');
  }
}


@Component({
  selector: 'app',
  directives: [ XLarge ],
  template: `
  <div>
    <div>
      <span x-large>Hello, {{ name }}!</span>
    </div>

    name: <input type="text" [value]="name" (input)="name = $event.target.value" autofocus>
  </div>
  `,
  viewBindings: [HTTP_BINDINGS]
})
export class App {
  name: string = 'AngularConnect';
  data: Object;

  constructor(@Inject(Http) http:Http) {
    this.data = {};
    http.get('https://api.github.com/users/danicomas').map(res => res.json()).subscribe(response => this.data = response);
  }
}

and tsconfig.json:

"noImplicitAny": false,

I receive the following error:

Listen on http://localhost:3000
EXCEPTION: Error during instantiation of App!.
ORIGINAL EXCEPTION: ReferenceError: XMLHttpRequest is not defined

It's reasonable that server get data from api then render pages. I noticed that when app bootstrapped in the browser, it of course fetches data from data.json in App component.

Maybe it's not necessary to fetch data again in the page which server respond.

After server got data, we can embed them into scripts, then client loads data from scripts. So the problem is how we hold data and how to bootstrap with data in the front-end. I knew Redux is a good choice, it provides a store to work these around.

Is there better or other ways in angular to solve these problem?

after clone the repository and do "npm install", "npm watch" does not work.

ERROR in ./src/bootstrap.ts
(6,1): error TS2346: Supplied parameters do not match any signature of call target.

when I add to webpack.config.js:

  ts: {
    ignoreDiagnostics: [2346]
  }

then compiled, but come error from angular2/src/core/dom/parse5_adapter.js (missing parse5, lodash, and css and require errors)

Does this project require a full build before the developer can see a change on the client reflected in the browser? Could anybody point me toward how to develop with bundling turned off until production deploy? Also, how would I go about trying to get browsersync or something like it to work with this project?