From 5c5c2ae40556918a1a6804bddc88300e41676bf1 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 e47eb9fc42..10bb4e51f2 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 65645d7a4f..9bacc6cf25 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 ad3c4d16b4..c051e33df6 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 0e705605e8..2152eb41e9 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 1e1eacddf1..4adb662552 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 cd3e46b656..ae0ac71646 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 3b8d85e526..99d19860b4 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 f3a5b0c3dd..d86f3d7102 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 0a347be96a..c3644ae59e 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 97bd8816db..85272e89d1 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 fee743fcd3..f31b22e9ef 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 c0834766aa..a514759b6d 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": ".",