fix(platform-server): setup NoopAnimationsModule in ServerModule by default (#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 #15098, #14784.

PR Close #15131

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",

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",

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",

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",

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: [

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",

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",

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,

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', () => {

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 {
 }

packages/platform-server/testing/tsconfig-build.json

@@ -2,6 +2,7 @@
   "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"],
@@ -9,6 +10,7 @@
       "@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"],

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": ".",