diff --git a/aio/content/examples/upgrade-lazy-load-ajs/e2e/src/app.e2e-spec.ts b/aio/content/examples/upgrade-lazy-load-ajs/e2e/src/app.e2e-spec.ts new file mode 100644 index 0000000000..78a04fcdbf --- /dev/null +++ b/aio/content/examples/upgrade-lazy-load-ajs/e2e/src/app.e2e-spec.ts @@ -0,0 +1,79 @@ +import { browser, element, by, ExpectedConditions } from 'protractor'; + +describe('Lazy Loading AngularJS Tests', function () { + const pageElements = { + homePageHref: element(by.cssContainingText('app-root nav a', 'Home')), + homePageParagraph: element(by.css('app-root app-home p')), + ajsUsersPageHref: element(by.cssContainingText('app-root nav a', 'Users')), + ajsUsersPageParagraph: element(by.css('app-root app-angular-js div p')), + notFoundPageHref: element(by.cssContainingText('app-root nav a', '404 Page')), + notFoundPageParagraph: element(by.css('app-root app-app404 p')), + }; + + beforeAll(async() => { + await browser.get('/'); + }); + + it('should display \'Angular Home\' when visiting the home page', async() => { + await pageElements.homePageHref.click(); + + const paragraphText = await pageElements.homePageParagraph.getText(); + + expect(paragraphText).toEqual('Angular Home'); + }); + + it('should display \'Users Page\' page when visiting the AngularJS page at /users', async() => { + await pageElements.ajsUsersPageHref.click(); + await loadAngularJS(); + + const paragraphText = await pageElements.ajsUsersPageParagraph.getText(); + + expect(paragraphText).toEqual('Users Page'); + }); + + it('should display \'Angular 404\' when visiting an invalid URL', async() => { + await pageElements.notFoundPageHref.click(); + + const paragraphText = await pageElements.notFoundPageParagraph.getText(); + + expect(paragraphText).toEqual('Angular 404'); + }); + + // Workaround for https://github.com/angular/protractor/issues/4724 + async function loadAngularJS() { + // Abort if `resumeBootstrap` has already occured + if (await browser.executeScript(`return '__TESTABILITY__NG1_APP_ROOT_INJECTOR__' in window;`)) { + return; + } + + // Might have to re-insert the 'NG_DEFER_BOOTSTRAP!' if the name has been changed since protractor loaded the page + if (!await browser.executeScript('window.name.includes(\'NG_DEFER_BOOTSTRAP!\')')) { + await browser.executeScript('window.name = \'NG_DEFER_BOOTSTRAP!\' + name'); + } + + // Wait for the AngularJS bundle to download and initialize + await browser.wait(ExpectedConditions.presenceOf(element(by.css('app-root app-angular-js'))), 5000, 'AngularJS app'); + + // Run the protractor pre-bootstrap logic and resumeBootstrap + // Based on https://github.com/angular/protractor/blob/5.3.0/lib/browser.ts#L950-L969 + { + let moduleNames = []; + for (const {name, script, args} of browser.mockModules_) { + moduleNames.push(name); + await browser.executeScriptWithDescription(script, 'add mock module ' + name, ...args); + } + + await browser.executeScriptWithDescription( + // TODO: must manually assign __TESTABILITY__NG1_APP_ROOT_INJECTOR__ (https://github.com/angular/angular/issues/22723) + `window.__TESTABILITY__NG1_APP_ROOT_INJECTOR__ = angular.resumeBootstrap(arguments[0]) ` + + `|| angular.element('app-angular-js').injector();`, + 'resume bootstrap', + moduleNames + ); + } + + // Wait for the initial AngularJS page to finish loading + await browser.waitForAngular(); + } +}); + diff --git a/aio/content/examples/upgrade-lazy-load-ajs/example-config.json b/aio/content/examples/upgrade-lazy-load-ajs/example-config.json index e69de29bb2..c3afe22ccd 100644 --- a/aio/content/examples/upgrade-lazy-load-ajs/example-config.json +++ b/aio/content/examples/upgrade-lazy-load-ajs/example-config.json @@ -0,0 +1,3 @@ +{ + "projectType": "cli-ajs" +} \ No newline at end of file diff --git a/aio/content/examples/upgrade-lazy-load-ajs/src/app/angular-js/angular-js.component.ts b/aio/content/examples/upgrade-lazy-load-ajs/src/app/angular-js/angular-js.component.ts index bc5d22c0f0..63c325d2b9 100644 --- a/aio/content/examples/upgrade-lazy-load-ajs/src/app/angular-js/angular-js.component.ts +++ b/aio/content/examples/upgrade-lazy-load-ajs/src/app/angular-js/angular-js.component.ts @@ -1,14 +1,22 @@ -import { Component, OnInit, ElementRef } from '@angular/core'; +import { Component, OnInit, OnDestroy, ElementRef } from '@angular/core'; import { LazyLoaderService } from '../lazy-loader.service'; @Component({ selector: 'app-angular-js', template: '
' }) -export class AngularJSComponent implements OnInit { - constructor(private lazyLoader: LazyLoaderService, private elRef: ElementRef) {} +export class AngularJSComponent implements OnInit, OnDestroy { + constructor( + private lazyLoader: LazyLoaderService, + private elRef: ElementRef + ) {} ngOnInit() { this.lazyLoader.load(this.elRef.nativeElement); } + + + ngOnDestroy() { + this.lazyLoader.destroy(); + } } diff --git a/aio/content/examples/upgrade-lazy-load-ajs/src/app/app.module.ts b/aio/content/examples/upgrade-lazy-load-ajs/src/app/app.module.ts index 4e199e90bf..817ab8e5d1 100644 --- a/aio/content/examples/upgrade-lazy-load-ajs/src/app/app.module.ts +++ b/aio/content/examples/upgrade-lazy-load-ajs/src/app/app.module.ts @@ -19,7 +19,6 @@ import { App404Component } from './app404/app404.component'; BrowserModule, AppRoutingModule ], - providers: [], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/aio/content/examples/upgrade-lazy-load-ajs/src/app/lazy-loader.service.ts b/aio/content/examples/upgrade-lazy-load-ajs/src/app/lazy-loader.service.ts index 50c8492fb9..40ffc6e4a1 100644 --- a/aio/content/examples/upgrade-lazy-load-ajs/src/app/lazy-loader.service.ts +++ b/aio/content/examples/upgrade-lazy-load-ajs/src/app/lazy-loader.service.ts @@ -1,23 +1,25 @@ import { Injectable } from '@angular/core'; +import * as angular from 'angular'; @Injectable({ providedIn: 'root' }) export class LazyLoaderService { - bootstrapped = false; + private app: angular.auto.IInjectorService; load(el: HTMLElement): void { - if (this.bootstrapped) { - return; - } - import('./angularjs-app').then(app => { try { - app.bootstrap(el); - this.bootstrapped = true; + this.app = app.bootstrap(el); } catch (e) { console.error(e); } }); } + + destroy() { + if (this.app) { + this.app.get('$rootScope').$destroy(); + } + } } diff --git a/aio/content/guide/upgrade.md b/aio/content/guide/upgrade.md index 75f0d3b95e..f017ce1d0a 100644 --- a/aio/content/guide/upgrade.md +++ b/aio/content/guide/upgrade.md @@ -868,6 +868,8 @@ As of Angular version 8, lazy loading code can be accomplished simply by using t The service uses the `import()` method to load your bundled AngularJS application lazily. This decreases the initial bundle size of your application as you're not loading code your user doesn't need yet. You also need to provide a way to _bootstrap_ the application manually after it has been loaded. AngularJS provides a way to manually bootstrap an application using the [angular.bootstrap()](https://docs.angularjs.org/api/ng/function/angular.bootstrap) method with a provided HTML element. Your AngularJS app should also expose a `bootstrap` method that bootstraps the AngularJS app. +To ensure any necessary teardown is triggered in the AngularJS app, such as removal of global listeners, you also implement a method to call the `$rootScope.destroy()` method. + @@ -886,7 +888,7 @@ In your Angular application, you need a component as a placeholder for your Angu -When the Angular Router matches a route that uses AngularJS, the `AngularJSComponent` is rendered, and the content is rendered within the AngularJS [`ng-view`](https://docs.angularjs.org/api/ngRoute/directive/ngView) directive. +When the Angular Router matches a route that uses AngularJS, the `AngularJSComponent` is rendered, and the content is rendered within the AngularJS [`ng-view`](https://docs.angularjs.org/api/ngRoute/directive/ngView) directive. When the user navigates away from the route, the `$rootScope` is destroyed on the AngularJS application. ### Configure a custom route matcher for AngularJS routes diff --git a/aio/tools/example-zipper/customizer/package-json/cli-ajs.json b/aio/tools/example-zipper/customizer/package-json/cli-ajs.json new file mode 100644 index 0000000000..f19a131a9a --- /dev/null +++ b/aio/tools/example-zipper/customizer/package-json/cli-ajs.json @@ -0,0 +1,23 @@ +{ + "scripts": [ + { "name": "ng", "command": "ng" }, + { "name": "build", "command": "ng build --prod" }, + { "name": "start", "command": "ng serve" }, + { "name": "test", "command": "ng test" }, + { "name": "lint", "command": "ng lint" }, + { "name": "e2e", "command": "ng e2e" } + ], + "dependencies": [ + "angular", + "angular-route" + ], + "devDependencies": [ + "@angular/cli", + "@types/angular", + "@types/angular-route", + "@types/jasminewd2", + "jasmine-spec-reporter", + "karma-coverage-istanbul-reporter", + "ts-node" + ] +} diff --git a/aio/tools/examples/example-boilerplate.js b/aio/tools/examples/example-boilerplate.js index 54471f5fed..bb8290cade 100644 --- a/aio/tools/examples/example-boilerplate.js +++ b/aio/tools/examples/example-boilerplate.js @@ -57,6 +57,11 @@ BOILERPLATE_PATHS.schematics = [ 'angular.json' ]; +BOILERPLATE_PATHS['cli-ajs'] = [ + ...cliRelativePath, + 'package.json' +]; + const EXAMPLE_CONFIG_FILENAME = 'example-config.json'; class ExampleBoilerPlate { diff --git a/aio/tools/examples/shared/boilerplate/cli-ajs/package.json b/aio/tools/examples/shared/boilerplate/cli-ajs/package.json new file mode 100644 index 0000000000..fdbc1ddc1d --- /dev/null +++ b/aio/tools/examples/shared/boilerplate/cli-ajs/package.json @@ -0,0 +1,56 @@ +{ + "name": "angular.io-example", + "version": "0.0.0", + "license": "MIT", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "private": true, + "dependencies": { + "@angular/animations": "^8.0.0", + "@angular/common": "^8.0.0", + "@angular/compiler": "^8.0.0", + "@angular/core": "^8.0.0", + "@angular/forms": "^8.0.0", + "@angular/platform-browser": "^8.0.0", + "@angular/platform-browser-dynamic": "^8.0.0", + "@angular/router": "^8.0.0", + "angular": "1.7.8", + "angular-in-memory-web-api": "^0.8.0", + "angular-route": "1.7.8", + "core-js": "^2.5.4", + "rxjs": "^6.5.1", + "tslib": "^1.9.0", + "web-animations-js": "^2.3.1", + "zone.js": "~0.9.1" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^0.800.0", + "@angular/cli": "^8.0.0", + "@angular/compiler-cli": "^8.0.0", + "@angular/language-service": "^8.0.0", + "@types/angular": "^1.6.47", + "@types/angular-route": "^1.3.5", + "@types/jasmine": "~3.3.8", + "@types/jasminewd2": "~2.0.3", + "@types/node": "~8.9.4", + "codelyzer": "~5.0.0", + "jasmine-core": "~2.99.1", + "jasmine-marbles": "^0.5.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~4.1.0", + "karma-chrome-launcher": "~2.2.0", + "karma-coverage-istanbul-reporter": "~2.0.1", + "karma-jasmine": "~2.0.1", + "karma-jasmine-html-reporter": "^0.2.2", + "protractor": "~5.4.0", + "ts-node": "~7.0.0", + "tslint": "~5.15.0", + "typescript": "~3.4.4" + } +} diff --git a/aio/tools/examples/shared/package.json b/aio/tools/examples/shared/package.json index cf83fac56d..5094cae5af 100644 --- a/aio/tools/examples/shared/package.json +++ b/aio/tools/examples/shared/package.json @@ -32,7 +32,9 @@ "@nguniversal/common": "^8.0.0-rc.1", "@nguniversal/express-engine": "^8.0.0-rc.1", "@nguniversal/module-map-ngfactory-loader": "^8.0.0-rc.1", + "angular": "1.7.8", "angular-in-memory-web-api": "github:brandonroberts/in-memory-web-api-bazel#50a34d8", + "angular-route": "1.7.8", "core-js": "^2.5.4", "express": "^4.14.1", "rxjs": "^6.5.1", diff --git a/aio/tools/examples/shared/yarn.lock b/aio/tools/examples/shared/yarn.lock index 3a27c4a9ff..fe79b99e41 100644 --- a/aio/tools/examples/shared/yarn.lock +++ b/aio/tools/examples/shared/yarn.lock @@ -801,6 +801,16 @@ amdefine@>=0.0.4: dependencies: tslib "^1.9.0" +angular-route@1.7.8: + version "1.7.8" + resolved "https://registry.yarnpkg.com/angular-route/-/angular-route-1.7.8.tgz#d502aa605dcbb253a93e844c0adf51c9bc36b9fa" + integrity sha512-VVk89PH0fsY5kfbx+N7IVX1IwnaPWYhMGY0uA+rjej2v1sjvrTx1SLkxUK4E0UpW1hXeLJhN7ncBcwoBiPtAtA== + +angular@1.7.8: + version "1.7.8" + resolved "https://registry.yarnpkg.com/angular/-/angular-1.7.8.tgz#b77ede272ce1b261e3be30c1451a0b346905a3c9" + integrity sha512-wtef/y4COxM7ZVhddd7JtAAhyYObq9YXKar9tsW7558BImeVYteJiTxCKeJOL45lJ/+7B4wrAC49j8gTFYEthg== + ansi-colors@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.1.0.tgz#dcfaacc90ef9187de413ec3ef8d5eb981a98808f"