From e2b591f6de28a1fc2effba362579910c7b9b9919 Mon Sep 17 00:00:00 2001 From: Vikram Subramanian Date: Mon, 13 Mar 2017 17:31:03 -0700 Subject: [PATCH] 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 | 1 + .../language_service_plugin/package.json | 1 + integration/typings_test_ts21/package.json | 1 + integration/typings_test_ts22/package.json | 1 + .../integrationtest/src/module.ts | 21 ++------------ .../integrationtest/package.json | 1 + packages/platform-server/package.json | 1 + packages/platform-server/src/server.ts | 17 +++++++++-- .../platform-server/test/integration_spec.ts | 29 +++++++++++++++++++ .../platform-server/testing/src/server.ts | 7 ++++- .../testing/tsconfig-build.json | 2 ++ packages/platform-server/tsconfig-build.json | 2 ++ 12 files changed, 61 insertions(+), 23 deletions(-) diff --git a/integration/hello_world__closure/package.json b/integration/hello_world__closure/package.json index e47eb9fc42802..10bb4e51f2cbc 100644 --- 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 index 65645d7a4f2f2..9bacc6cf25723 100644 --- 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 index ad3c4d16b4e55..c051e33df60e9 100644 --- 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 index 0e705605e8546..2152eb41e9665 100644 --- 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 index 1e1eacddf103b..4adb662552893 100644 --- 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 index cd3e46b6563be..ae0ac71646829 100644 --- 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 index 3b8d85e526044..99d19860b455d 100644 --- 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 index f3a5b0c3ddb91..d86f3d710297f 100644 --- 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 index 0a347be96a23f..c3644ae59e05f 100644 --- 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: '
{{text}}
', + 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( + '' + + '
Works!
'); + called = true; + }); + })); }); describe('http', () => { diff --git a/packages/platform-server/testing/src/server.ts b/packages/platform-server/testing/src/server.ts index 97bd8816db05a..85272e89d18c0 100644 --- 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 index fee743fcd3a64..f31b22e9ef873 100644 --- a/packages/platform-server/testing/tsconfig-build.json +++ b/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"], diff --git a/packages/platform-server/tsconfig-build.json b/packages/platform-server/tsconfig-build.json index c0834766aabf7..a514759b6d310 100644 --- 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": ".",