fix(platform-server): setup NoopAnimationsModule in ServerModule by d…

…efault (angular#15131) This is so that server side rendering does not throw an exception when it encounters animations on the server side and does not need the user to explicitly setup NoopAnimationsModule in their app server module. Fixes angular#15098, angular#14784. PR Close angular#15131
asnowwolf · Aug 11, 2017 · e2b591f · e2b591f
1 parent 081bad9
commit e2b591f
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 23 deletions.
diff --git a/integration/hello_world__closure/package.json b/integration/hello_world__closure/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "license": "MIT",
   "dependencies": {
+    "@angular/animations": "file:../../dist/packages-dist/animations",
     "@angular/common": "file:../../dist/packages-dist/common",
     "@angular/compiler": "file:../../dist/packages-dist/compiler",
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",

diff --git a/integration/language_service_plugin/package.json b/integration/language_service_plugin/package.json
@@ -4,6 +4,7 @@
   "license": "MIT",
   "decription": "Angular Langauge Service plugin integration test",
   "dependencies": {
+    "@angular/animations": "file:../../dist/packages-dist/animations",
     "@angular/common": "file:../../dist/packages-dist/common",
     "@angular/compiler": "file:../../dist/packages-dist/compiler",
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",

diff --git a/integration/typings_test_ts21/package.json b/integration/typings_test_ts21/package.json
@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "license": "MIT",
   "dependencies": {
+    "@angular/animations": "file:../../dist/packages-dist/animations",
     "@angular/common": "file:../../dist/packages-dist/common",
     "@angular/compiler": "file:../../dist/packages-dist/compiler",
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",

diff --git a/integration/typings_test_ts22/package.json b/integration/typings_test_ts22/package.json
@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "license": "MIT",
   "dependencies": {
+    "@angular/animations": "file:../../dist/packages-dist/animations",
     "@angular/common": "file:../../dist/packages-dist/common",
     "@angular/compiler": "file:../../dist/packages-dist/compiler",
     "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",

diff --git a/packages/compiler-cli/integrationtest/src/module.ts b/packages/compiler-cli/integrationtest/src/module.ts
@@ -6,11 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ɵAnimationEngine} from '@angular/animations/browser';
-import {ApplicationRef, NgModule, NgZone, Provider, RendererFactory2} from '@angular/core';
+import {ApplicationRef, NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {NoopAnimationsModule, ɵAnimationRendererFactory} from '@angular/platform-browser/animations';
-import {ServerModule, ɵServerRendererFactory2} from '@angular/platform-server';
+import {ServerModule} from '@angular/platform-server';
 import {MdButtonModule} from '@angular2-material/button';
 // Note: don't refer to third_party_src as we want to test that
 // we can compile components from node_modules!
@@ -28,19 +26,6 @@ import {CompUsingRootModuleDirectiveAndPipe, SomeDirectiveInRootModule, SomeLibM
 import {CompWithNgContent, ProjectingComp} from './projection';
 import {CompForChildQuery, CompWithChildQuery, CompWithDirectiveChild, DirectiveForQuery} from './queries';
 
-export function instantiateServerRendererFactory(
-    renderer: RendererFactory2, engine: ɵAnimationEngine, zone: NgZone) {
-  return new ɵAnimationRendererFactory(renderer, engine, zone);
-}
-
-// TODO(matsko): create a server module for animations and use
-// that instead of these manual providers here.
-export const SERVER_ANIMATIONS_PROVIDERS: Provider[] = [{
-  provide: RendererFactory2,
-  useFactory: instantiateServerRendererFactory,
-  deps: [ɵServerRendererFactory2, ɵAnimationEngine, NgZone]
-}];
-
 @NgModule({
   declarations: [
     AnimateCmp,
@@ -67,7 +52,6 @@ export const SERVER_ANIMATIONS_PROVIDERS: Provider[] = [{
     BindingErrorComp,
   ],
   imports: [
-    NoopAnimationsModule,
     ServerModule,
     FormsModule,
     MdButtonModule,
@@ -77,7 +61,6 @@ export const SERVER_ANIMATIONS_PROVIDERS: Provider[] = [{
   ],
   providers: [
     SomeService,
-    SERVER_ANIMATIONS_PROVIDERS,
     {provide: CUSTOM, useValue: {name: 'some name'}},
   ],
   entryComponents: [

diff --git a/packages/platform-server/integrationtest/package.json b/packages/platform-server/integrationtest/package.json
@@ -8,6 +8,7 @@
     "url": "https://github.com/angular/angular.git"
   },
   "dependencies": {
+    "@angular/animations": "file:../../../dist/packages-dist/animations",
     "@angular/common": "file:../../../dist/packages-dist/common",
     "@angular/compiler": "file:../../../dist/packages-dist/compiler",
     "@angular/compiler-cli": "file:../../../dist/packages-dist/compiler-cli",

diff --git a/packages/platform-server/package.json b/packages/platform-server/package.json
@@ -9,6 +9,7 @@
   "author": "angular",
   "license": "MIT",
   "peerDependencies": {
+    "@angular/animations": "0.0.0-PLACEHOLDER",
     "@angular/core": "0.0.0-PLACEHOLDER",
     "@angular/common": "0.0.0-PLACEHOLDER",
     "@angular/compiler": "0.0.0-PLACEHOLDER",

diff --git a/packages/platform-server/src/server.ts b/packages/platform-server/src/server.ts
@@ -6,11 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {ɵAnimationEngine} from '@angular/animations/browser';
 import {PlatformLocation, ɵPLATFORM_SERVER_ID as PLATFORM_SERVER_ID} from '@angular/common';
 import {platformCoreDynamic} from '@angular/compiler';
-import {Injectable, InjectionToken, Injector, NgModule, PLATFORM_ID, PLATFORM_INITIALIZER, PlatformRef, Provider, RendererFactory2, RootRenderer, Testability, createPlatformFactory, isDevMode, platformCore, ɵALLOW_MULTIPLE_PLATFORMS as ALLOW_MULTIPLE_PLATFORMS} from '@angular/core';
+import {Injectable, InjectionToken, Injector, NgModule, NgZone, PLATFORM_ID, PLATFORM_INITIALIZER, PlatformRef, Provider, RendererFactory2, RootRenderer, Testability, createPlatformFactory, isDevMode, platformCore, ɵALLOW_MULTIPLE_PLATFORMS as ALLOW_MULTIPLE_PLATFORMS} from '@angular/core';
 import {HttpModule} from '@angular/http';
 import {BrowserModule, DOCUMENT, ɵSharedStylesHost as SharedStylesHost, ɵgetDOM as getDOM} from '@angular/platform-browser';
+import {NoopAnimationsModule, ɵAnimationRendererFactory} from '@angular/platform-browser/animations';
 
 import {SERVER_HTTP_PROVIDERS} from './http';
 import {ServerPlatformLocation} from './location';
@@ -37,9 +39,18 @@ function initParse5Adapter(injector: Injector) {
   return () => { Parse5DomAdapter.makeCurrent(); };
 }
 
+export function instantiateServerRendererFactory(
+    renderer: RendererFactory2, engine: ɵAnimationEngine, zone: NgZone) {
+  return new ɵAnimationRendererFactory(renderer, engine, zone);
+}
+
 export const SERVER_RENDER_PROVIDERS: Provider[] = [
   ServerRendererFactory2,
-  {provide: RendererFactory2, useExisting: ServerRendererFactory2},
+  {
+    provide: RendererFactory2,
+    useFactory: instantiateServerRendererFactory,
+    deps: [ServerRendererFactory2, ɵAnimationEngine, NgZone]
+  },
   ServerStylesHost,
   {provide: SharedStylesHost, useExisting: ServerStylesHost},
 ];
@@ -51,7 +62,7 @@ export const SERVER_RENDER_PROVIDERS: Provider[] = [
  */
 @NgModule({
   exports: [BrowserModule],
-  imports: [HttpModule],
+  imports: [HttpModule, NoopAnimationsModule],
   providers: [
     SERVER_RENDER_PROVIDERS,
     SERVER_HTTP_PROVIDERS,

diff --git a/packages/platform-server/test/integration_spec.ts b/packages/platform-server/test/integration_spec.ts
@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {animate, style, transition, trigger} from '@angular/animations';
 import {APP_BASE_HREF, PlatformLocation, isPlatformServer} from '@angular/common';
 import {ApplicationRef, CompilerFactory, Component, HostListener, NgModule, NgModuleRef, NgZone, PLATFORM_ID, PlatformRef, destroyPlatform, getPlatform} from '@angular/core';
 import {TestBed, async, inject} from '@angular/core/testing';
@@ -85,6 +86,25 @@ class SVGComponent {
 class SVGServerModule {
 }
 
+@Component({
+  selector: 'app',
+  template: '<div @myAnimation>{{text}}</div>',
+  animations: [trigger(
+      'myAnimation',
+      [transition('void => *', [style({'opacity': '0'}), animate(500, style({'opacity': '1'}))])])],
+})
+class MyAnimationApp {
+  text = 'Works!';
+}
+
+@NgModule({
+  declarations: [MyAnimationApp],
+  imports: [BrowserModule.withServerTransition({appId: 'anim-server'}), ServerModule],
+  bootstrap: [MyAnimationApp]
+})
+class AnimationServerModule {
+}
+
 @Component({selector: 'app', template: `Works!`, styles: [':host { color: red; }']})
 class MyStylesApp {
 }
@@ -352,6 +372,15 @@ export function main() {
              called = true;
            });
          }));
+
+      it('works with animation', async(() => {
+           renderModule(AnimationServerModule, {document: doc}).then(output => {
+             expect(output).toBe(
+                 '<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER">' +
+                 '<div>Works!</div></app></body></html>');
+             called = true;
+           });
+         }));
     });
 
     describe('http', () => {

diff --git a/packages/platform-server/testing/src/server.ts b/packages/platform-server/testing/src/server.ts
@@ -9,6 +9,7 @@
 import {platformCoreDynamicTesting} from '@angular/compiler/testing';
 import {NgModule, PlatformRef, Provider, createPlatformFactory} from '@angular/core';
 import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {ɵINTERNAL_SERVER_PLATFORM_PROVIDERS as INTERNAL_SERVER_PLATFORM_PROVIDERS, ɵSERVER_RENDER_PROVIDERS as SERVER_RENDER_PROVIDERS} from '@angular/platform-server';
 
 
@@ -25,6 +26,10 @@ export const platformServerTesting = createPlatformFactory(
  *
  * @experimental API related to bootstrapping are still under review.
  */
-@NgModule({exports: [BrowserDynamicTestingModule], providers: SERVER_RENDER_PROVIDERS})
+@NgModule({
+  exports: [BrowserDynamicTestingModule],
+  imports: [NoopAnimationsModule],
+  providers: SERVER_RENDER_PROVIDERS
+})
 export class ServerTestingModule {
 }
diff --git a/packages/platform-server/testing/tsconfig-build.json b/packages/platform-server/testing/tsconfig-build.json
@@ -2,13 +2,15 @@
   "extends": "../tsconfig-build",
   "compilerOptions": {
     "paths": {
+      "@angular/animations/browser": ["../../dist/packages/animations/browser"],
       "@angular/core": ["../../dist/packages/core"],
       "@angular/core/testing": ["../../dist/packages/core/testing"],
       "@angular/common": ["../../dist/packages/common"],
       "@angular/common/testing": ["../../dist/packages/common/testing"],
       "@angular/compiler": ["../../dist/packages/compiler"],
       "@angular/compiler/testing": ["../../dist/packages/compiler/testing"],
       "@angular/platform-browser": ["../../dist/packages/platform-browser"],
+      "@angular/platform-browser/animations": ["../../dist/packages/platform-browser/animations"],
       "@angular/platform-browser/testing": ["../../dist/packages/platform-browser/testing"],
       "@angular/platform-browser-dynamic": ["../../dist/packages/platform-browser-dynamic"],
       "@angular/platform-browser-dynamic/testing": ["../../dist/packages/platform-browser-dynamic/testing"],

diff --git a/packages/platform-server/tsconfig-build.json b/packages/platform-server/tsconfig-build.json
@@ -8,11 +8,13 @@
     "moduleResolution": "node",
     "outDir": "../../dist/packages/platform-server",
     "paths": {
+      "@angular/animations/browser": ["../../dist/packages/animations/browser"],
       "@angular/core": ["../../dist/packages/core"],
       "@angular/common": ["../../dist/packages/common"],
       "@angular/compiler": ["../../dist/packages/compiler"],
       "@angular/http": ["../../dist/packages/http"],
       "@angular/platform-browser": ["../../dist/packages/platform-browser"],
+      "@angular/platform-browser/animations": ["../../dist/packages/platform-browser/animations"],
       "@angular/platform-browser-dynamic": ["../../dist/packages/platform-browser-dynamic"]
     },
     "rootDir": ".",