{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/13822","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/13822/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/13822/comments","events_url":"https://api.github.com/repos/angular/angular/issues/13822/events","html_url":"https://github.com/angular/angular/issues/13822","id":199336473,"number":13822,"title":"Angular Universal Roadmap for Angular 4.0","user":{"login":"vikerman","id":85066,"avatar_url":"https://avatars.githubusercontent.com/u/85066?v=3","gravatar_id":"","url":"https://api.github.com/users/vikerman","html_url":"https://github.com/vikerman","followers_url":"https://api.github.com/users/vikerman/followers","following_url":"https://api.github.com/users/vikerman/following{/other_user}","gists_url":"https://api.github.com/users/vikerman/gists{/gist_id}","starred_url":"https://api.github.com/users/vikerman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vikerman/subscriptions","organizations_url":"https://api.github.com/users/vikerman/orgs","repos_url":"https://api.github.com/users/vikerman/repos","events_url":"https://api.github.com/users/vikerman/events{/privacy}","received_events_url":"https://api.github.com/users/vikerman/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"vikerman","id":85066,"avatar_url":"https://avatars.githubusercontent.com/u/85066?v=3","gravatar_id":"","url":"https://api.github.com/users/vikerman","html_url":"https://github.com/vikerman","followers_url":"https://api.github.com/users/vikerman/followers","following_url":"https://api.github.com/users/vikerman/following{/other_user}","gists_url":"https://api.github.com/users/vikerman/gists{/gist_id}","starred_url":"https://api.github.com/users/vikerman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vikerman/subscriptions","organizations_url":"https://api.github.com/users/vikerman/orgs","repos_url":"https://api.github.com/users/vikerman/repos","events_url":"https://api.github.com/users/vikerman/events{/privacy}","received_events_url":"https://api.github.com/users/vikerman/received_events","type":"User","site_admin":false},"assignees":[{"login":"vikerman","id":85066,"avatar_url":"https://avatars.githubusercontent.com/u/85066?v=3","gravatar_id":"","url":"https://api.github.com/users/vikerman","html_url":"https://github.com/vikerman","followers_url":"https://api.github.com/users/vikerman/followers","following_url":"https://api.github.com/users/vikerman/following{/other_user}","gists_url":"https://api.github.com/users/vikerman/gists{/gist_id}","starred_url":"https://api.github.com/users/vikerman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vikerman/subscriptions","organizations_url":"https://api.github.com/users/vikerman/orgs","repos_url":"https://api.github.com/users/vikerman/repos","events_url":"https://api.github.com/users/vikerman/events{/privacy}","received_events_url":"https://api.github.com/users/vikerman/received_events","type":"User","site_admin":false},{"login":"alxhub","id":4175141,"avatar_url":"https://avatars.githubusercontent.com/u/4175141?v=3","gravatar_id":"","url":"https://api.github.com/users/alxhub","html_url":"https://github.com/alxhub","followers_url":"https://api.github.com/users/alxhub/followers","following_url":"https://api.github.com/users/alxhub/following{/other_user}","gists_url":"https://api.github.com/users/alxhub/gists{/gist_id}","starred_url":"https://api.github.com/users/alxhub/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alxhub/subscriptions","organizations_url":"https://api.github.com/users/alxhub/orgs","repos_url":"https://api.github.com/users/alxhub/repos","events_url":"https://api.github.com/users/alxhub/events{/privacy}","received_events_url":"https://api.github.com/users/alxhub/received_events","type":"User","site_admin":false}],"milestone":{"url":"https://api.github.com/repos/angular/angular/milestones/66","html_url":"https://github.com/angular/angular/milestone/66","labels_url":"https://api.github.com/repos/angular/angular/milestones/66/labels","id":2017919,"number":66,"title":"4.x","description":"Don't panic it's just semver !\r\n\r\nhttp://angularjs.blogspot.com/2016/09/angular2-final.html","creator":{"login":"vicb","id":248818,"avatar_url":"https://avatars.githubusercontent.com/u/248818?v=3","gravatar_id":"","url":"https://api.github.com/users/vicb","html_url":"https://github.com/vicb","followers_url":"https://api.github.com/users/vicb/followers","following_url":"https://api.github.com/users/vicb/following{/other_user}","gists_url":"https://api.github.com/users/vicb/gists{/gist_id}","starred_url":"https://api.github.com/users/vicb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vicb/subscriptions","organizations_url":"https://api.github.com/users/vicb/orgs","repos_url":"https://api.github.com/users/vicb/repos","events_url":"https://api.github.com/users/vicb/events{/privacy}","received_events_url":"https://api.github.com/users/vicb/received_events","type":"User","site_admin":false},"open_issues":6,"closed_issues":1,"state":"open","created_at":"2016-09-21T00:02:46Z","updated_at":"2017-01-07T03:01:09Z","due_on":null,"closed_at":null},"comments":4,"created_at":"2017-01-07T03:01:09Z","updated_at":"2017-01-26T14:05:23Z","closed_at":null,"body":"### Migrate Angular Universal API to @angular/platform-server\r\n\r\n## High Level Plan\r\nAngular Universal consists of 1)API and 2)tools to do server side rendering of Angular apps. Currently both the Angular Universal API and tools live in angular/universal. The plan is to migrate the API part of Angular Universal to the core Angular project in angular/angular for the Angular 4.0 release and beyond.\r\n\r\nWe will design the API from ground up to be a core part of Angular and also refactor internals of Angular to better support Angular Universal. The aim is to build a strong foundation for the future development of Angular Universal. This also puts Angular Universal as a core part of Angular and will follow the same quality and release processes as the rest of Angular.\r\n\r\nWe will keep the API compatible with the current Express wrapper for Universal and make corresponding changes to it as needed. (We haven't scoped out the support for other Universal tools outside of the Express wrapper at this point)\r\n\r\nThere will be API docs and Dev Guide for Angular Universal. There will be a migration doc to help with migration from the current angular2-universal to the new Angular Universal API.\r\n\r\n## Use cases\r\nThe main use cases we are considering for this iteration of Universal are\r\n\r\n- Initial rendering of Angular application on server for perceived faster loading of application\r\n- SEO: Content in Angular application is indexed by crawlers\r\n- Link Preview - Generate a preview of the angular application for link previews on different websites\r\n\r\n## API (Work in Progress - To be finalized)\r\nInstead of having a separate Angular platform to support the Universal API we aim to augment the `platformServer` in `@angular/platform-server` which already provides the basic support for running Angular in Node.js environment. \r\n\r\nThe primary addition will be the `renderModuleFactory` API to platformServer to serialize a module to a string. Very roughly the usage of this API would look like -\r\n\r\n```js\r\nimport {platformServer} from ‘@angular/platform-server’;\r\nimport {AppServerModuleNgFactory} from ‘./server.ngfactory’;\r\n\r\nplatformServer({\r\n  document: ‘<html>...</html>’,  // The full document from an index.html\r\n  url: ‘http://host.com/application/route’,\r\n}).renderModuleFactory(AppServerModuleNgFactory).then(html => ...);\r\n```\r\n\r\nwhere the platformServer will now take in the the options for initializing - A document string which represents the whole document from what would be the index.html on the client side app and the current app URL.\r\n\r\nThe other main addition will be the `ServerModule` in `@angular/platform-server` that corresponds to the `BrowserModule` in the client side. We recommend that you have a separate top-level App Browser Module and an App Server Module where you specify your platform specific providers including `BrowserModule` and `ServerModule` respectively.\r\n\r\nOpen issue: Do we provide a way to pass in the request data to the server side Angular application in the first iteration?\r\n\r\n## Implementation details\r\n\r\n- Keep the current implementation of the renderer in `platformServer` and make changes to it as needed to support Universal use cases.\r\n\r\n- Refactor Http module to be platform independent and move the platform dependent parts into platformBrowser and platformServer.\r\n\r\n- Provide a server side Location service.\r\n\r\n- Make the new [Metatags service](https://github.com/angular/angular/blob/master/modules/@angular/platform-browser/src/browser/meta.ts) platform agnostic and move it to @angular/common so that server side applications can manipulate metatags required for link preview.\r\n\r\n- We will make the server implementation of Http(most probably based on XHR2) on the server platform to be Zone aware. We will provide guidelines on how to make other asynchronous Node libraries Zone aware - so that the server side application knows when the rendering is actually complete.\r\n\r\n- Provide a way to test Universal ready Components and Application. We already run all internal Angular tests in the Node environment. We will provide helper utilities to make it easier to test your Universal ready Components on both Node and browser.\r\n\r\n- Update the Universal starter to use the new API\r\n\r\n\r\nThanks,\r\nVikram Subramanian and Alex Rickabaugh"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/275395507","html_url":"https://github.com/angular/angular/issues/13822#issuecomment-275395507","issue_url":"https://api.github.com/repos/angular/angular/issues/13822","id":275395507,"user":{"login":"MarkPieszak","id":2574412,"avatar_url":"https://avatars.githubusercontent.com/u/2574412?v=3","gravatar_id":"","url":"https://api.github.com/users/MarkPieszak","html_url":"https://github.com/MarkPieszak","followers_url":"https://api.github.com/users/MarkPieszak/followers","following_url":"https://api.github.com/users/MarkPieszak/following{/other_user}","gists_url":"https://api.github.com/users/MarkPieszak/gists{/gist_id}","starred_url":"https://api.github.com/users/MarkPieszak/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MarkPieszak/subscriptions","organizations_url":"https://api.github.com/users/MarkPieszak/orgs","repos_url":"https://api.github.com/users/MarkPieszak/repos","events_url":"https://api.github.com/users/MarkPieszak/events{/privacy}","received_events_url":"https://api.github.com/users/MarkPieszak/received_events","type":"User","site_admin":false},"created_at":"2017-01-26T14:05:23Z","updated_at":"2017-01-26T14:05:23Z","body":"@vikerman @gdi2290 @alxhub \r\n\r\nTo go along with my comment about manipulating `<title>` & `<meta>` that's **outside** of the Angular application (such as how we need it to work for .NET, and I imagine other integrations might be similar). \r\n\r\nCould I propose a slightly different (or optional) syntax for the serializer, one that doesn't just return the html, but also *optional* metatags information that could be used outside of Angular and applied where needed?\r\n\r\n```\r\nimport {platformServer} from ‘@angular/platform-server’;\r\nimport {AppServerModuleNgFactory} from ‘./server.ngfactory’;\r\n\r\nplatformServer({\r\n  document: ‘<app></app>’, // <-- .NET we only pass the application itself (it controls the <html>/etc)\r\n  // ...\r\n}).renderModuleFactory(AppServerModuleNgFactory)\r\n    .then(result => \r\n        let html = result.html;\r\n        let meta = result.meta; // <--- title/meta/ basically anything external data you want to expose\r\n     );\r\n```\r\n\r\nYou can see we are discussing this (https://github.com/aspnet/JavaScriptServices/issues/607), and the necessary changes on the .NET side that would need to take place. But without something like this, there isn't a very **clean** way of abstracting out this information.  Currently I am storing all Title/Meta information on route changes / loads onto the `window` object and then searching through the html result to put it all back together.\r\n\r\nLet me know what you guys think, just throwing ideas around!"}}
{"actor":{"display_login":"MarkPieszak"}}