Universal: update to rc5/rc6/rc7

[PatrickJS]

rc6/rc7 update

• [x] create NodeDomEventsPlugin from DomEventsPlugin
• [x] create NodeEventManager from NodeEventManager
• [x] recreate DomRenderer for NodeDomRenderer
• [x] recreate SharedStylesHost for NodeSharedStylesHost
• [x] recreate Parse5DomAdapter with parse5 2.x.x
• [x] fix the events that were coupled to Parse5DomAdapter and one document
• [x] making sure the pipeline is as fast as possible outside of the angular's internal bootstrap
• [x] decouple the universal rendering pipeline for scheduling
• [x] inject latest version of preboot
• [x] create a way to dehydrate data from server to client via UNIVERSAL_CACHE
• [x] allow APP_ID to be passed to client to reuse styles
• [x] include lifecycle hooks for NodePlatform
  
  
  
  • -[x] universalOnInit
  
  
  • -[x] universalDoCheck
  
  
  • -[x] universalOnStable
  
  
  • -[x] universalDoDehydrate
  
  
  • -[x] universalAfterDehydrate
  
  
  • -[x] universalOnRendered
  
  
• [x] move most NodePlatform logic to UniversalPlatform
• [x] reuse NodeModule as UniversalModule
• [x] create initial UniversalPlatform
• [x] initial UniversalModule for browser
• [x] UniversalModule for Browser
  
  
  
  • [ ] create lifecycle hooks
  
  
  • [x] link APP_ID to reuse styles
  
  
  • [x] link preboot
  
  
  • [ ] link http resources made from the server to the client for prime cache mode
  
  
  • [ ] link hydrate resources
  
  
• [ ] recreate integrations
  
  
  
  • -[x] angular2-express-engine
  
  
  • -[ ] angular2-hapi-engine
  
  
  • -[ ] angular2-webpack-prerender
  
  
  • -[ ] angular2-gulp-prerender
  
  
  • -[ ] angular2-grunt-prerender
  
  
• [x] fix publishing packages
• [x] use Zone.js for context config

after initial release

• [x] allow canceling requests
• [x] include fixed preboot version
  
  
  
  • - [x] auto include appRoots
  
  
  • - [x] inject at last entryComponent
  
  
• [ ] perf tests
• [ ] recreate Bootloader as Universal to manage concurrent apps and app lifecycles with middleware
• [ ] move most serialize logic from NodePlatform to Universal
• [x] update integrations with full app with routes prerendering support
• [ ] write about auth management
• [ ] write about state/resource/cache management server/client/both
• [ ] write about pm2 and cluster management
• [ ] write about best practices
• [x] get AoT compiler working
• [x] patch zone.js for http/https _WIP_ https://github.com/angular/zone.js/pull/430
• [x] patch zone.js for fs https://github.com/angular/zone.js/pull/438
• [ ] update universal services design

experimental

• [ ] include a webpack universal-loader for prerendering
• [ ] create new universal prerender solution
• [ ] section off pages for prerender and rerender for fastest server rendering solution

[maciejtreder]

Any forecast when you are going to implement this?

[lmantis]

Hi, I would like to know too. Thanks in advance.

[PatrickJS]

here's a preview of what I have so far which is sticking to the angular API as much as possible

import { NgModule } from '@angular/core';
import {
  NodeModule,
  NodeHttpModule,
  NodeJsonpModule,
  platformDynamicNode,
} from '@angular/universal';

import { App } from './app';


export const platform = platformDynamicUniversal();

export function main(document) {

  @NgModule({
    bootstrap: [ App ],
    declarations: [ App ],
    imports: [
      UniversalModule.forRoot(document, {
        originUrl: 'http://localhost:3000',
        baseUrl: '/',
        requestUrl: '/'
      }),
      NodeHttpModule,
      NodeJsonpModule
    ],
    providers: [ ]
  })
  class MainModule {}

  return platform
    .serializeModule(MainModule)
    .then((html) => {
      console.log('done')
      return html
    });
};

[GrandSchtroumpf]

Is '@angular/universal' released yet ? I can't get my hand on it with npm.

[maciejtreder]

@GrandSchtroumpf
On my end it's working:

npm install [email protected]

This is latest version. But it is not working with latest angular (rc.5).

I believe that if you want to use it with rc.5 solution provided by @gdi2290 is working correctly (I did not check it no my end).

[PatrickJS]

rc.5 is not released yet for universal

[maciejtreder]

@gdi2290

So code which you provided is not compatible with angular rc5? Do I understand correctly?

[PatrickJS]

the current API is compatible but will be depreciated since I was essentially doing what NgModule now allows me to do. The rc5 release of universal will recommend users to follow the Angular API conventions.

The old Bootloader API will still be supported until everyone switches to the new NgModule syntax using UniversalModule. The benefits of the new API allows me to provide server-only-components in any other part of the component tree rather than only being limited to the parent of the root component tree

[GrandSchtroumpf]

@gdi2290 : Do you have any idea when the new version of Angular universal supporting rc5 would be released ?

[PatrickJS]

I'm shooting for Friday

[geoffreak]

How's the Friday release looking?

[PatrickJS]

it's updated in the example folder for rc5 and rc6. The universal module has been rebuilt from the ground up. The only things left are rearranging the repo with it, making the new API work with the old API, and then publishing it
https://github.com/angular/universal/blob/master/examples/next-hello-world/src/main.node.ts

import { NgModule, Component, Injectable } from '@angular/core';
import {
  NodeModule,
  NodeHttpModule,
  NodeJsonpModule,
  platformDynamicNode, // might be renamed to platformDynamicUniversal
} from '@angular/universal';

import { App } from './app';


@Component({
  selector: 'another-component',
  template: 'SERVER-RENDERED'
})
class AnotherComponent {}

export const platform = platformDynamicNode();

export function main(document, config?: any) {

  @NgModule({
    bootstrap: [ App, AnotherComponent ],
    declarations: [ App, AnotherComponent ],
    imports: [
      NodeModule.withConfig({
        document: document,
        originUrl: 'http://localhost:3000',
        baseUrl: '/',
        requestUrl: '/',
        preboot: {
          appRoot: ['app'],
          uglify: true
        },
      }),
      NodeHttpModule,
      NodeJsonpModule
    ]
  })
  class MainModule {
    ngOnInit() {
      console.log('ngOnInit');
    }
    // ngDoCheck() {
    //   console.log('ngDoCheck');
    //   return true;
    // }
    ngOnStable() {
      console.log('ngOnStable');
    }
    ngOnRendered() {
      console.log('ngOnRendered');
    }
  }

  return platform
    .serializeModule(MainModule, config)
    .then((html) => {
      console.log('done');
      return html
    });
};

[colltoaction]

Where's @angular/universal?

[GrandSchtroumpf]

According to the tsconfig.json : @angular/universal": ["./src/universal_modules/universal"]
When you look at the index.d.ts inside this directory you're linked to './src/node' where you can find universalNode. From here it imports all the other modules.
Here is where you can find the other modules if you want :

• NodeModule : ./src/universal_modules/platform-node/node-platform.ts
• NodeHttpModule, NodeJsonModule : ./src/universal_modules/platform-node/node-platform.ts
  Hope it helps.

[MarkPieszak]

Universal hasn't been publish to the @angular/universal npm namespace just yet. I believe Patrick's just showing things from universal-next which have his newer rc5 code at the moment.

[colltoaction]

I see, thanks!

[atalw]

@gdi2290: Any estimate on when @angular/universal will be published?

[jonathan-casarrubias]

Hey Patrick!!! Thanks for your work... I'm really looking forward for RC5-6 support w/ NgModule.

I'm integrating this with the LoopBack Framework and The LoopBack SDK Builder and there is a lot of community interest for this so good job!!!

Jonathan Casarrubias

[diego-ruiz-rei]

RC6 just came out, is a new issue ticket required?

[PatrickJS]

The latest changes in master has rc6 changes. All that's left are integrations, docs, and introduce a few universal services for browser to match up with the server (data/styles)

[glebmachine]

Come one guys! Can't wait to play with hmr(

[goriunov]

Hello every one I am new to angular Universal so would like ti ask if you could explain my why we have 2 server files in examples ( express-server.ts and server.ts). I would appreciate your answer .

[MarkPieszak]

@goriunov The examples at the moment are more for just testing if Universal works, and in that case run it in different scenarios, normally you wouldn't need/have those 2 (since they both fire up separate express applications). You can check out the (work in progress) documentation https://github.com/angular/universal/pull/526 in this PR. When rc5/6 gets published it'll all work something like that.

[PatrickJS]

Sorry for the delay again I'll try to be a bit more transparent. I decided to update universal to rc6 which pushed back Universal that was in the middle of being updated to rc5. rc6 required Universal to recreate a lot of internal services that I was reused since the internal angular APIs kept changing. I also determined that there also needs to be a UniversalModule for the browser that now needs to be designed. UniversalModule is needed to seamlessly transition between Node and the Browser.

*/\ list moved to the original post /*
https://github.com/angular/universal/issues/511#issue-170015928

[kuldeepkeshwar]

@gdi2290 @jeffwhelpley is support for rc7 out?

[Hongbo-Miao]

@kuldeepkeshwar Check https://github.com/angular/universal-starter/commit/45f8fcd053c235f5a6ad7300d9a818ba885f4261 and https://github.com/angular/universal-starter/commit/8ccc07ffadc0f03771db3f93fa51eb99b8f36ca6 which updated to RC7

[cyrilletuzi]

I think it's "normal" as AoT support is not yet checked, but I'm trying to use AoT compiler with Universal, and when I use ngc, I get this error : "Unexpected value 'UniversalModule' imported by the module 'AppModule'". AoT is working on the classic app without Universal. Unfortunately I don't know how to help you with this, but I just wanted to let you know.

[PatrickJS]

AoT support will be in the next release which has a small breaking change (remove main function for ngModule reference) and will be released as 2.0.0 the changes are on my laptop I just need to push it up and cut a release

[bryan]

angular2 is out of rc!

[PatrickJS]

yup, the next release will use the 2.0.0 release

[kuldeepkeshwar]

how soon can we expect support for 2.0.0 release ?

[MarkPieszak]

Think Pat said he'll make another push to npm in a few hours?

[PatrickJS]

ya sorry not tonight as I originally planned. I'm getting a weird typescript error that i need to dive into to figure out why it's giving me the error

update: Universal 2.0.x released. ts error fixed

[acthomas06]

I did notice that your main.node and main.browser files in angular-universal-starter are completely identical. Maybe start there @gdi2290 :)

[PatrickJS]

Universal 2.0.x was released on npm. The rest of the items on the list will be released as patches

[GrandSchtroumpf]

The starter for Node and the examples in the documentation are not exactly the same (especially for the main.node as mentioned acthomas06) is one way better than the other ?

[PatrickJS]

the starter is the best example. the examples in this repo are mostly for stress testing different scenarios etc

[thrallala]

Hi @gdi2290, i see you've checked aot compilation, but i can't get it to work. From what i can gather, all libraries that i use in my project should have an index.metadata.json which is generated by the compiler-cli(ngc compiler). I've tried aot-compiling the universal project myself, but there are a bunch of "Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function" errors. Basically all functions used inside an "@NgModule" need to be exported and referenced. I'll maybe take a look this weekend if i may and i'm right about my assumptions, i just wanted to let everyone searching for this issue know and thanks for all the great work you're putting in!

[PatrickJS]

we're missing our metadata.json file

[angular-automatic-lock-bot[bot]]

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._}