5 lines
188 KiB
JSON
5 lines
188 KiB
JSON
{
|
||
"id": "guide/upgrade",
|
||
"title": "Upgrading from AngularJS to Angular",
|
||
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/upgrade.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"upgrading-from-angularjs-to-angular\">Upgrading from AngularJS to Angular<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#upgrading-from-angularjs-to-angular\"><i class=\"material-icons\">link</i></a></h1>\n<p><em>Angular</em> is the name for the Angular of today and tomorrow.<br>\n<em>AngularJS</em> is the name for all 1.x versions of Angular.</p>\n<p>AngularJS apps are great.\nAlways consider the business case before moving to Angular.\nAn important part of that case is the time and effort to get there.\nThis guide describes the built-in tools for efficiently migrating AngularJS projects over to the\nAngular platform, a piece at a time.</p>\n<p>Some applications will be easier to upgrade than others, and there are\nmany ways to make it easier for yourself. It is possible to\nprepare and align AngularJS applications with Angular even before beginning\nthe upgrade process. These preparation steps are all about making the code\nmore decoupled, more maintainable, and better aligned with modern development\ntools. That means in addition to making the upgrade easier,\nyou will also improve the existing AngularJS applications.</p>\n<p>One of the keys to a successful upgrade is to do it incrementally,\nby running the two frameworks side by side in the same application, and\nporting AngularJS components to Angular one by one. This makes it possible\nto upgrade even large and complex applications without disrupting other\nbusiness, because the work can be done collaboratively and spread over\na period of time. The <code>upgrade</code> module in Angular has been designed to\nmake incremental upgrading seamless.</p>\n<h2 id=\"preparation\">Preparation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#preparation\"><i class=\"material-icons\">link</i></a></h2>\n<p>There are many ways to structure AngularJS applications. When you begin\nto upgrade these applications to Angular, some will turn out to be\nmuch more easy to work with than others. There are a few key techniques\nand patterns that you can apply to future proof apps even before you\nbegin the migration.</p>\n<a id=\"follow-the-angular-styleguide\"></a>\n<h3 id=\"follow-the-angularjs-style-guide\">Follow the AngularJS Style Guide<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#follow-the-angularjs-style-guide\"><i class=\"material-icons\">link</i></a></h3>\n<p>The <a href=\"https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md\">AngularJS Style Guide</a>\ncollects patterns and practices that have been proven to result in\ncleaner and more maintainable AngularJS applications. It contains a wealth\nof information about how to write and organize AngularJS code - and equally\nimportantly - how <strong>not</strong> to write and organize AngularJS code.</p>\n<p>Angular is a reimagined version of the best parts of AngularJS. In that\nsense, its goals are the same as the AngularJS Style Guide's: To preserve\nthe good parts of AngularJS, and to avoid the bad parts. There's a lot\nmore to Angular than just that of course, but this does mean that\n<em>following the style guide helps make your AngularJS app more closely\naligned with Angular</em>.</p>\n<p>There are a few rules in particular that will make it much easier to do\n<em>an incremental upgrade</em> using the Angular <code><a href=\"api/upgrade/static\" class=\"code-anchor\">upgrade/static</a></code> module:</p>\n<ul>\n<li>\n<p>The <a href=\"https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility\">Rule of 1</a>\nstates that there should be one component per file. This not only makes\ncomponents easy to navigate and find, but will also allow us to migrate\nthem between languages and frameworks one at a time. In this example application,\neach controller, component, service, and filter is in its own source file.</p>\n</li>\n<li>\n<p>The <a href=\"https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure\">Folders-by-Feature Structure</a>\nand <a href=\"https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity\">Modularity</a>\nrules define similar principles on a higher level of abstraction: Different parts of the\napplication should reside in different directories and NgModules.</p>\n</li>\n</ul>\n<p>When an application is laid out feature per feature in this way, it can also be\nmigrated one feature at a time. For applications that don't already look like\nthis, applying the rules in the AngularJS style guide is a highly recommended\npreparation step. And this is not just for the sake of the upgrade - it is just\nsolid advice in general!</p>\n<h3 id=\"using-a-module-loader\">Using a Module Loader<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#using-a-module-loader\"><i class=\"material-icons\">link</i></a></h3>\n<p>When you break application code down into one component per file, you often end\nup with a project structure with a large number of relatively small files. This is\na much neater way to organize things than a small number of large files, but it\ndoesn't work that well if you have to load all those files to the HTML page with\n<script> tags. Especially when you also have to maintain those tags in the correct\norder. That's why it's a good idea to start using a <em>module loader</em>.</p>\n<p>Using a module loader such as <a href=\"https://github.com/systemjs/systemjs\">SystemJS</a>,\n<a href=\"https://webpack.github.io/\">Webpack</a>, or <a href=\"http://browserify.org/\">Browserify</a>\nallows us to use the built-in module systems of TypeScript or ES2015.\nYou can use the <code>import</code> and <code>export</code> features that explicitly specify what code can\nand will be shared between different parts of the application. For ES5 applications\nyou can use CommonJS style <code>require</code> and <code>module.exports</code> features. In both cases,\nthe module loader will then take care of loading all the code the application needs\nin the correct order.</p>\n<p>When moving applications into production, module loaders also make it easier\nto package them all up into production bundles with batteries included.</p>\n<h3 id=\"migrating-to-typescript\">Migrating to TypeScript<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#migrating-to-typescript\"><i class=\"material-icons\">link</i></a></h3>\n<p>If part of the Angular upgrade plan is to also take TypeScript into use, it makes\nsense to bring in the TypeScript compiler even before the upgrade itself begins.\nThis means there's one less thing to learn and think about during the actual upgrade.\nIt also means you can start using TypeScript features in your AngularJS code.</p>\n<p>Since TypeScript is a superset of ECMAScript 2015, which in turn is a superset\nof ECMAScript 5, \"switching\" to TypeScript doesn't necessarily require anything\nmore than installing the TypeScript compiler and renaming files from\n<code>*.js</code> to <code>*.ts</code>. But just doing that is not hugely useful or exciting, of course.\nAdditional steps like the following can give us much more bang for the buck:</p>\n<ul>\n<li>\n<p>For applications that use a module loader, TypeScript imports and exports\n(which are really ECMAScript 2015 imports and exports) can be used to organize\ncode into modules.</p>\n</li>\n<li>\n<p>Type annotations can be gradually added to existing functions and variables\nto pin down their types and get benefits like build-time error checking,\ngreat autocompletion support and inline documentation.</p>\n</li>\n<li>\n<p>JavaScript features new to ES2015, like arrow functions, <code>let</code>s and <code>const</code>s,\ndefault function parameters, and destructuring assignments can also be gradually\nadded to make the code more expressive.</p>\n</li>\n<li>\n<p>Services and controllers can be turned into <em>classes</em>. That way they'll be a step\ncloser to becoming Angular service and component classes, which will make\nlife easier after the upgrade.</p>\n</li>\n</ul>\n<h3 id=\"using-component-directives\">Using Component Directives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#using-component-directives\"><i class=\"material-icons\">link</i></a></h3>\n<p>In Angular, components are the main primitive from which user interfaces\nare built. You define the different portions of the UI as components and\ncompose them into a full user experience.</p>\n<p>You can also do this in AngularJS, using <em>component directives</em>. These are\ndirectives that define their own templates, controllers, and input/output bindings -\nthe same things that Angular components define. Applications built with\ncomponent directives are much easier to migrate to Angular than applications\nbuilt with lower-level features like <code>ng-controller</code>, <code>ng-include</code>, and scope\ninheritance.</p>\n<p>To be Angular compatible, an AngularJS component directive should configure\nthese attributes:</p>\n<ul>\n<li><code>restrict: 'E'</code>. Components are usually used as elements.</li>\n<li><code>scope: {}</code> - an isolate scope. In Angular, components are always isolated\nfrom their surroundings, and you should do this in AngularJS too.</li>\n<li><code>bindToController: {}</code>. Component inputs and outputs should be bound\nto the controller instead of using the <code>$scope</code>.</li>\n<li><code>controller</code> and <code>controllerAs</code>. Components have their own controllers.</li>\n<li><code>template</code> or <code>templateUrl</code>. Components have their own templates.</li>\n</ul>\n<p>Component directives may also use the following attributes:</p>\n<ul>\n<li><code>transclude: true/{}</code>, if the component needs to transclude content from elsewhere.</li>\n<li><code>require</code>, if the component needs to communicate with some parent component's\ncontroller.</li>\n</ul>\n<p>Component directives <strong>should not</strong> use the following attributes:</p>\n<ul>\n<li><code>compile</code>. This will not be supported in Angular.</li>\n<li><code>replace: true</code>. Angular never replaces a component element with the\ncomponent template. This attribute is also deprecated in AngularJS.</li>\n<li><code>priority</code> and <code>terminal</code>. While AngularJS components may use these,\nthey are not used in Angular and it is better not to write code\nthat relies on them.</li>\n</ul>\n<p>An AngularJS component directive that is fully aligned with the Angular\narchitecture may look something like this:</p>\n<code-example path=\"upgrade-module/src/app/hero-detail.directive.ts\" header=\"hero-detail.directive.ts\">\nexport function heroDetailDirective() {\n return {\n restrict: 'E',\n scope: {},\n bindToController: {\n hero: '=',\n deleted: '&'\n },\n template: `\n <h2>{{$ctrl.hero.name}} details!</h2>\n <div><label>id: </label>{{$ctrl.hero.id}}</div>\n <button ng-click=\"$ctrl.onDelete()\">Delete</button>\n `,\n controller: function HeroDetailController() {\n this.onDelete = () => {\n this.deleted({hero: this.hero});\n };\n },\n controllerAs: '$ctrl'\n };\n}\n\n\n</code-example>\n<p>AngularJS 1.5 introduces the <a href=\"https://docs.angularjs.org/api/ng/type/angular.Module#component\">component API</a>\nthat makes it easier to define component directives like these. It is a good idea to use\nthis API for component directives for several reasons:</p>\n<ul>\n<li>It requires less boilerplate code.</li>\n<li>It enforces the use of component best practices like <code>controllerAs</code>.</li>\n<li>It has good default values for directive attributes like <code>scope</code> and <code>restrict</code>.</li>\n</ul>\n<p>The component directive example from above looks like this when expressed\nusing the component API:</p>\n<code-example path=\"upgrade-module/src/app/upgrade-io/hero-detail.component.ts\" region=\"hero-detail-io\" header=\"hero-detail.component.ts\">\nexport const heroDetail = {\n bindings: {\n hero: '<',\n deleted: '&'\n },\n template: `\n <h2>{{$ctrl.hero.name}} details!</h2>\n <div><label>id: </label>{{$ctrl.hero.id}}</div>\n <button ng-click=\"$ctrl.onDelete()\">Delete</button>\n `,\n controller: function HeroDetailController() {\n this.onDelete = () => {\n this.deleted(this.hero);\n };\n }\n};\n\n</code-example>\n<p>Controller lifecycle hook methods <code>$onInit()</code>, <code>$onDestroy()</code>, and <code>$onChanges()</code>\nare another convenient feature that AngularJS 1.5 introduces. They all have nearly\nexact <a href=\"guide/lifecycle-hooks\">equivalents in Angular</a>, so organizing component lifecycle\nlogic around them will ease the eventual Angular upgrade process.</p>\n<h2 id=\"upgrading-with-ngupgrade\">Upgrading with ngUpgrade<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#upgrading-with-ngupgrade\"><i class=\"material-icons\">link</i></a></h2>\n<p>The ngUpgrade library in Angular is a very useful tool for upgrading\nanything but the smallest of applications. With it you can mix and match\nAngularJS and Angular components in the same application and have them interoperate\nseamlessly. That means you don't have to do the upgrade work all at once,\nsince there's a natural coexistence between the two frameworks during the\ntransition period.</p>\n<h3 id=\"how-ngupgrade-works\">How ngUpgrade Works<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#how-ngupgrade-works\"><i class=\"material-icons\">link</i></a></h3>\n<p>One of the primary tools provided by ngUpgrade is called the <code><a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a></code>.\nThis is a module that contains utilities for bootstrapping and managing hybrid\napplications that support both Angular and AngularJS code.</p>\n<p>When you use ngUpgrade, what you're really doing is <em>running both AngularJS and\nAngular at the same time</em>. All Angular code is running in the Angular\nframework, and AngularJS code in the AngularJS framework. Both of these are the\nactual, fully featured versions of the frameworks. There is no emulation going on,\nso you can expect to have all the features and natural behavior of both frameworks.</p>\n<p>What happens on top of this is that components and services managed by one\nframework can interoperate with those from the other framework. This happens\nin three main areas: Dependency injection, the DOM, and change detection.</p>\n<h4 id=\"dependency-injection\">Dependency Injection<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#dependency-injection\"><i class=\"material-icons\">link</i></a></h4>\n<p>Dependency injection is front and center in both AngularJS and\nAngular, but there are some key differences between the two\nframeworks in how it actually works.</p>\n<table>\n <tbody><tr>\n <th>\n AngularJS\n </th>\n <th>\n Angular\n </th>\n </tr>\n <tr>\n <td>\n Dependency injection tokens are always strings\n </td>\n <td>\n<p> Tokens <a href=\"guide/dependency-injection\">can have different types</a>.\nThey are often classes. They may also be strings.</p>\n </td>\n </tr>\n <tr>\n <td>\n<p> There is exactly one injector. Even in multi-module applications,\neverything is poured into one big namespace.</p>\n </td>\n <td>\n<p> There is a <a href=\"guide/hierarchical-dependency-injection\">tree hierarchy of injectors</a>,\nwith a root injector and an additional injector for each component.</p>\n </td>\n </tr>\n</tbody></table>\n<p>Even accounting for these differences you can still have dependency injection\ninteroperability. <code><a href=\"api/upgrade/static\" class=\"code-anchor\">upgrade/static</a></code> resolves the differences and makes\neverything work seamlessly:</p>\n<ul>\n<li>\n<p>You can make AngularJS services available for injection to Angular code\nby <em>upgrading</em> them. The same singleton instance of each service is shared\nbetween the frameworks. In Angular these services will always be in the\n<em>root injector</em> and available to all components.</p>\n</li>\n<li>\n<p>You can also make Angular services available for injection to AngularJS code\nby <em>downgrading</em> them. Only services from the Angular root injector can\nbe downgraded. Again, the same singleton instances are shared between the frameworks.\nWhen you register a downgraded service, you must explicitly specify a <em>string token</em> that you want to\nuse in AngularJS.</p>\n</li>\n</ul>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/upgrade/injectors.png\" alt=\"The two injectors in a hybrid application\" width=\"700\" height=\"262\">\n</div>\n<h4 id=\"components-and-the-dom\">Components and the DOM<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#components-and-the-dom\"><i class=\"material-icons\">link</i></a></h4>\n<p>In the DOM of a hybrid ngUpgrade application are components and\ndirectives from both AngularJS and Angular. These components\ncommunicate with each other by using the input and output bindings\nof their respective frameworks, which ngUpgrade bridges together. They may also\ncommunicate through shared injected dependencies, as described above.</p>\n<p>The key thing to understand about a hybrid application is that every element in the DOM is owned by exactly one of the two frameworks.\nThe other framework ignores it. If an element is\nowned by AngularJS, Angular treats it as if it didn't exist,\nand vice versa.</p>\n<p>So normally a hybrid application begins life as an AngularJS application,\nand it is AngularJS that processes the root template, e.g. the index.html.\nAngular then steps into the picture when an Angular component is used somewhere\nin an AngularJS template. That component's template will then be managed\nby Angular, and it may contain any number of Angular components and\ndirectives.</p>\n<p>Beyond that, you may interleave the two frameworks.\nYou always cross the boundary between the two frameworks by one of two\nways:</p>\n<ol>\n<li>\n<p>By using a component from the other framework: An AngularJS template\nusing an Angular component, or an Angular template using an\nAngularJS component.</p>\n</li>\n<li>\n<p>By transcluding or projecting content from the other framework. ngUpgrade\nbridges the related concepts of AngularJS transclusion and Angular content\nprojection together.</p>\n</li>\n</ol>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/upgrade/dom.png\" alt=\"DOM element ownership in a hybrid application\" width=\"500\" height=\"294\">\n</div>\n<p>Whenever you use a component that belongs to the other framework, a\nswitch between framework boundaries occurs. However, that switch only\nhappens to the elements in the template of that component. Consider a situation\nwhere you use an Angular component from AngularJS like this:</p>\n<code-example language=\"html\" escape=\"html\">\n <a-component></a-component>\n</code-example>\n<p>The DOM element <code><a-component></code> will remain to be an AngularJS managed\nelement, because it's defined in an AngularJS template. That also\nmeans you can apply additional AngularJS directives to it, but <em>not</em>\nAngular directives. It is only in the template of the <code><a-component></code>\nwhere Angular steps in. This same rule also applies when you\nuse AngularJS component directives from Angular.</p>\n<h4 id=\"change-detection\">Change Detection<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#change-detection\"><i class=\"material-icons\">link</i></a></h4>\n<p>The <code>scope.$apply()</code> is how AngularJS detects changes and updates data bindings.\nAfter every event that occurs, <code>scope.$apply()</code> gets called. This is done either\nautomatically by the framework, or manually by you.</p>\n<p>In Angular things are different. While change detection still\noccurs after every event, no one needs to call <code>scope.$apply()</code> for\nthat to happen. This is because all Angular code runs inside something\ncalled the <a href=\"api/core/NgZone\">Angular zone</a>. Angular always\nknows when the code finishes, so it also knows when it should kick off\nchange detection. The code itself doesn't have to call <code>scope.$apply()</code>\nor anything like it.</p>\n<p>In the case of hybrid applications, the <code><a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a></code> bridges the\nAngularJS and Angular approaches. Here's what happens:</p>\n<ul>\n<li>\n<p>Everything that happens in the application runs inside the Angular zone.\nThis is true whether the event originated in AngularJS or Angular code.\nThe zone triggers Angular change detection after every event.</p>\n</li>\n<li>\n<p>The <code><a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a></code> will invoke the AngularJS <code>$rootScope.$apply()</code> after\nevery turn of the Angular zone. This also triggers AngularJS change\ndetection after every event.</p>\n</li>\n</ul>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/upgrade/change_detection.png\" alt=\"Change detection in a hybrid application\" width=\"600\" height=\"163\">\n</div>\n<p>In practice, you do not need to call <code>$apply()</code>,\nregardless of whether it is in AngularJS or Angular. The\n<code><a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a></code> does it for us. You <em>can</em> still call <code>$apply()</code> so there\nis no need to remove such calls from existing code. Those calls just trigger\nadditional AngularJS change detection checks in a hybrid application.</p>\n<p>When you downgrade an Angular component and then use it from AngularJS,\nthe component's inputs will be watched using AngularJS change detection.\nWhen those inputs change, the corresponding properties in the component\nare set. You can also hook into the changes by implementing the\n<a href=\"api/core/OnChanges\">OnChanges</a> interface in the component,\njust like you could if it hadn't been downgraded.</p>\n<p>Correspondingly, when you upgrade an AngularJS component and use it from Angular,\nall the bindings defined for the component directive's <code>scope</code> (or <code>bindToController</code>)\nwill be hooked into Angular change detection. They will be treated\nas regular Angular inputs. Their values will be written to the upgraded component's\nscope (or controller) when they change.</p>\n<h3 id=\"using-upgrademodule-with-angular-ngmodules\">Using UpgradeModule with Angular <em>NgModules</em><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#using-upgrademodule-with-angular-ngmodules\"><i class=\"material-icons\">link</i></a></h3>\n<p>Both AngularJS and Angular have their own concept of modules\nto help organize an application into cohesive blocks of functionality.</p>\n<p>Their details are quite different in architecture and implementation.\nIn AngularJS, you add Angular assets to the <code>angular.module</code> property.\nIn Angular, you create one or more classes adorned with an <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> decorator\nthat describes Angular assets in metadata. The differences blossom from there.</p>\n<p>In a hybrid application you run both versions of Angular at the same time.\nThat means that you need at least one module each from both AngularJS and Angular.\nYou will import <code><a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a></code> inside the NgModule, and then use it for\nbootstrapping the AngularJS module.</p>\n<div class=\"alert is-helpful\">\n<p>For more information, see <a href=\"guide/ngmodules\">NgModules</a>.</p>\n</div>\n<h3 id=\"bootstrapping-hybrid-applications\">Bootstrapping hybrid applications<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#bootstrapping-hybrid-applications\"><i class=\"material-icons\">link</i></a></h3>\n<p>To bootstrap a hybrid application, you must bootstrap each of the Angular and\nAngularJS parts of the application. You must bootstrap the Angular bits first and\nthen ask the <code><a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a></code> to bootstrap the AngularJS bits next.</p>\n<p>In an AngularJS application you have a root AngularJS module, which will also\nbe used to bootstrap the AngularJS application.</p>\n<code-example path=\"upgrade-module/src/app/ajs-bootstrap/app.module.ts\" region=\"ng1module\" header=\"app.module.ts\">\nangular.module('heroApp', [])\n .controller('MainCtrl', function() {\n this.message = 'Hello world';\n });\n\n</code-example>\n<p>Pure AngularJS applications can be automatically bootstrapped by using an <code>ng-app</code>\ndirective somewhere on the HTML page. But for hybrid applications, you manually bootstrap via the\n<code><a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a></code>. Therefore, it is a good preliminary step to switch AngularJS applications to use the\nmanual JavaScript <a href=\"https://docs.angularjs.org/api/ng/function/angular.bootstrap\"><code>angular.bootstrap</code></a>\nmethod even before switching them to hybrid mode.</p>\n<p>Say you have an <code>ng-app</code> driven bootstrap such as this one:</p>\n<code-example path=\"upgrade-module/src/index-ng-app.html\">\n<!DOCTYPE HTML>\n<html lang=\"en\">\n <head>\n <base href=\"/\">\n <script src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js\"></script>\n <script src=\"app/ajs-ng-app/app.module.js\"></script>\n </head>\n\n <body ng-app=\"heroApp\" ng-strict-di>\n <div id=\"message\" ng-controller=\"MainCtrl as mainCtrl\">\n {{ mainCtrl.message }}\n </div>\n </body>\n</html>\n\n\n</code-example>\n<p>You can remove the <code>ng-app</code> and <code>ng-strict-di</code> directives from the HTML\nand instead switch to calling <code>angular.bootstrap</code> from JavaScript, which\nwill result in the same thing:</p>\n<code-example path=\"upgrade-module/src/app/ajs-bootstrap/app.module.ts\" region=\"bootstrap\" header=\"app.module.ts\">\nangular.bootstrap(document.body, ['heroApp'], { strictDi: true });\n\n</code-example>\n<p>To begin converting your AngularJS application to a hybrid, you need to load the Angular framework.\nYou can see how this can be done with SystemJS by following the instructions in <a href=\"guide/upgrade-setup\">Setup for Upgrading to AngularJS</a> for selectively copying code from the <a href=\"https://github.com/angular/quickstart\">QuickStart github repository</a>.</p>\n<p>You also need to install the <code>@angular/upgrade</code> package via <code>npm install @angular/upgrade --save</code>\nand add a mapping for the <code>@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a></code> package:</p>\n<code-example path=\"upgrade-module/src/systemjs.config.1.js\" region=\"upgrade-static-umd\" header=\"systemjs.config.js (map)\">\n'@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',\n\n</code-example>\n<p>Next, create an <code>app.module.ts</code> file and add the following <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> class:</p>\n<code-example path=\"upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts\" region=\"ngmodule\" header=\"app.module.ts\">\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a> } from '@angular/platform-browser';\nimport { <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a> } from '@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>\n ]\n})\nexport class AppModule {\n constructor(private upgrade: <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>) { }\n ngDoBootstrap() {\n this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });\n }\n}\n\n</code-example>\n<p>This bare minimum <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> imports <code><a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a></code>, the module every Angular browser-based app must have.\nIt also imports <code><a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a></code> from <code>@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a></code>, which exports providers that will be used\nfor upgrading and downgrading services and components.</p>\n<p>In the constructor of the <code>AppModule</code>, use dependency injection to get a hold of the <code><a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a></code> instance,\nand use it to bootstrap the AngularJS app in the <code>AppModule.ngDoBootstrap</code> method.\nThe <code>upgrade.bootstrap</code> method takes the exact same arguments as <a href=\"https://docs.angularjs.org/api/ng/function/angular.bootstrap\">angular.bootstrap</a>:</p>\n<div class=\"alert is-helpful\">\n<p>Note that you do not add a <code>bootstrap</code> declaration to the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> decorator, since\nAngularJS will own the root template of the application.</p>\n</div>\n<p>Now you can bootstrap <code>AppModule</code> using the <code>platformBrowserDynamic.bootstrapModule</code> method.</p>\n<code-example path=\"upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts\" region=\"bootstrap\" header=\"app.module.ts'\">\nimport { <a href=\"api/platform-browser-dynamic/platformBrowserDynamic\" class=\"code-anchor\">platformBrowserDynamic</a> } from '@angular/platform-browser-dynamic';\n\n<a href=\"api/platform-browser-dynamic/platformBrowserDynamic\" class=\"code-anchor\">platformBrowserDynamic</a>().bootstrapModule(AppModule);\n\n</code-example>\n<p>Congratulations! You're running a hybrid application! The\nexisting AngularJS code works as before <em>and</em> you're ready to start adding Angular code.</p>\n<h3 id=\"using-angular-components-from-angularjs-code\">Using Angular Components from AngularJS Code<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#using-angular-components-from-angularjs-code\"><i class=\"material-icons\">link</i></a></h3>\n<img src=\"generated/images/guide/upgrade/ajs-to-a.png\" alt=\"Using an Angular component from AngularJS code\" class=\"left\" width=\"250\" height=\"44\">\n<p>Once you're running a hybrid app, you can start the gradual process of upgrading\ncode. One of the more common patterns for doing that is to use an Angular component\nin an AngularJS context. This could be a completely new component or one that was\npreviously AngularJS but has been rewritten for Angular.</p>\n<p>Say you have a simple Angular component that shows information about a hero:</p>\n<code-example path=\"upgrade-module/src/app/downgrade-static/hero-detail.component.ts\" header=\"hero-detail.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'hero-detail',\n template: `\n <h2>Windstorm details!</h2>\n <div><label>id: </label>1</div>\n `\n})\nexport class HeroDetailComponent { }\n\n\n</code-example>\n<p>If you want to use this component from AngularJS, you need to <em>downgrade</em> it\nusing the <code><a href=\"api/upgrade/static/downgradeComponent\" class=\"code-anchor\">downgradeComponent</a>()</code> method. The result is an AngularJS\n<em>directive</em>, which you can then register in the AngularJS module:</p>\n<code-example path=\"upgrade-module/src/app/downgrade-static/app.module.ts\" region=\"downgradecomponent\" header=\"app.module.ts\">\nimport { HeroDetailComponent } from './hero-detail.component';\n\n/* . . . */\n\nimport { <a href=\"api/upgrade/static/downgradeComponent\" class=\"code-anchor\">downgradeComponent</a> } from '@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>';\n\nangular.module('heroApp', [])\n .directive(\n 'heroDetail',\n <a href=\"api/upgrade/static/downgradeComponent\" class=\"code-anchor\">downgradeComponent</a>({ component: HeroDetailComponent }) as angular.IDirectiveFactory\n );\n\n\n</code-example>\n<div class=\"alert is-helpful\">\n<p>By default, Angular change detection will also run on the component for every\nAngularJS <code>$digest</code> cycle. If you wish to only have change detection run when\nthe inputs change, you can set <code>propagateDigest</code> to <code>false</code> when calling\n<code><a href=\"api/upgrade/static/downgradeComponent\" class=\"code-anchor\">downgradeComponent</a>()</code>.</p>\n</div>\n<p>Because <code>HeroDetailComponent</code> is an Angular component, you must also add it to the\n<code>declarations</code> in the <code>AppModule</code>.</p>\n<p>And because this component is being used from the AngularJS module, and is an entry point into\nthe Angular application, you must add it to the <code>entryComponents</code> for the\nNgModule.</p>\n<code-example path=\"upgrade-module/src/app/downgrade-static/app.module.ts\" region=\"ngmodule\" header=\"app.module.ts\">\nimport { HeroDetailComponent } from './hero-detail.component';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>\n ],\n declarations: [\n HeroDetailComponent\n ],\n entryComponents: [\n HeroDetailComponent\n ]\n})\nexport class AppModule {\n constructor(private upgrade: <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>) { }\n ngDoBootstrap() {\n this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });\n }\n}\n\n</code-example>\n<div class=\"alert is-helpful\">\n<p>All Angular components, directives and pipes must be declared in an NgModule.</p>\n</div>\n<p>The net result is an AngularJS directive called <code>heroDetail</code>, that you can\nuse like any other directive in AngularJS templates.</p>\n<code-example path=\"upgrade-module/src/index-downgrade-static.html\" region=\"usecomponent\">\n<hero-detail></hero-detail>\n\n</code-example>\n<div class=\"alert is-helpful\">\n<p>Note that this AngularJS is an element directive (<code>restrict: 'E'</code>) called <code>heroDetail</code>.\nAn AngularJS element directive is matched based on its <em>name</em>.\n<em>The <code>selector</code> metadata of the downgraded Angular component is ignored.</em></p>\n</div>\n<p>Most components are not quite this simple, of course. Many of them\nhave <em>inputs and outputs</em> that connect them to the outside world. An\nAngular hero detail component with inputs and outputs might look\nlike this:</p>\n<code-example path=\"upgrade-module/src/app/downgrade-io/hero-detail.component.ts\" header=\"hero-detail.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a>, <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a>, <a href=\"api/core/Input\" class=\"code-anchor\">Input</a>, <a href=\"api/core/Output\" class=\"code-anchor\">Output</a> } from '@angular/core';\nimport { Hero } from '../hero';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'hero-detail',\n template: `\n <h2>{{hero.name}} details!</h2>\n <div><label>id: </label>{{hero.id}}</div>\n <button (click)=\"onDelete()\">Delete</button>\n `\n})\nexport class HeroDetailComponent {\n @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() hero: Hero;\n @<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>() deleted = new <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a><Hero>();\n onDelete() {\n this.deleted.emit(this.hero);\n }\n}\n\n\n</code-example>\n<p>These inputs and outputs can be supplied from the AngularJS template, and the\n<code><a href=\"api/upgrade/static/downgradeComponent\" class=\"code-anchor\">downgradeComponent</a>()</code> method takes care of wiring them up:</p>\n<code-example path=\"upgrade-module/src/index-downgrade-io.html\" region=\"usecomponent\">\n<div ng-controller=\"MainController as mainCtrl\">\n <hero-detail [hero]=\"mainCtrl.hero\"\n (deleted)=\"mainCtrl.onDelete($event)\">\n </hero-detail>\n</div>\n\n</code-example>\n<p>Note that even though you are in an AngularJS template, <strong>you're using Angular\nattribute syntax to bind the inputs and outputs</strong>. This is a requirement for downgraded\ncomponents. The expressions themselves are still regular AngularJS expressions.</p>\n<div class=\"callout is-important\">\n<header>\n Use kebab-case for downgraded component attributes\n</header>\n<p>There's one notable exception to the rule of using Angular attribute syntax\nfor downgraded components. It has to do with input or output names that consist\nof multiple words. In Angular, you would bind these attributes using camelCase:</p>\n<code-example format=\"\">\n [myHero]=\"hero\"\n (heroDeleted)=\"handleHeroDeleted($event)\"\n</code-example>\n<p>But when using them from AngularJS templates, you must use kebab-case:</p>\n<code-example format=\"\">\n [my-hero]=\"hero\"\n (hero-deleted)=\"handleHeroDeleted($event)\"\n</code-example>\n</div>\n<p>The <code>$event</code> variable can be used in outputs to gain access to the\nobject that was emitted. In this case it will be the <code>Hero</code> object, because\nthat is what was passed to <code>this.deleted.emit()</code>.</p>\n<p>Since this is an AngularJS template, you can still use other AngularJS\ndirectives on the element, even though it has Angular binding attributes on it.\nFor example, you can easily make multiple copies of the component using <code>ng-repeat</code>:</p>\n<code-example path=\"upgrade-module/src/index-downgrade-io.html\" region=\"userepeatedcomponent\">\n<div ng-controller=\"MainController as mainCtrl\">\n <hero-detail [hero]=\"hero\"\n (deleted)=\"mainCtrl.onDelete($event)\"\n ng-repeat=\"hero in mainCtrl.heroes\">\n </hero-detail>\n</div>\n\n</code-example>\n<h3 id=\"using-angularjs-component-directives-from-angular-code\">Using AngularJS Component Directives from Angular Code<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#using-angularjs-component-directives-from-angular-code\"><i class=\"material-icons\">link</i></a></h3>\n<img src=\"generated/images/guide/upgrade/a-to-ajs.png\" alt=\"Using an AngularJS component from Angular code\" class=\"left\" width=\"250\" height=\"44\">\n<p>So, you can write an Angular component and then use it from AngularJS\ncode. This is useful when you start to migrate from lower-level\ncomponents and work your way up. But in some cases it is more convenient\nto do things in the opposite order: To start with higher-level components\nand work your way down. This too can be done using the <code><a href=\"api/upgrade/static\" class=\"code-anchor\">upgrade/static</a></code>.\nYou can <em>upgrade</em> AngularJS component directives and then use them from\nAngular.</p>\n<p>Not all kinds of AngularJS directives can be upgraded. The directive\nreally has to be a <em>component directive</em>, with the characteristics\n<a href=\"guide/upgrade#using-component-directives\">described in the preparation guide above</a>.\nThe safest bet for ensuring compatibility is using the\n<a href=\"https://docs.angularjs.org/api/ng/type/angular.Module\">component API</a>\nintroduced in AngularJS 1.5.</p>\n<p>A simple example of an upgradable component is one that just has a template\nand a controller:</p>\n<code-example path=\"upgrade-module/src/app/upgrade-static/hero-detail.component.ts\" region=\"hero-detail\" header=\"hero-detail.component.ts\">\nexport const heroDetail = {\n template: `\n <h2>Windstorm details!</h2>\n <div><label>id: </label>1</div>\n `,\n controller: function HeroDetailController() {\n }\n};\n\n</code-example>\n<p>You can <em>upgrade</em> this component to Angular using the <code><a href=\"api/upgrade/static/UpgradeComponent\" class=\"code-anchor\">UpgradeComponent</a></code> class.\nBy creating a new Angular <strong>directive</strong> that extends <code><a href=\"api/upgrade/static/UpgradeComponent\" class=\"code-anchor\">UpgradeComponent</a></code> and doing a <code>super</code> call\ninside its constructor, you have a fully upgraded AngularJS component to be used inside Angular.\nAll that is left is to add it to <code>AppModule</code>'s <code>declarations</code> array.</p>\n<code-example path=\"upgrade-module/src/app/upgrade-static/hero-detail.component.ts\" region=\"hero-detail-upgrade\" header=\"hero-detail.component.ts\">\nimport { <a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>, <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>, <a href=\"api/core/Injector\" class=\"code-anchor\">Injector</a>, <a href=\"api/core/SimpleChanges\" class=\"code-anchor\">SimpleChanges</a> } from '@angular/core';\nimport { <a href=\"api/upgrade/static/UpgradeComponent\" class=\"code-anchor\">UpgradeComponent</a> } from '@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>';\n\n@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>({\n selector: 'hero-detail'\n})\nexport class HeroDetailDirective extends <a href=\"api/upgrade/static/UpgradeComponent\" class=\"code-anchor\">UpgradeComponent</a> {\n constructor(elementRef: <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>, injector: <a href=\"api/core/Injector\" class=\"code-anchor\">Injector</a>) {\n super('heroDetail', elementRef, injector);\n }\n}\n\n</code-example>\n<code-example path=\"upgrade-module/src/app/upgrade-static/app.module.ts\" region=\"hero-detail-upgrade\" header=\"app.module.ts\">\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>\n ],\n declarations: [\n HeroDetailDirective,\n/* . . . */\n ]\n})\nexport class AppModule {\n constructor(private upgrade: <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>) { }\n ngDoBootstrap() {\n this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });\n }\n}\n\n</code-example>\n<div class=\"alert is-helpful\">\n<p>Upgraded components are Angular <strong>directives</strong>, instead of <strong>components</strong>, because Angular\nis unaware that AngularJS will create elements under it. As far as Angular knows, the upgraded\ncomponent is just a directive - a tag - and Angular doesn't have to concern itself with\nits children.</p>\n</div>\n<p>An upgraded component may also have inputs and outputs, as defined by\nthe scope/controller bindings of the original AngularJS component\ndirective. When you use the component from an Angular template,\nprovide the inputs and outputs using <strong>Angular template syntax</strong>,\nobserving the following rules:</p>\n<table>\n <tbody><tr>\n <th>\n </th>\n <th>\n Binding definition\n </th>\n <th>\n Template syntax\n </th>\n </tr>\n <tr>\n <th>\n Attribute binding\n </th>\n <td>\n<p> <code>myAttribute: '@myAttribute'</code></p>\n </td>\n <td>\n<p> <code><my-component myAttribute=\"value\"></code></p>\n </td>\n </tr>\n <tr>\n <th>\n Expression binding\n </th>\n <td>\n<p> <code>myOutput: '&myOutput'</code></p>\n </td>\n <td>\n<p> <code><my-component (myOutput)=\"action()\"></code></p>\n </td>\n </tr>\n <tr>\n <th>\n One-way binding\n </th>\n <td>\n<p> <code>myValue: '<myValue'</code></p>\n </td>\n <td>\n<p> <code><my-component [myValue]=\"anExpression\"></code></p>\n </td>\n </tr>\n <tr>\n <th>\n Two-way binding\n </th>\n <td>\n<p> <code>myValue: '=myValue'</code></p>\n </td>\n <td>\n<p> As a two-way binding: <code><my-component [(myValue)]=\"anExpression\"></code>.\nSince most AngularJS two-way bindings actually only need a one-way binding\nin practice, <code><my-component [myValue]=\"anExpression\"></code> is often enough.</p>\n </td>\n </tr>\n</tbody></table>\n<p>For example, imagine a hero detail AngularJS component directive\nwith one input and one output:</p>\n<code-example path=\"upgrade-module/src/app/upgrade-io/hero-detail.component.ts\" region=\"hero-detail-io\" header=\"hero-detail.component.ts\">\nexport const heroDetail = {\n bindings: {\n hero: '<',\n deleted: '&'\n },\n template: `\n <h2>{{$ctrl.hero.name}} details!</h2>\n <div><label>id: </label>{{$ctrl.hero.id}}</div>\n <button ng-click=\"$ctrl.onDelete()\">Delete</button>\n `,\n controller: function HeroDetailController() {\n this.onDelete = () => {\n this.deleted(this.hero);\n };\n }\n};\n\n</code-example>\n<p>You can upgrade this component to Angular, annotate inputs and outputs in the upgrade directive,\nand then provide the input and output using Angular template syntax:</p>\n<code-example path=\"upgrade-module/src/app/upgrade-io/hero-detail.component.ts\" region=\"hero-detail-io-upgrade\" header=\"hero-detail.component.ts\">\nimport { <a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>, <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>, <a href=\"api/core/Injector\" class=\"code-anchor\">Injector</a>, <a href=\"api/core/Input\" class=\"code-anchor\">Input</a>, <a href=\"api/core/Output\" class=\"code-anchor\">Output</a>, <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a> } from '@angular/core';\nimport { <a href=\"api/upgrade/static/UpgradeComponent\" class=\"code-anchor\">UpgradeComponent</a> } from '@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>';\nimport { Hero } from '../hero';\n\n@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>({\n selector: 'hero-detail'\n})\nexport class HeroDetailDirective extends <a href=\"api/upgrade/static/UpgradeComponent\" class=\"code-anchor\">UpgradeComponent</a> {\n @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() hero: Hero;\n @<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>() deleted: <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a><Hero>;\n\n constructor(elementRef: <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>, injector: <a href=\"api/core/Injector\" class=\"code-anchor\">Injector</a>) {\n super('heroDetail', elementRef, injector);\n }\n}\n\n</code-example>\n<code-example path=\"upgrade-module/src/app/upgrade-io/container.component.ts\" header=\"container.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\nimport { Hero } from '../hero';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'my-container',\n template: `\n <h1>Tour of Heroes</h1>\n <hero-detail [hero]=\"hero\"\n (deleted)=\"heroDeleted($event)\">\n </hero-detail>\n `\n})\nexport class ContainerComponent {\n hero = new Hero(1, 'Windstorm');\n heroDeleted(hero: Hero) {\n hero.name = 'Ex-' + hero.name;\n }\n}\n\n\n</code-example>\n<h3 id=\"projecting-angularjs-content-into-angular-components\">Projecting AngularJS Content into Angular Components<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#projecting-angularjs-content-into-angular-components\"><i class=\"material-icons\">link</i></a></h3>\n<img src=\"generated/images/guide/upgrade/ajs-to-a-with-projection.png\" alt=\"Projecting AngularJS content into Angular\" class=\"left\" width=\"250\" height=\"48\">\n<p>When you are using a downgraded Angular component from an AngularJS\ntemplate, the need may arise to <em>transclude</em> some content into it. This\nis also possible. While there is no such thing as transclusion in Angular,\nthere is a very similar concept called <em>content projection</em>. <code><a href=\"api/upgrade/static\" class=\"code-anchor\">upgrade/static</a></code>\nis able to make these two features interoperate.</p>\n<p>Angular components that support content projection make use of an <code><ng-content></code>\ntag within them. Here's an example of such a component:</p>\n<code-example path=\"upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts\" header=\"hero-detail.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a>, <a href=\"api/core/Input\" class=\"code-anchor\">Input</a> } from '@angular/core';\nimport { Hero } from '../hero';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'hero-detail',\n template: `\n <h2>{{hero.name}}</h2>\n <div>\n <ng-content></ng-content>\n </div>\n `\n})\nexport class HeroDetailComponent {\n @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() hero: Hero;\n}\n\n\n</code-example>\n<p>When using the component from AngularJS, you can supply contents for it. Just\nlike they would be transcluded in AngularJS, they get projected to the location\nof the <code><ng-content></code> tag in Angular:</p>\n<code-example path=\"upgrade-module/src/index-ajs-to-a-projection.html\" region=\"usecomponent\">\n<div ng-controller=\"MainController as mainCtrl\">\n <hero-detail [hero]=\"mainCtrl.hero\">\n <!-- Everything here will get projected -->\n <p>{{mainCtrl.hero.description}}</p>\n </hero-detail>\n</div>\n\n</code-example>\n<div class=\"alert is-helpful\">\n<p>When AngularJS content gets projected inside an Angular component, it still\nremains in \"AngularJS land\" and is managed by the AngularJS framework.</p>\n</div>\n<h3 id=\"transcluding-angular-content-into-angularjs-component-directives\">Transcluding Angular Content into AngularJS Component Directives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#transcluding-angular-content-into-angularjs-component-directives\"><i class=\"material-icons\">link</i></a></h3>\n<img src=\"generated/images/guide/upgrade/a-to-ajs-with-transclusion.png\" alt=\"Projecting Angular content into AngularJS\" class=\"left\" width=\"250\" height=\"48\">\n<p>Just as you can project AngularJS content into Angular components,\nyou can <em>transclude</em> Angular content into AngularJS components, whenever\nyou are using upgraded versions from them.</p>\n<p>When an AngularJS component directive supports transclusion, it may use\nthe <code>ng-transclude</code> directive in its template to mark the transclusion\npoint:</p>\n<code-example path=\"upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts\" header=\"hero-detail.component.ts\">\nexport const heroDetail = {\n bindings: {\n hero: '='\n },\n template: `\n <h2>{{$ctrl.hero.name}}</h2>\n <div>\n <ng-transclude></ng-transclude>\n </div>\n `,\n transclude: true\n};\n\n</code-example>\n<p>If you upgrade this component and use it from Angular, you can populate\nthe component tag with contents that will then get transcluded:</p>\n<code-example path=\"upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts\" header=\"container.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\nimport { Hero } from '../hero';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'my-container',\n template: `\n <hero-detail [hero]=\"hero\">\n <!-- Everything here will get transcluded -->\n <p>{{hero.description}}</p>\n </hero-detail>\n `\n})\nexport class ContainerComponent {\n hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds');\n}\n\n\n</code-example>\n<h3 id=\"making-angularjs-dependencies-injectable-to-angular\">Making AngularJS Dependencies Injectable to Angular<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#making-angularjs-dependencies-injectable-to-angular\"><i class=\"material-icons\">link</i></a></h3>\n<p>When running a hybrid app, you may encounter situations where you need to inject\nsome AngularJS dependencies into your Angular code.\nMaybe you have some business logic still in AngularJS services.\nMaybe you want access to AngularJS's built-in services like <code>$location</code> or <code>$timeout</code>.</p>\n<p>In these situations, it is possible to <em>upgrade</em> an AngularJS provider to\nAngular. This makes it possible to then inject it somewhere in Angular\ncode. For example, you might have a service called <code>HeroesService</code> in AngularJS:</p>\n<code-example path=\"upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts\" header=\"heroes.service.ts\">\nimport { Hero } from '../hero';\n\nexport class HeroesService {\n get() {\n return [\n new Hero(1, 'Windstorm'),\n new Hero(2, 'Spiderman')\n ];\n }\n}\n\n\n</code-example>\n<p>You can upgrade the service using a Angular <a href=\"guide/dependency-injection-providers#factory-providers\">factory provider</a>\nthat requests the service from the AngularJS <code>$injector</code>.</p>\n<p>Many developers prefer to declare the factory provider in a separate <code>ajs-upgraded-providers.ts</code> file\nso that they are all together, making it easier to reference them, create new ones and\ndelete them once the upgrade is over.</p>\n<p>It's also recommended to export the <code>heroesServiceFactory</code> function so that Ahead-of-Time\ncompilation can pick it up.</p>\n<div class=\"alert is-helpful\">\n<p><strong>Note:</strong> The 'heroes' string inside the factory refers to the AngularJS <code>HeroesService</code>.\nIt is common in AngularJS apps to choose a service name for the token, for example \"heroes\",\nand append the \"Service\" suffix to create the class name.</p>\n</div>\n<code-example path=\"upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts\" header=\"ajs-upgraded-providers.ts\">\nimport { HeroesService } from './heroes.service';\n\nexport function heroesServiceFactory(i: any) {\n return i.get('heroes');\n}\n\nexport const heroesServiceProvider = {\n provide: HeroesService,\n useFactory: heroesServiceFactory,\n deps: ['$injector']\n};\n\n\n</code-example>\n<p>You can then provide the service to Angular by adding it to the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>:</p>\n<code-example path=\"upgrade-module/src/app/ajs-to-a-providers/app.module.ts\" region=\"register\" header=\"app.module.ts\">\nimport { heroesServiceProvider } from './ajs-upgraded-providers';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>\n ],\n providers: [\n heroesServiceProvider\n ],\n/* . . . */\n})\nexport class AppModule {\n constructor(private upgrade: <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>) { }\n ngDoBootstrap() {\n this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });\n }\n}\n\n</code-example>\n<p>Then use the service inside your component by injecting it in the component constructor using its class as a type annotation:</p>\n<code-example path=\"upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts\" header=\"hero-detail.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\nimport { HeroesService } from './heroes.service';\nimport { Hero } from '../hero';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'hero-detail',\n template: `\n <h2>{{hero.id}}: {{hero.name}}</h2>\n `\n})\nexport class HeroDetailComponent {\n hero: Hero;\n constructor(heroes: HeroesService) {\n this.hero = heroes.get()[0];\n }\n}\n\n\n</code-example>\n<div class=\"alert is-helpful\">\n<p>In this example you upgraded a service class.\nYou can use a TypeScript type annotation when you inject it. While it doesn't\naffect how the dependency is handled, it enables the benefits of static type\nchecking. This is not required though, and any AngularJS service, factory, or\nprovider can be upgraded.</p>\n</div>\n<h3 id=\"making-angular-dependencies-injectable-to-angularjs\">Making Angular Dependencies Injectable to AngularJS<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#making-angular-dependencies-injectable-to-angularjs\"><i class=\"material-icons\">link</i></a></h3>\n<p>In addition to upgrading AngularJS dependencies, you can also <em>downgrade</em>\nAngular dependencies, so that you can use them from AngularJS. This can be\nuseful when you start migrating services to Angular or creating new services\nin Angular while retaining components written in AngularJS.</p>\n<p>For example, you might have an Angular service called <code>Heroes</code>:</p>\n<code-example path=\"upgrade-module/src/app/a-to-ajs-providers/heroes.ts\" header=\"heroes.ts\">\nimport { <a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a> } from '@angular/core';\nimport { Hero } from '../hero';\n\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()\nexport class Heroes {\n get() {\n return [\n new Hero(1, 'Windstorm'),\n new Hero(2, 'Spiderman')\n ];\n }\n}\n\n\n</code-example>\n<p>Again, as with Angular components, register the provider with the <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> by adding it to the module's <code>providers</code> list.</p>\n<code-example path=\"upgrade-module/src/app/a-to-ajs-providers/app.module.ts\" region=\"ngmodule\" header=\"app.module.ts\">\nimport { Heroes } from './heroes';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>\n ],\n providers: [ Heroes ]\n})\nexport class AppModule {\n constructor(private upgrade: <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>) { }\n ngDoBootstrap() {\n this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true });\n }\n}\n\n</code-example>\n<p>Now wrap the Angular <code>Heroes</code> in an <em>AngularJS factory function</em> using <code><a href=\"api/upgrade/static/downgradeInjectable\" class=\"code-anchor\">downgradeInjectable</a>()</code>\nand plug the factory into an AngularJS module.\nThe name of the AngularJS dependency is up to you:</p>\n<code-example path=\"upgrade-module/src/app/a-to-ajs-providers/app.module.ts\" region=\"register\" header=\"app.module.ts\">\nimport { Heroes } from './heroes';\n/* . . . */\nimport { <a href=\"api/upgrade/static/downgradeInjectable\" class=\"code-anchor\">downgradeInjectable</a> } from '@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>';\n\nangular.module('heroApp', [])\n .factory('heroes', <a href=\"api/upgrade/static/downgradeInjectable\" class=\"code-anchor\">downgradeInjectable</a>(Heroes))\n .component('heroDetail', heroDetailComponent);\n\n</code-example>\n<p>After this, the service is injectable anywhere in AngularJS code:</p>\n<code-example path=\"upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts\" header=\"hero-detail.component.ts\">\nexport const heroDetailComponent = {\n template: `\n <h2>{{$ctrl.hero.id}}: {{$ctrl.hero.name}}</h2>\n `,\n controller: ['heroes', function(heroes: Heroes) {\n this.hero = heroes.get()[0];\n }]\n};\n\n\n</code-example>\n<h2 id=\"lazy-loading-angularjs\">Lazy Loading AngularJS<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#lazy-loading-angularjs\"><i class=\"material-icons\">link</i></a></h2>\n<p>When building applications, you want to ensure that only the required resources are loaded when necessary. Whether that be loading of assets or code, making sure everything that can be deferred until needed keeps your application running efficiently. This is especially true when running different frameworks in the same application.</p>\n<p><a href=\"guide/glossary#lazy-loading\">Lazy loading</a> is a technique that defers the loading of required assets and code resources until they are actually used. This reduces startup time and increases efficiency, especially when running different frameworks in the same application.</p>\n<p>When migrating large applications from AngularJS to Angular using a hybrid approach, you want to migrate some of the most commonly used features first, and only use the less commonly used features if needed. Doing so helps you ensure that the application is still providing a seamless experience for your users while you are migrating.</p>\n<p>In most environments where both Angular and AngularJS are used to render the application, both frameworks are loaded in the initial bundle being sent to the client. This results in both increased bundle size and possible reduced performance.</p>\n<p>Overall application performance is affected in cases where the user stays on Angular-rendered pages because the AngularJS framework and application are still loaded and running, even if they are never accessed.</p>\n<p>You can take steps to mitigate both bundle size and performance issues. By isolating your AngularJS app to a separate bundle, you can take advantage of <a href=\"guide/glossary#lazy-loading\">lazy loading</a> to load, bootstrap, and render the AngularJS application only when needed. This strategy reduces your initial bundle size, defers any potential impact from loading both frameworks until absolutely necessary, and keeps your application running as efficiently as possible.</p>\n<p>The steps below show you how to do the following:</p>\n<ul>\n<li>Setup a callback function for your AngularJS bundle.</li>\n<li>Create a service that lazy loads and bootstraps your AngularJS app.</li>\n<li>Create a routable component for AngularJS content</li>\n<li>Create a custom <code>matcher</code> function for AngularJS-specific URLs and configure the Angular <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code> with the custom matcher for AngularJS routes.</li>\n</ul>\n<h3 id=\"create-a-service-to-lazy-load-angularjs\">Create a service to lazy load AngularJS<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#create-a-service-to-lazy-load-angularjs\"><i class=\"material-icons\">link</i></a></h3>\n<p>As of Angular version 8, lazy loading code can be accomplished simply by using the dynamic import syntax <code>import('...')</code>. In your application, you create a new service that uses dynamic imports to lazy load AngularJS.</p>\n<code-example path=\"upgrade-lazy-load-ajs/src/app/lazy-loader.service.ts\" header=\"src/app/lazy-loader.service.ts\">\nimport { <a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a> } from '@angular/core';\nimport * as angular from 'angular';\n\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>({\n providedIn: 'root'\n})\nexport class LazyLoaderService {\n private app: angular.auto.IInjectorService;\n\n load(el: HTMLElement): void {\n import('./angularjs-app').then(app => {\n try {\n this.app = app.bootstrap(el);\n } catch (e) {\n console.error(e);\n }\n });\n }\n\n destroy() {\n if (this.app) {\n this.app.get('$rootScope').$destroy();\n }\n }\n}\n\n\n</code-example>\n<p>The service uses the <code>import()</code> 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 <em>bootstrap</em> the application manually after it has been loaded. AngularJS provides a way to manually bootstrap an application using the <a href=\"https://docs.angularjs.org/api/ng/function/angular.bootstrap\">angular.bootstrap()</a> method with a provided HTML element. Your AngularJS app should also expose a <code>bootstrap</code> method that bootstraps the AngularJS app.</p>\n<p>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 <code>$rootScope.destroy()</code> method.</p>\n<code-example path=\"upgrade-lazy-load-ajs/src/app/angularjs-app/index.ts\" header=\"angularjs-app\">\nimport * as angular from 'angular';\nimport 'angular-route';\n\nconst appModule = angular.module('myApp', [\n 'ngRoute'\n])\n.config(['$routeProvider', '$locationProvider',\n function config($routeProvider, $locationProvider) {\n $locationProvider.html5Mode(true);\n\n $routeProvider.\n when('/users', {\n template: `\n <p>\n Users Page\n </p>\n `\n }).\n otherwise({\n template: ''\n });\n }]\n);\n\nexport function bootstrap(el: HTMLElement) {\n return angular.bootstrap(el, [appModule.name]);\n}\n\n\n</code-example>\n<p>Your AngularJS application is configured with only the routes it needs to render content. The remaining routes in your application are handled by the Angular Router. The exposed <code>bootstrap</code> method is called in your Angular app to bootstrap the AngularJS application after the bundle is loaded.</p>\n<div class=\"alert is-important\">\n<p><strong>Note:</strong> After AngularJS is loaded and bootstrapped, listeners such as those wired up in your route configuration will continue to listen for route changes. To ensure listeners are shut down when AngularJS isn't being displayed, configure an <code>otherwise</code> option with the <a href=\"https://docs.angularjs.org/api/ngRoute/provider/$routeProvider\">$routeProvider</a> that renders an empty template. This assumes all other routes will be handled by Angular.</p>\n</div>\n<h3 id=\"create-a-component-to-render-angularjs-content\">Create a component to render AngularJS content<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#create-a-component-to-render-angularjs-content\"><i class=\"material-icons\">link</i></a></h3>\n<p>In your Angular application, you need a component as a placeholder for your AngularJS content. This component uses the service you create to load and bootstrap your AngularJS app after the component is initialized.</p>\n<code-example path=\"upgrade-lazy-load-ajs/src/app/angular-js/angular-js.component.ts\" header=\"src/app/angular-js/angular-js.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a>, <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a>, <a href=\"api/core/OnDestroy\" class=\"code-anchor\">OnDestroy</a>, <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a> } from '@angular/core';\nimport { LazyLoaderService } from '../lazy-loader.service';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-angular-js',\n template: '<div ng-view></div>'\n})\nexport class AngularJSComponent implements <a href=\"api/core/OnInit\" class=\"code-anchor\">OnInit</a>, <a href=\"api/core/OnDestroy\" class=\"code-anchor\">OnDestroy</a> {\n constructor(\n private lazyLoader: LazyLoaderService,\n private elRef: <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>\n ) {}\n\n ngOnInit() {\n this.lazyLoader.load(this.elRef.nativeElement);\n }\n\n\n ngOnDestroy() {\n this.lazyLoader.destroy();\n }\n}\n\n\n</code-example>\n<p>When the Angular Router matches a route that uses AngularJS, the <code>AngularJSComponent</code> is rendered, and the content is rendered within the AngularJS <a href=\"https://docs.angularjs.org/api/ngRoute/directive/ngView\"><code>ng-view</code></a> directive. When the user navigates away from the route, the <code>$rootScope</code> is destroyed on the AngularJS application.</p>\n<h3 id=\"configure-a-custom-route-matcher-for-angularjs-routes\">Configure a custom route matcher for AngularJS routes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#configure-a-custom-route-matcher-for-angularjs-routes\"><i class=\"material-icons\">link</i></a></h3>\n<p>To configure the Angular Router, you must define a route for AngularJS URLs. To match those URLs, you add a route configuration that uses the <code>matcher</code> property. The <code>matcher</code> allows you to use custom pattern matching for URL paths. The Angular Router tries to match on more specific routes such as static and variable routes first. When it doesn't find a match, it then looks at custom matchers defined in your route configuration. If the custom matchers don't match a route, it then goes to catch-all routes, such as a 404 page.</p>\n<p>The following example defines a custom matcher function for AngularJS routes.</p>\n<code-example path=\"upgrade-lazy-load-ajs/src/app/app-routing.module.ts\" header=\"src/app/app-routing.module.ts\" region=\"matcher\">\nexport function isAngularJSUrl(url: <a href=\"api/router/UrlSegment\" class=\"code-anchor\">UrlSegment</a>[]) {\n return url.length > 0 && url[0].path.startsWith('users') ? ({consumed: url}) : null;\n}\n\n</code-example>\n<p>The following code adds a route object to your routing configuration using the <code>matcher</code> property and custom matcher, and the <code>component</code> property with <code>AngularJSComponent</code>.</p>\n<code-example path=\"upgrade-lazy-load-ajs/src/app/app-routing.module.ts\" header=\"src/app/app-routing.module.ts\">\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a>, <a href=\"api/router/RouterModule\" class=\"code-anchor\">RouterModule</a>, <a href=\"api/router/UrlSegment\" class=\"code-anchor\">UrlSegment</a> } from '@angular/router';\nimport { AngularJSComponent } from './angular-js/angular-js.component';\nimport { HomeComponent } from './home/home.component';\nimport { App404Component } from './app404/app404.component';\n\n// Match any URL that starts with `users`\nexport function isAngularJSUrl(url: <a href=\"api/router/UrlSegment\" class=\"code-anchor\">UrlSegment</a>[]) {\n return url.length > 0 && url[0].path.startsWith('users') ? ({consumed: url}) : null;\n}\n\nexport const routes: <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a> = [\n // <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a> rendered by Angular\n { path: '', component: HomeComponent },\n\n // AngularJS routes\n { matcher: isAngularJSUrl, component: AngularJSComponent },\n\n // Catch-all route\n { path: '**', component: App404Component }\n];\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [RouterModule.forRoot(routes)],\n exports: [<a href=\"api/router/RouterModule\" class=\"code-anchor\">RouterModule</a>]\n})\nexport class AppRoutingModule { }\n\n\n</code-example>\n<p>When your application matches a route that needs AngularJS, the AngularJS app is loaded and bootstrapped, the AngularJS routes match the necessary URL to render their content, and your application continues to run with both AngularJS and Angular frameworks.</p>\n<h2 id=\"using-the-unified-angular-location-service\">Using the Unified Angular Location Service<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#using-the-unified-angular-location-service\"><i class=\"material-icons\">link</i></a></h2>\n<p>In AngularJS, the <a href=\"https://docs.angularjs.org/api/ng/service/$location\">$location service</a> handles all routing configuration and navigation, encoding and decoding of URLS, redirects, and interactions with browser APIs. Angular uses its own underlying <code><a href=\"api/common/Location\" class=\"code-anchor\">Location</a></code> service for all of these tasks.</p>\n<p>When you migrate from AngularJS to Angular you will want to move as much responsibility as possible to Angular, so that you can take advantage of new APIs. To help with the transition, Angular provides the <code><a href=\"api/common/upgrade/LocationUpgradeModule\" class=\"code-anchor\">LocationUpgradeModule</a></code>. This module enables a <em>unified</em> location service that shifts responsibilities from the AngularJS <code>$location</code> service to the Angular <code><a href=\"api/common/Location\" class=\"code-anchor\">Location</a></code> service.</p>\n<p>To use the <code><a href=\"api/common/upgrade/LocationUpgradeModule\" class=\"code-anchor\">LocationUpgradeModule</a></code>, import the symbol from <code>@angular/common/upgrade</code> and add it to your <code>AppModule</code> imports using the static <code><a href=\"api/common/upgrade/LocationUpgradeModule#config\" class=\"code-anchor\">LocationUpgradeModule.config()</a></code> method.</p>\n<code-example language=\"ts\">\n// Other imports ...\nimport { <a href=\"api/common/upgrade/LocationUpgradeModule\" class=\"code-anchor\">LocationUpgradeModule</a> } from '@angular/common/upgrade';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n // Other <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> imports...\n LocationUpgradeModule.config()\n ]\n})\nexport class AppModule {}\n</code-example>\n<p>The <code><a href=\"api/common/upgrade/LocationUpgradeModule#config\" class=\"code-anchor\">LocationUpgradeModule.config()</a></code> method accepts a configuration object that allows you to configure options including the <code><a href=\"api/common/LocationStrategy\" class=\"code-anchor\">LocationStrategy</a></code> with the <code>useHash</code> property, and the URL prefix with the <code>hashPrefix</code> property.</p>\n<p>The <code>useHash</code> property defaults to <code>false</code>, and the <code>hashPrefix</code> defaults to an empty <code>string</code>. Pass the configuration object to override the defaults.</p>\n<code-example language=\"ts\">\nLocationUpgradeModule.config({\n useHash: true,\n hashPrefix: '!'\n})\n</code-example>\n<div class=\"alert is-important\">\n<p><strong>Note:</strong> See the <code><a href=\"api/common/upgrade/LocationUpgradeConfig\" class=\"code-anchor\">LocationUpgradeConfig</a></code> for more configuration options available to the <code><a href=\"api/common/upgrade/LocationUpgradeModule#config\" class=\"code-anchor\">LocationUpgradeModule.config()</a></code> method.</p>\n</div>\n<p>This registers a drop-in replacement for the <code>$location</code> provider in AngularJS. Once registered, all navigation, routing broadcast messages, and any necessary digest cycles in AngularJS triggered during navigation are handled by Angular. This gives you a single way to navigate within both sides of your hybrid application consistently.</p>\n<p>For usage of the <code>$location</code> service as a provider in AngularJS, you need to downgrade the <code><a href=\"api/common/upgrade/$locationShim\" class=\"code-anchor\">$locationShim</a></code> using a factory provider.</p>\n<code-example language=\"ts\">\n// Other imports ...\nimport { $locationShim } from '@angular/common/upgrade';\nimport { <a href=\"api/upgrade/static/downgradeInjectable\" class=\"code-anchor\">downgradeInjectable</a> } from '@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>';\n\nangular.module('myHybridApp', [...])\n .factory('$location', <a href=\"api/upgrade/static/downgradeInjectable\" class=\"code-anchor\">downgradeInjectable</a>($locationShim));\n</code-example>\n<p>Once you introduce the Angular Router, using the Angular Router triggers navigations through the unified location service, still providing a single source for navigating with AngularJS and Angular.</p>\n<!--\nTODO:\nCorrectly document how to use AOT with SystemJS-based `ngUpgrade` apps (or better yet update the\n`ngUpgrade` examples/guides to use `@angular/cli`).\nSee https://github.com/angular/angular/issues/35989.\n\n## Using Ahead-of-time compilation with hybrid apps\n\nYou can take advantage of Ahead-of-time (AOT) compilation on hybrid apps just like on any other\nAngular application.\nThe setup for a hybrid app is mostly the same as described in\n[the Ahead-of-time Compilation chapter](guide/aot-compiler)\nsave for differences in `index.html` and `main-aot.ts`\n\nThe `index.html` will likely have script tags loading AngularJS files, so the `index.html`\nfor AOT must also load those files.\nAn easy way to copy them is by adding each to the `copy-dist-files.js` file.\n\nYou'll need to use the generated `AppModuleFactory`, instead of the original `AppModule` to\nbootstrap the hybrid app:\n\n<code-example path=\"upgrade-phonecat-2-hybrid/app/main-aot.ts\" header=\"app/main-aot.ts\">\nimport { platformBrowser } from '@angular/platform-browser';\n\nimport { AppModuleNgFactory } from './app.module.ngfactory';\n\nplatformBrowser().bootstrapModuleFactory(AppModuleNgFactory);\n\n\n</code-example>\n\nAnd that's all you need do to get the full benefit of AOT for Angular apps!\n-->\n<h2 id=\"phonecat-upgrade-tutorial\">PhoneCat Upgrade Tutorial<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#phonecat-upgrade-tutorial\"><i class=\"material-icons\">link</i></a></h2>\n<p>In this section, you'll learn to prepare and upgrade an application with <code>ngUpgrade</code>.\nThe example app is <a href=\"https://github.com/angular/angular-phonecat\">Angular PhoneCat</a>\nfrom <a href=\"https://docs.angularjs.org/tutorial\">the original AngularJS tutorial</a>,\nwhich is where many of us began our Angular adventures. Now you'll see how to\nbring that application to the brave new world of Angular.</p>\n<p>During the process you'll learn how to apply the steps outlined in the\n<a href=\"guide/upgrade#preparation\">preparation guide</a>. You'll align the application\nwith Angular and also start writing in TypeScript.</p>\n<p>To follow along with the tutorial, clone the\n<a href=\"https://github.com/angular/angular-phonecat\">angular-phonecat</a> repository\nand apply the steps as you go.</p>\n<p>In terms of project structure, this is where the work begins:</p>\n<div class=\"filetree\">\n <div class=\"file\">\n angular-phonecat\n </div>\n <div class=\"children\">\n <div class=\"file\">\n bower.json\n </div>\n <div class=\"file\">\n karma.conf.js\n </div>\n <div class=\"file\">\n package.json\n </div>\n <div class=\"file\">\n app\n </div>\n <div class=\"children\">\n <div class=\"file\">\n core\n </div>\n <div class=\"children\">\n <div class=\"file\">\n checkmark\n </div>\n <div class=\"children\">\n <div class=\"file\">\n checkmark.filter.js\n </div>\n <div class=\"file\">\n checkmark.filter.spec.js\n </div>\n </div>\n <div class=\"file\">\n phone\n </div>\n <div class=\"children\">\n <div class=\"file\">\n phone.module.js\n </div>\n <div class=\"file\">\n phone.service.js\n </div>\n <div class=\"file\">\n phone.service.spec.js\n </div>\n </div>\n <div class=\"file\">\n core.module.js\n </div>\n </div>\n <div class=\"file\">\n phone-detail\n </div>\n <div class=\"children\">\n <div class=\"file\">\n phone-detail.component.js\n </div>\n <div class=\"file\">\n phone-detail.component.spec.js\n </div>\n <div class=\"file\">\n phone-detail.module.js\n </div>\n <div class=\"file\">\n phone-detail.template.html\n </div>\n </div>\n <div class=\"file\">\n phone-list\n </div>\n <div class=\"children\">\n <div class=\"file\">\n phone-list.component.js\n </div>\n <div class=\"file\">\n phone-list.component.spec.js\n </div>\n <div class=\"file\">\n phone-list.module.js\n </div>\n <div class=\"file\">\n phone-list.template.html\n </div>\n </div>\n <div class=\"file\">\n img\n </div>\n <div class=\"children\">\n <div class=\"file\">\n ...\n </div>\n </div>\n <div class=\"file\">\n phones\n </div>\n <div class=\"children\">\n <div class=\"file\">\n ...\n </div>\n </div>\n <div class=\"file\">\n app.animations.js\n </div>\n <div class=\"file\">\n app.config.js\n </div>\n <div class=\"file\">\n app.css\n </div>\n <div class=\"file\">\n app.module.js\n </div>\n <div class=\"file\">\n index.html\n </div>\n </div>\n <div class=\"file\">\n e2e-tests\n </div>\n <div class=\"children\">\n <div class=\"file\">\n protractor-conf.js\n </div>\n <div class=\"file\">\n scenarios.js\n </div>\n </div>\n </div>\n</div>\n<p>This is actually a pretty good starting point. The code uses the AngularJS 1.5\ncomponent API and the organization follows the\n<a href=\"https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md\">AngularJS Style Guide</a>,\nwhich is an important <a href=\"guide/upgrade#follow-the-angular-styleguide\">preparation step</a> before\na successful upgrade.</p>\n<ul>\n<li>\n<p>Each component, service, and filter is in its own source file, as per the\n<a href=\"https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility\">Rule of 1</a>.</p>\n</li>\n<li>\n<p>The <code>core</code>, <code>phone-detail</code>, and <code>phone-list</code> modules are each in their\nown subdirectory. Those subdirectories contain the JavaScript code as well as\nthe HTML templates that go with each particular feature. This is in line with the\n<a href=\"https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure\">Folders-by-Feature Structure</a>\nand <a href=\"https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity\">Modularity</a>\nrules.</p>\n</li>\n<li>\n<p>Unit tests are located side-by-side with application code where they are easily\nfound, as described in the rules for\n<a href=\"https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#organizing-tests\">Organizing Tests</a>.</p>\n</li>\n</ul>\n<h3 id=\"switching-to-typescript\">Switching to TypeScript<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#switching-to-typescript\"><i class=\"material-icons\">link</i></a></h3>\n<p>Since you're going to be writing Angular code in TypeScript, it makes sense to\nbring in the TypeScript compiler even before you begin upgrading.</p>\n<p>You'll also start to gradually phase out the Bower package manager in favor\nof NPM, installing all new dependencies using NPM, and eventually removing Bower from the project.</p>\n<p>Begin by installing TypeScript to the project.</p>\n<code-example format=\"\">\n npm i typescript --save-dev\n</code-example>\n<p>Install type definitions for the existing libraries that\nyou're using but that don't come with prepackaged types: AngularJS, AngularJS Material, and the\nJasmine unit test framework.</p>\n<p>For the PhoneCat app, we can install the necessary type definitions by running the following command:</p>\n<code-example format=\"\">\n npm install @types/jasmine @types/angular @types/angular-animate @types/angular-aria @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev\n</code-example>\n<p>If you are using AngularJS Material, you can install the type definitions via:</p>\n<code-example format=\"\">\n npm install @types/angular-material --save-dev\n</code-example>\n<p>You should also configure the TypeScript compiler with a <code>tsconfig.json</code> in the project directory\nas described in the <a href=\"guide/typescript-configuration\">TypeScript Configuration</a> guide.\nThe <code>tsconfig.json</code> file tells the TypeScript compiler how to turn your TypeScript files\ninto ES5 code bundled into CommonJS modules.</p>\n<p>Finally, you should add some npm scripts in <code>package.json</code> to compile the TypeScript files to\nJavaScript (based on the <code>tsconfig.json</code> configuration file):</p>\n<code-example format=\"\">\n \"scripts\": {\n \"tsc\": \"tsc\",\n \"tsc:w\": \"tsc -w\",\n ...\n</code-example>\n<p>Now launch the TypeScript compiler from the command line in watch mode:</p>\n<code-example format=\"\">\n npm run tsc:w\n</code-example>\n<p>Keep this process running in the background, watching and recompiling as you make changes.</p>\n<p>Next, convert your current JavaScript files into TypeScript. Since\nTypeScript is a super-set of ECMAScript 2015, which in turn is a super-set\nof ECMAScript 5, you can simply switch the file extensions from <code>.js</code> to <code>.ts</code>\nand everything will work just like it did before. As the TypeScript compiler\nruns, it emits the corresponding <code>.js</code> file for every <code>.ts</code> file and the\ncompiled JavaScript is what actually gets executed. If you start\nthe project HTTP server with <code>npm start</code>, you should see the fully functional\napplication in your browser.</p>\n<p>Now that you have TypeScript though, you can start benefiting from some of its\nfeatures. There's a lot of value the language can provide to AngularJS applications.</p>\n<p>For one thing, TypeScript is a superset of ES2015. Any app that has previously\nbeen written in ES5 - like the PhoneCat example has - can with TypeScript\nstart incorporating all of the JavaScript features that are new to ES2015.\nThese include things like <code>let</code>s and <code>const</code>s, arrow functions, default function\nparameters, and destructuring assignments.</p>\n<p>Another thing you can do is start adding <em>type safety</em> to your code. This has\nactually partially already happened because of the AngularJS typings you installed.\nTypeScript are checking that you are calling AngularJS APIs correctly when you do\nthings like register components to Angular modules.</p>\n<p>But you can also start adding <em>type annotations</em> to get even more\nout of TypeScript's type system. For instance, you can annotate the checkmark\nfilter so that it explicitly expects booleans as arguments. This makes it clearer\nwhat the filter is supposed to do.</p>\n<code-example path=\"upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts\" header=\"app/core/checkmark/checkmark.filter.ts\">\nangular.\n module('core').\n filter('checkmark', () => {\n return (input: boolean) => input ? '\\u2713' : '\\u2718';\n });\n\n\n</code-example>\n<p>In the <code>Phone</code> service, you can explicitly annotate the <code>$resource</code> service dependency\nas an <code>angular.resource.IResourceService</code> - a type defined by the AngularJS typings.</p>\n<code-example path=\"upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts\" header=\"app/core/phone/phone.service.ts\">\nangular.\n module('core.phone').\n factory('Phone', ['$resource',\n ($resource: angular.resource.IResourceService) => {\n return $resource('phones/:phoneId.json', {}, {\n <a href=\"api/animations/query\" class=\"code-anchor\">query</a>: {\n method: 'GET',\n params: {phoneId: 'phones'},\n isArray: true\n }\n });\n }\n ]);\n\n\n</code-example>\n<p>You can apply the same trick to the application's route configuration file in <code>app.config.ts</code>,\nwhere you are using the location and route services. By annotating them accordingly TypeScript\ncan verify you're calling their APIs with the correct kinds of arguments.</p>\n<code-example path=\"upgrade-phonecat-1-typescript/app/app.config.ts\" header=\"app/app.config.ts\">\nangular.\n module('phonecatApp').\n config(['$locationProvider', '$routeProvider',\n function config($locationProvider: angular.ILocationProvider,\n $routeProvider: angular.route.IRouteProvider) {\n $locationProvider.hashPrefix('!');\n\n $routeProvider.\n when('/phones', {\n template: '<phone-list></phone-list>'\n }).\n when('/phones/:phoneId', {\n template: '<phone-detail></phone-detail>'\n }).\n otherwise('/phones');\n }\n ]);\n\n\n</code-example>\n<div class=\"alert is-helpful\">\n<p>The <a href=\"https://www.npmjs.com/package/@types/angular\">AngularJS 1.x type definitions</a>\nyou installed are not officially maintained by the Angular team,\nbut are quite comprehensive. It is possible to make an AngularJS 1.x application\nfully type-annotated with the help of these definitions.</p>\n<p>If this is something you wanted to do, it would be a good idea to enable\nthe <code>noImplicitAny</code> configuration option in <code>tsconfig.json</code>. This would\ncause the TypeScript compiler to display a warning when there's any code that\ndoes not yet have type annotations. You could use it as a guide to inform\nus about how close you are to having a fully annotated project.</p>\n</div>\n<p>Another TypeScript feature you can make use of is <em>classes</em>. In particular, you\ncan turn component controllers into classes. That way they'll be a step\ncloser to becoming Angular component classes, which will make life\neasier once you upgrade.</p>\n<p>AngularJS expects controllers to be constructor functions. That's exactly what\nES2015/TypeScript classes are under the hood, so that means you can just plug in a\nclass as a component controller and AngularJS will happily use it.</p>\n<p>Here's what the new class for the phone list component controller looks like:</p>\n<code-example path=\"upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.ts\" header=\"app/phone-list/phone-list.component.ts\">\nclass PhoneListController {\n phones: any[];\n orderProp: string;\n <a href=\"api/animations/query\" class=\"code-anchor\">query</a>: string;\n\n <a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> $inject = ['Phone'];\n constructor(Phone: any) {\n this.phones = Phone.query();\n this.orderProp = 'age';\n }\n\n}\n\nangular.\n module('phoneList').\n component('phoneList', {\n templateUrl: 'phone-list/phone-list.template.html',\n controller: PhoneListController\n });\n\n\n</code-example>\n<p>What was previously done in the controller function is now done in the class\nconstructor function. The dependency injection annotations are attached\nto the class using a static property <code>$inject</code>. At runtime this becomes the\n<code>PhoneListController.$inject</code> property.</p>\n<p>The class additionally declares three members: The array of phones, the name of\nthe current sort key, and the search query. These are all things you have already\nbeen attaching to the controller but that weren't explicitly declared anywhere.\nThe last one of these isn't actually used in the TypeScript code since it's only\nreferred to in the template, but for the sake of clarity you should define all of the\ncontroller members.</p>\n<p>In the Phone detail controller, you'll have two members: One for the phone\nthat the user is looking at and another for the URL of the currently displayed image:</p>\n<code-example path=\"upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts\" header=\"app/phone-detail/phone-detail.component.ts\">\nclass PhoneDetailController {\n phone: any;\n mainImageUrl: string;\n\n <a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> $inject = ['$routeParams', 'Phone'];\n constructor($routeParams: angular.route.IRouteParamsService, Phone: any) {\n const phoneId = $routeParams.phoneId;\n this.phone = Phone.get({phoneId}, (phone: any) => {\n this.setImage(phone.images[0]);\n });\n }\n\n setImage(imageUrl: string) {\n this.mainImageUrl = imageUrl;\n }\n}\n\nangular.\n module('phoneDetail').\n component('phoneDetail', {\n templateUrl: 'phone-detail/phone-detail.template.html',\n controller: PhoneDetailController\n });\n\n\n</code-example>\n<p>This makes the controller code look a lot more like Angular already. You're\nall set to actually introduce Angular into the project.</p>\n<p>If you had any AngularJS services in the project, those would also be\na good candidate for converting to classes, since like controllers,\nthey're also constructor functions. But you only have the <code>Phone</code> factory\nin this project, and that's a bit special since it's an <code>ngResource</code>\nfactory. So you won't be doing anything to it in the preparation stage.\nYou'll instead turn it directly into an Angular service.</p>\n<h3 id=\"installing-angular\">Installing Angular<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#installing-angular\"><i class=\"material-icons\">link</i></a></h3>\n<p>Having completed the preparation work, get going with the Angular\nupgrade of PhoneCat. You'll do this incrementally with the help of\n<a href=\"guide/upgrade#upgrading-with-ngupgrade\">ngUpgrade</a> that comes with Angular.\nBy the time you're done, you'll be able to remove AngularJS from the project\ncompletely, but the key is to do this piece by piece without breaking the application.</p>\n<div class=\"alert is-important\">\n<p>The project also contains some animations.\nYou won't upgrade them in this version of the guide.\nTurn to the <a href=\"guide/animations\">Angular animations</a> guide to learn about that.</p>\n</div>\n<p>Install Angular into the project, along with the SystemJS module loader.\nTake a look at the results of the <a href=\"guide/upgrade-setup\">upgrade setup instructions</a>\nand get the following configurations from there:</p>\n<ul>\n<li>Add Angular and the other new dependencies to <code>package.json</code></li>\n<li>The SystemJS configuration file <code>systemjs.config.js</code> to the project root directory.</li>\n</ul>\n<p>Once these are done, run:</p>\n<code-example format=\"\">\n npm install\n</code-example>\n<p>Soon you can load Angular dependencies into the application via <code>index.html</code>,\nbut first you need to do some directory path adjustments.\nYou'll need to load files from <code>node_modules</code> and the project root instead of\nfrom the <code>/app</code> directory as you've been doing to this point.</p>\n<p>Move the <code>app/index.html</code> file to the project root directory. Then change the\ndevelopment server root path in <code>package.json</code> to also point to the project root\ninstead of <code>app</code>:</p>\n<code-example format=\"\">\n \"start\": \"http-server ./ -a localhost -p 8000 -c-1\",\n</code-example>\n<p>Now you're able to serve everything from the project root to the web browser. But you do <em>not</em>\nwant to have to change all the image and data paths used in the application code to match\nthe development setup. For that reason, you'll add a <code><base></code> tag to <code>index.html</code>, which will\ncause relative URLs to be resolved back to the <code>/app</code> directory:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/index.html\" region=\"base\" header=\"index.html\">\n<base href=\"/app/\">\n\n</code-example>\n<p>Now you can load Angular via SystemJS. You'll add the Angular polyfills and the\nSystemJS config to the end of the <code><head></code> section, and then you'll use <code>System.import</code>\nto load the actual application:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/index.html\" region=\"angular\" header=\"index.html\">\n<script src=\"/node_modules/core-js/client/shim.min.js\"></script>\n<script src=\"/node_modules/zone.js/bundles/zone.umd.js\"></script>\n<script src=\"/node_modules/systemjs/dist/system.src.js\"></script>\n<script src=\"/systemjs.config.js\"></script>\n<script>\n System.import('/app');\n</script>\n\n</code-example>\n<p>You also need to make a couple of adjustments\nto the <code>systemjs.config.js</code> file installed during <a href=\"guide/upgrade-setup\">upgrade setup</a>.</p>\n<p>Point the browser to the project root when loading things through SystemJS,\ninstead of using the <code><base></code> URL.</p>\n<p>Install the <code>upgrade</code> package via <code>npm install @angular/upgrade --save</code>\nand add a mapping for the <code>@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a></code> package.</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/systemjs.config.1.js\" region=\"paths\" header=\"systemjs.config.js\">\n System.config({\n paths: {\n // paths serve as alias\n 'npm:': '/node_modules/'\n },\n map: {\n 'ng-loader': '../src/systemjs-angular-loader.js',\n app: '/app',\n/* . . . */\n '@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',\n/* . . . */\n },\n\n</code-example>\n<h3 id=\"creating-the-appmodule\">Creating the <em>AppModule</em><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#creating-the-appmodule\"><i class=\"material-icons\">link</i></a></h3>\n<p>Now create the root <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> class called <code>AppModule</code>.\nThere is already a file named <code>app.module.ts</code> that holds the AngularJS module.\nRename it to <code>app.module.ajs.ts</code> and update the corresponding script name in the <code>index.html</code> as well.\nThe file contents remain:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/app.module.ajs.ts\" header=\"app.module.ajs.ts\">\n// Define the `phonecatApp` AngularJS module\nangular.module('phonecatApp', [\n 'ngAnimate',\n 'ngRoute',\n 'core',\n 'phoneDetail',\n 'phoneList',\n]);\n\n\n</code-example>\n<p>Now create a new <code>app.module.ts</code> with the minimum <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> class:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/app.module.ts\" region=\"bare\" header=\"app.module.ts\">\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a> } from '@angular/platform-browser';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n ],\n})\nexport class AppModule {\n}\n\n</code-example>\n<h3 id=\"bootstrapping-a-hybrid-phonecat\">Bootstrapping a hybrid PhoneCat<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#bootstrapping-a-hybrid-phonecat\"><i class=\"material-icons\">link</i></a></h3>\n<p>Next, you'll bootstrap the application as a <em>hybrid application</em>\nthat supports both AngularJS and Angular components. After that,\nyou can start converting the individual pieces to Angular.</p>\n<p>The application is currently bootstrapped using the AngularJS <code>ng-app</code> directive\nattached to the <code><html></code> element of the host page. This will no longer work in the hybrid\napp. Switch to the <a href=\"guide/upgrade#bootstrapping-hybrid-applications\">ngUpgrade bootstrap</a> method\ninstead.</p>\n<p>First, remove the <code>ng-app</code> attribute from <code>index.html</code>.\nThen import <code><a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a></code> in the <code>AppModule</code>, and override its <code>ngDoBootstrap</code> method:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/app.module.ts\" region=\"upgrademodule\" header=\"app/app.module.ts\">\nimport { <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a> } from '@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>,\n ],\n})\nexport class AppModule {\n constructor(private upgrade: <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>) { }\n ngDoBootstrap() {\n this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);\n }\n}\n\n</code-example>\n<p>Note that you are bootstrapping the AngularJS module from inside <code>ngDoBootstrap</code>.\nThe arguments are the same as you would pass to <code>angular.bootstrap</code> if you were manually\nbootstrapping AngularJS: the root element of the application; and an array of the\nAngularJS 1.x modules that you want to load.</p>\n<p>Finally, bootstrap the <code>AppModule</code> in <code>app/main.ts</code>.\nThis file has been configured as the application entrypoint in <code>systemjs.config.js</code>,\nso it is already being loaded by the browser.</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/main.ts\" region=\"bootstrap\" header=\"app/main.ts\">\nimport { <a href=\"api/platform-browser-dynamic/platformBrowserDynamic\" class=\"code-anchor\">platformBrowserDynamic</a> } from '@angular/platform-browser-dynamic';\nimport { AppModule } from './app.module';\n\n<a href=\"api/platform-browser-dynamic/platformBrowserDynamic\" class=\"code-anchor\">platformBrowserDynamic</a>().bootstrapModule(AppModule);\n\n</code-example>\n<p>Now you're running both AngularJS and Angular at the same time. That's pretty\nexciting! You're not running any actual Angular components yet. That's next.</p>\n<div class=\"alert is-helpful\">\n<h4 id=\"why-declare-angular-as-angulariangularstatic\">Why declare <em>angular</em> as <em>angular.IAngularStatic</em>?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#why-declare-angular-as-angulariangularstatic\"><i class=\"material-icons\">link</i></a></h4>\n<p><code>@types/angular</code> is declared as a UMD module, and due to the way\n<a href=\"https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-umd-module-definitions\">UMD typings</a>\nwork, once you have an ES6 <code>import</code> statement in a file all UMD typed modules must also be\nimported via <code>import</code> statements instead of being globally available.</p>\n<p>AngularJS is currently loaded by a script tag in <code>index.html</code>, which means that the whole app\nhas access to it as a global and uses the same instance of the <code>angular</code> variable.\nIf you used <code>import * as angular from 'angular'</code> instead, you'd also have to\nload every file in the AngularJS app to use ES2015 modules in order to ensure AngularJS was being\nloaded correctly.</p>\n<p>This is a considerable effort and it often isn't worth it, especially since you are in the\nprocess of moving your code to Angular.\nInstead, declare <code>angular</code> as <code>angular.IAngularStatic</code> to indicate it is a global variable\nand still have full typing support.</p>\n</div>\n<h3 id=\"upgrading-the-phone-service\">Upgrading the Phone service<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#upgrading-the-phone-service\"><i class=\"material-icons\">link</i></a></h3>\n<p>The first piece you'll port over to Angular is the <code>Phone</code> service, which\nresides in <code>app/core/phone/phone.service.ts</code> and makes it possible for components\nto load phone information from the server. Right now it's implemented with\nngResource and you're using it for two things:</p>\n<ul>\n<li>For loading the list of all phones into the phone list component.</li>\n<li>For loading the details of a single phone into the phone detail component.</li>\n</ul>\n<p>You can replace this implementation with an Angular service class, while\nkeeping the controllers in AngularJS land.</p>\n<p>In the new version, you import the Angular HTTP module and call its <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> service instead of <code>ngResource</code>.</p>\n<p>Re-open the <code>app.module.ts</code> file, import and add <code><a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a></code> to the <code>imports</code> array of the <code>AppModule</code>:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/app.module.ts\" region=\"httpclientmodule\" header=\"app.module.ts\">\nimport { <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a> } from '@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a>';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>,\n <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a>,\n ],\n})\nexport class AppModule {\n constructor(private upgrade: <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>) { }\n ngDoBootstrap() {\n this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);\n }\n}\n\n</code-example>\n<p>Now you're ready to upgrade the Phone service itself. Replace the ngResource-based\nservice in <code>phone.service.ts</code> with a TypeScript class decorated as <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a></code>:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts\" region=\"classdef\" header=\"app/core/phone/phone.service.ts (skeleton)\">\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()\nexport class Phone {\n/* . . . */\n}\n\n</code-example>\n<p>The <code>@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a></code> decorator will attach some dependency injection metadata\nto the class, letting Angular know about its dependencies. As described\nby the <a href=\"guide/dependency-injection\">Dependency Injection Guide</a>,\nthis is a marker decorator you need to use for classes that have no other\nAngular decorators but still need to have their dependencies injected.</p>\n<p>In its constructor the class expects to get the <code><a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a></code> service. It will\nbe injected to it and it is stored as a private field. The service is then\nused in the two instance methods, one of which loads the list of all phones,\nand the other loads the details of a specified phone:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts\" region=\"fullclass\" header=\"app/core/phone/phone.service.ts\">\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()\nexport class Phone {\n constructor(private <a href=\"api/common/http\" class=\"code-anchor\">http</a>: <a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a>) { }\n <a href=\"api/animations/query\" class=\"code-anchor\">query</a>(): Observable<PhoneData[]> {\n return this.http.get<PhoneData[]>(`phones/phones.json`);\n }\n get(id: string): Observable<PhoneData> {\n return this.http.get<PhoneData>(`phones/${id}.json`);\n }\n}\n\n</code-example>\n<p>The methods now return observables of type <code>PhoneData</code> and <code>PhoneData[]</code>. This is\na type you don't have yet. Add a simple interface for it:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts\" region=\"phonedata-interface\" header=\"app/core/phone/phone.service.ts (interface)\">\nexport interface PhoneData {\n name: string;\n snippet: string;\n images: string[];\n}\n\n</code-example>\n<p><code>@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a></code> has a <code><a href=\"api/upgrade/static/downgradeInjectable\" class=\"code-anchor\">downgradeInjectable</a></code> method for the purpose of making\nAngular services available to AngularJS code. Use it to plug in the <code>Phone</code> service:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts\" region=\"downgrade-injectable\" header=\"app/core/phone/phone.service.ts (downgrade)\">\ndeclare var angular: angular.IAngularStatic;\nimport { <a href=\"api/upgrade/static/downgradeInjectable\" class=\"code-anchor\">downgradeInjectable</a> } from '@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>';\n/* . . . */\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()\nexport class Phone {\n/* . . . */\n}\n\nangular.module('core.phone')\n .factory('phone', <a href=\"api/upgrade/static/downgradeInjectable\" class=\"code-anchor\">downgradeInjectable</a>(Phone));\n\n</code-example>\n<p>Here's the full, final code for the service:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts\" header=\"app/core/phone/phone.service.ts\">\nimport { <a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a> } from '@angular/core';\nimport { <a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a> } from '@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a>';\nimport { Observable } from 'rxjs';\n\ndeclare var angular: angular.IAngularStatic;\nimport { <a href=\"api/upgrade/static/downgradeInjectable\" class=\"code-anchor\">downgradeInjectable</a> } from '@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>';\n\nexport interface PhoneData {\n name: string;\n snippet: string;\n images: string[];\n}\n\n@<a href=\"api/core/Injectable\" class=\"code-anchor\">Injectable</a>()\nexport class Phone {\n constructor(private <a href=\"api/common/http\" class=\"code-anchor\">http</a>: <a href=\"api/common/http/HttpClient\" class=\"code-anchor\">HttpClient</a>) { }\n <a href=\"api/animations/query\" class=\"code-anchor\">query</a>(): Observable<PhoneData[]> {\n return this.http.get<PhoneData[]>(`phones/phones.json`);\n }\n get(id: string): Observable<PhoneData> {\n return this.http.get<PhoneData>(`phones/${id}.json`);\n }\n}\n\nangular.module('core.phone')\n .factory('phone', <a href=\"api/upgrade/static/downgradeInjectable\" class=\"code-anchor\">downgradeInjectable</a>(Phone));\n\n\n</code-example>\n<p>Notice that you're importing the <code>map</code> operator of the RxJS <code>Observable</code> separately.\nDo this for every RxJS operator.</p>\n<p>The new <code>Phone</code> service has the same features as the original, <code>ngResource</code>-based service.\nBecause it's an Angular service, you register it with the <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> providers:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/app.module.ts\" region=\"phone\" header=\"app.module.ts\">\nimport { Phone } from './core/phone/phone.service';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>,\n <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a>,\n ],\n providers: [\n Phone,\n ]\n})\nexport class AppModule {\n constructor(private upgrade: <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>) { }\n ngDoBootstrap() {\n this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);\n }\n}\n\n</code-example>\n<p>Now that you are loading <code>phone.service.ts</code> through an import that is resolved\nby SystemJS, you should <strong>remove the <script> tag</strong> for the service from <code>index.html</code>.\nThis is something you'll do to all components as you upgrade them. Simultaneously\nwith the AngularJS to Angular upgrade you're also migrating code from scripts to modules.</p>\n<p>At this point, you can switch the two components to use the new service\ninstead of the old one. While you <code>$inject</code> it as the downgraded <code>phone</code> factory,\nit's really an instance of the <code>Phone</code> class and you annotate its type accordingly:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ajs.ts\" header=\"app/phone-list/phone-list.component.ts\">\ndeclare var angular: angular.IAngularStatic;\nimport { Phone, PhoneData } from '../core/phone/phone.service';\n\nclass PhoneListController {\n phones: PhoneData[];\n orderProp: string;\n\n <a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> $inject = ['phone'];\n constructor(phone: Phone) {\n phone.query().subscribe(phones => {\n this.phones = phones;\n });\n this.orderProp = 'age';\n }\n\n}\n\nangular.\n module('phoneList').\n component('phoneList', {\n templateUrl: 'app/phone-list/phone-list.template.html',\n controller: PhoneListController\n });\n\n\n</code-example>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts\" header=\"app/phone-detail/phone-detail.component.ts\">\ndeclare var angular: angular.IAngularStatic;\nimport { Phone, PhoneData } from '../core/phone/phone.service';\n\nclass PhoneDetailController {\n phone: PhoneData;\n mainImageUrl: string;\n\n <a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> $inject = ['$routeParams', 'phone'];\n constructor($routeParams: angular.route.IRouteParamsService, phone: Phone) {\n const phoneId = $routeParams.phoneId;\n phone.get(phoneId).subscribe(data => {\n this.phone = data;\n this.setImage(data.images[0]);\n });\n }\n\n setImage(imageUrl: string) {\n this.mainImageUrl = imageUrl;\n }\n}\n\nangular.\n module('phoneDetail').\n component('phoneDetail', {\n templateUrl: 'phone-detail/phone-detail.template.html',\n controller: PhoneDetailController\n });\n\n\n</code-example>\n<p>Now there are two AngularJS components using an Angular service!\nThe components don't need to be aware of this, though the fact that the\nservice returns observables and not promises is a bit of a giveaway.\nIn any case, what you've achieved is a migration of a service to Angular\nwithout having to yet migrate the components that use it.</p>\n<div class=\"alert is-helpful\">\n<p>You could use the <code>toPromise</code> method of <code>Observable</code> to turn those\nobservables into promises in the service. In many cases that reduce\nthe number of changes to the component controllers.</p>\n</div>\n<h3 id=\"upgrading-components\">Upgrading Components<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#upgrading-components\"><i class=\"material-icons\">link</i></a></h3>\n<p>Upgrade the AngularJS components to Angular components next.\nDo it one component at a time while still keeping the application in hybrid mode.\nAs you make these conversions, you'll also define your first Angular <em>pipes</em>.</p>\n<p>Look at the phone list component first. Right now it contains a TypeScript\ncontroller class and a component definition object. You can morph this into\nan Angular component by just renaming the controller class and turning the\nAngularJS component definition object into an Angular <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> decorator.\nYou can then also remove the static <code>$inject</code> property from the class:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts\" region=\"initialclass\" header=\"app/phone-list/phone-list.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\nimport { Phone, PhoneData } from '../core/phone/phone.service';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'phone-list',\n templateUrl: './phone-list.template.html'\n})\nexport class PhoneListComponent {\n phones: PhoneData[];\n <a href=\"api/animations/query\" class=\"code-anchor\">query</a>: string;\n orderProp: string;\n\n constructor(phone: Phone) {\n phone.query().subscribe(phones => {\n this.phones = phones;\n });\n this.orderProp = 'age';\n }\n/* . . . */\n}\n\n</code-example>\n<p>The <code>selector</code> attribute is a CSS selector that defines where on the page the component\nshould go. In AngularJS you do matching based on component names, but in Angular you\nhave these explicit selectors. This one will match elements with the name <code>phone-list</code>,\njust like the AngularJS version did.</p>\n<p>Now convert the template of this component into Angular syntax.\nThe search controls replace the AngularJS <code>$ctrl</code> expressions\nwith Angular's two-way <code>[(<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>)]</code> binding syntax:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/phone-list/phone-list.template.html\" region=\"controls\" header=\"app/phone-list/phone-list.template.html (search controls)\">\n<p>\n Search:\n <input [(<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>)]=\"<a href=\"api/animations/query\" class=\"code-anchor\">query</a>\" />\n</p>\n\n<p>\n Sort by:\n <select [(<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>)]=\"orderProp\">\n <option value=\"name\">Alphabetical</option>\n <option value=\"age\">Newest</option>\n </select>\n</p>\n\n</code-example>\n<p>Replace the list's <code>ng-repeat</code> with an <code>*<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code> as\n<a href=\"guide/built-in-directives\">described in the Template Syntax page</a>.\nReplace the image tag's <code>ng-src</code> with a binding to the native <code>src</code> property.</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/phone-list/phone-list.template.html\" region=\"list\" header=\"app/phone-list/phone-list.template.html (phones)\">\n<ul class=\"phones\">\n <li *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let phone of getPhones()\"\n class=\"thumbnail phone-list-item\">\n <a href=\"/#!/phones/{{phone.id}}\" class=\"thumb\">\n <img [src]=\"phone.imageUrl\" [alt]=\"phone.name\" />\n </a>\n <a href=\"/#!/phones/{{phone.id}}\" class=\"name\">{{phone.name}}</a>\n <p>{{phone.snippet}}</p>\n </li>\n</ul>\n\n</code-example>\n<h4 id=\"no-angular-filter-or-orderby-filters\">No Angular <em>filter</em> or <em>orderBy</em> filters<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#no-angular-filter-or-orderby-filters\"><i class=\"material-icons\">link</i></a></h4>\n<p>The built-in AngularJS <code>filter</code> and <code>orderBy</code> filters do not exist in Angular,\nso you need to do the filtering and sorting yourself.</p>\n<p>You replaced the <code>filter</code> and <code>orderBy</code> filters with bindings to the <code>getPhones()</code> controller method,\nwhich implements the filtering and ordering logic inside the component itself.</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts\" region=\"getphones\" header=\"app/phone-list/phone-list.component.ts\">\ngetPhones(): PhoneData[] {\n return this.sortPhones(this.filterPhones(this.phones));\n}\n\nprivate filterPhones(phones: PhoneData[]) {\n if (phones && this.query) {\n return phones.filter(phone => {\n const name = phone.name.toLowerCase();\n const snippet = phone.snippet.toLowerCase();\n return name.indexOf(this.query) >= 0 || snippet.indexOf(this.query) >= 0;\n });\n }\n return phones;\n}\n\nprivate sortPhones(phones: PhoneData[]) {\n if (phones && this.orderProp) {\n return phones\n .slice(0) // Make a copy\n .sort((a, b) => {\n if (a[this.orderProp] < b[this.orderProp]) {\n return -1;\n } else if ([b[this.orderProp] < a[this.orderProp]]) {\n return 1;\n } else {\n return 0;\n }\n });\n }\n return phones;\n}\n\n</code-example>\n<p>Now you need to downgrade the Angular component so you can use it in AngularJS.\nInstead of registering a component, you register a <code>phoneList</code> <em>directive</em>,\na downgraded version of the Angular component.</p>\n<p>The <code>as angular.IDirectiveFactory</code> cast tells the TypeScript compiler\nthat the return value of the <code><a href=\"api/upgrade/static/downgradeComponent\" class=\"code-anchor\">downgradeComponent</a></code> method is a directive factory.</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts\" region=\"downgrade-component\" header=\"app/phone-list/phone-list.component.ts\">\ndeclare var angular: angular.IAngularStatic;\nimport { <a href=\"api/upgrade/static/downgradeComponent\" class=\"code-anchor\">downgradeComponent</a> } from '@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>';\n\n/* . . . */\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'phone-list',\n templateUrl: './phone-list.template.html'\n})\nexport class PhoneListComponent {\n/* . . . */\n}\n\nangular.module('phoneList')\n .directive(\n 'phoneList',\n <a href=\"api/upgrade/static/downgradeComponent\" class=\"code-anchor\">downgradeComponent</a>({component: PhoneListComponent}) as angular.IDirectiveFactory\n );\n\n</code-example>\n<p>The new <code>PhoneListComponent</code> uses the Angular <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> directive, located in the <code><a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a></code>.\nAdd the <code><a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a></code> to <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> imports, declare the new <code>PhoneListComponent</code> and\nfinally add it to <code>entryComponents</code> since you downgraded it:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/app.module.ts\" region=\"phonelist\" header=\"app.module.ts\">\nimport { <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a> } from '@angular/forms';\nimport { PhoneListComponent } from './phone-list/phone-list.component';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>,\n <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a>,\n <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a>,\n ],\n declarations: [\n PhoneListComponent,\n ],\n entryComponents: [\n PhoneListComponent,\n})\nexport class AppModule {\n constructor(private upgrade: <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>) { }\n ngDoBootstrap() {\n this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);\n }\n}\n\n</code-example>\n<p>Remove the <script> tag for the phone list component from <code>index.html</code>.</p>\n<p>Now set the remaining <code>phone-detail.component.ts</code> as follows:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts\" header=\"app/phone-detail/phone-detail.component.ts\">\ndeclare var angular: angular.IAngularStatic;\nimport { <a href=\"api/upgrade/static/downgradeComponent\" class=\"code-anchor\">downgradeComponent</a> } from '@angular/upgrade/<a href=\"api/upgrade/static\" class=\"code-anchor\">static</a>';\n\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\n\nimport { Phone, PhoneData } from '../core/phone/phone.service';\nimport { RouteParams } from '../ajs-upgraded-providers';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'phone-detail',\n templateUrl: './phone-detail.template.html',\n})\nexport class PhoneDetailComponent {\n phone: PhoneData;\n mainImageUrl: string;\n\n constructor(routeParams: RouteParams, phone: Phone) {\n phone.get(routeParams.phoneId).subscribe(data => {\n this.phone = data;\n this.setImage(data.images[0]);\n });\n }\n\n setImage(imageUrl: string) {\n this.mainImageUrl = imageUrl;\n }\n}\n\nangular.module('phoneDetail')\n .directive(\n 'phoneDetail',\n <a href=\"api/upgrade/static/downgradeComponent\" class=\"code-anchor\">downgradeComponent</a>({component: PhoneDetailComponent}) as angular.IDirectiveFactory\n );\n\n\n</code-example>\n<p>This is similar to the phone list component.\nThe new wrinkle is the <code>RouteParams</code> type annotation that identifies the <code>routeParams</code> dependency.</p>\n<p>The AngularJS injector has an AngularJS router dependency called <code>$routeParams</code>,\nwhich was injected into <code>PhoneDetails</code> when it was still an AngularJS controller.\nYou intend to inject it into the new <code>PhoneDetailsComponent</code>.</p>\n<p>Unfortunately, AngularJS dependencies are not automatically available to Angular components.\nYou must upgrade this service via a <a href=\"guide/upgrade#making-angularjs-dependencies-injectable-to-angular\">factory provider</a>\nto make <code>$routeParams</code> an Angular injectable.\nDo that in a new file called <code>ajs-upgraded-providers.ts</code> and import it in <code>app.module.ts</code>:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/ajs-upgraded-providers.ts\" header=\"app/ajs-upgraded-providers.ts\">\nexport abstract class RouteParams {\n [key: string]: string;\n}\n\nexport function routeParamsFactory(i: any) {\n return i.get('$routeParams');\n}\n\nexport const routeParamsProvider = {\n provide: RouteParams,\n useFactory: routeParamsFactory,\n deps: ['$injector']\n};\n\n\n</code-example>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/app.module.ts\" region=\"routeparams\" header=\"app/app.module.ts ($routeParams)\">\nimport { routeParamsProvider } from './ajs-upgraded-providers';\n providers: [\n Phone,\n routeParamsProvider\n ]\n\n</code-example>\n<p>Convert the phone detail component template into Angular syntax as follows:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html\" header=\"app/phone-detail/phone-detail.template.html\">\n<div *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"phone\">\n <div class=\"phone-images\">\n <img [src]=\"img\" class=\"phone\"\n [<a href=\"api/common/NgClass\" class=\"code-anchor\">ngClass</a>]=\"{'selected': img === mainImageUrl}\"\n *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let img of phone.images\" />\n </div>\n\n <h1>{{phone.name}}</h1>\n\n <p>{{phone.description}}</p>\n\n <ul class=\"phone-thumbs\">\n <li *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let img of phone.images\">\n <img [src]=\"img\" (click)=\"setImage(img)\" />\n </li>\n </ul>\n\n <ul class=\"specs\">\n <li>\n <span>Availability and Networks</span>\n <dl>\n <dt>Availability</dt>\n <dd *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let availability of phone.availability\">{{availability}}</dd>\n </dl>\n </li>\n <li>\n <span>Battery</span>\n <dl>\n <dt><a href=\"api/core/Type\" class=\"code-anchor\">Type</a></dt>\n <dd>{{phone.battery?.type}}</dd>\n <dt>Talk <a href=\"api/common/Time\" class=\"code-anchor\">Time</a></dt>\n <dd>{{phone.battery?.talkTime}}</dd>\n <dt>Standby time (<a href=\"api/forms/MaxValidator\" class=\"code-anchor\">max</a>)</dt>\n <dd>{{phone.battery?.standbyTime}}</dd>\n </dl>\n </li>\n <li>\n <span>Storage and Memory</span>\n <dl>\n <dt>RAM</dt>\n <dd>{{phone.storage?.ram}}</dd>\n <dt>Internal Storage</dt>\n <dd>{{phone.storage?.flash}}</dd>\n </dl>\n </li>\n <li>\n <span>Connectivity</span>\n <dl>\n <dt>Network Support</dt>\n <dd>{{phone.connectivity?.cell}}</dd>\n <dt>WiFi</dt>\n <dd>{{phone.connectivity?.wifi}}</dd>\n <dt>Bluetooth</dt>\n <dd>{{phone.connectivity?.bluetooth}}</dd>\n <dt>Infrared</dt>\n <dd>{{phone.connectivity?.infrared | checkmark}}</dd>\n <dt>GPS</dt>\n <dd>{{phone.connectivity?.gps | checkmark}}</dd>\n </dl>\n </li>\n <li>\n <span>Android</span>\n <dl>\n <dt>OS <a href=\"api/core/Version\" class=\"code-anchor\">Version</a></dt>\n <dd>{{phone.android?.os}}</dd>\n <dt>UI</dt>\n <dd>{{phone.android?.ui}}</dd>\n </dl>\n </li>\n <li>\n <span>Size and Weight</span>\n <dl>\n <dt>Dimensions</dt>\n <dd *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let dim of phone.sizeAndWeight?.dimensions\">{{dim}}</dd>\n <dt>Weight</dt>\n <dd>{{phone.sizeAndWeight?.weight}}</dd>\n </dl>\n </li>\n <li>\n <span>Display</span>\n <dl>\n <dt>Screen size</dt>\n <dd>{{phone.display?.screenSize}}</dd>\n <dt>Screen resolution</dt>\n <dd>{{phone.display?.screenResolution}}</dd>\n <dt>Touch screen</dt>\n <dd>{{phone.display?.touchScreen | checkmark}}</dd>\n </dl>\n </li>\n <li>\n <span>Hardware</span>\n <dl>\n <dt>CPU</dt>\n <dd>{{phone.hardware?.cpu}}</dd>\n <dt>USB</dt>\n <dd>{{phone.hardware?.usb}}</dd>\n <dt>Audio / headphone jack</dt>\n <dd>{{phone.hardware?.audioJack}}</dd>\n <dt>FM Radio</dt>\n <dd>{{phone.hardware?.fmRadio | checkmark}}</dd>\n <dt>Accelerometer</dt>\n <dd>{{phone.hardware?.accelerometer | checkmark}}</dd>\n </dl>\n </li>\n <li>\n <span>Camera</span>\n <dl>\n <dt>Primary</dt>\n <dd>{{phone.camera?.primary}}</dd>\n <dt>Features</dt>\n <dd>{{phone.camera?.features?.join(', ')}}</dd>\n </dl>\n </li>\n <li>\n <span>Additional Features</span>\n <dd>{{phone.additionalFeatures}}</dd>\n </li>\n </ul>\n</div>\n\n\n</code-example>\n<p>There are several notable changes here:</p>\n<ul>\n<li>\n<p>You've removed the <code>$ctrl.</code> prefix from all expressions.</p>\n</li>\n<li>\n<p>You've replaced <code>ng-src</code> with property\nbindings for the standard <code>src</code> property.</p>\n</li>\n<li>\n<p>You're using the property binding syntax around <code>ng-class</code>. Though Angular\ndoes have <a href=\"guide/built-in-directives\">a very similar <code>ngClass</code></a>\nas AngularJS does, its value is not magically evaluated as an expression.\nIn Angular, you always specify in the template when an attribute's value is\na property expression, as opposed to a literal string.</p>\n</li>\n<li>\n<p>You've replaced <code>ng-repeat</code>s with <code>*<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code>s.</p>\n</li>\n<li>\n<p>You've replaced <code>ng-click</code> with an event binding for the standard <code>click</code>.</p>\n</li>\n<li>\n<p>You've wrapped the whole template in an <code><a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> that causes it only to be\nrendered when there is a phone present. You need this because when the component\nfirst loads, you don't have <code>phone</code> yet and the expressions will refer to a\nnon-existing value. Unlike in AngularJS, Angular expressions do not fail silently\nwhen you try to refer to properties on undefined objects. You need to be explicit\nabout cases where this is expected.</p>\n</li>\n</ul>\n<p>Add <code>PhoneDetailComponent</code> component to the <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> <em>declarations</em> and <em>entryComponents</em>:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/app.module.ts\" region=\"phonedetail\" header=\"app.module.ts\">\nimport { PhoneDetailComponent } from './phone-detail/phone-detail.component';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>,\n <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a>,\n <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a>,\n ],\n declarations: [\n PhoneListComponent,\n PhoneDetailComponent,\n ],\n entryComponents: [\n PhoneListComponent,\n PhoneDetailComponent\n ],\n providers: [\n Phone,\n routeParamsProvider\n ]\n})\nexport class AppModule {\n constructor(private upgrade: <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>) { }\n ngDoBootstrap() {\n this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);\n }\n}\n\n</code-example>\n<p>You should now also remove the phone detail component <script> tag from <code>index.html</code>.</p>\n<h4 id=\"add-the-checkmarkpipe\">Add the <em>CheckmarkPipe</em><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#add-the-checkmarkpipe\"><i class=\"material-icons\">link</i></a></h4>\n<p>The AngularJS directive had a <code>checkmark</code> <em>filter</em>.\nTurn that into an Angular <strong>pipe</strong>.</p>\n<p>There is no upgrade method to convert filters into pipes.\nYou won't miss it.\nIt's easy to turn the filter function into an equivalent Pipe class.\nThe implementation is the same as before, repackaged in the <code>transform</code> method.\nRename the file to <code>checkmark.pipe.ts</code> to conform with Angular conventions:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.ts\" header=\"app/core/checkmark/checkmark.pipe.ts\">\nimport { <a href=\"api/core/Pipe\" class=\"code-anchor\">Pipe</a>, <a href=\"api/core/PipeTransform\" class=\"code-anchor\">PipeTransform</a> } from '@angular/core';\n\n@<a href=\"api/core/Pipe\" class=\"code-anchor\">Pipe</a>({name: 'checkmark'})\nexport class CheckmarkPipe implements <a href=\"api/core/PipeTransform\" class=\"code-anchor\">PipeTransform</a> {\n transform(input: boolean) {\n return input ? '\\u2713' : '\\u2718';\n }\n}\n\n\n</code-example>\n<p>Now import and declare the newly created pipe and\nremove the filter <script> tag from <code>index.html</code>:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/app.module.ts\" region=\"checkmarkpipe\" header=\"app.module.ts\">\nimport { CheckmarkPipe } from './core/checkmark/checkmark.pipe';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>,\n <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a>,\n <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a>,\n ],\n declarations: [\n PhoneListComponent,\n PhoneDetailComponent,\n CheckmarkPipe\n ],\n entryComponents: [\n PhoneListComponent,\n PhoneDetailComponent\n ],\n providers: [\n Phone,\n routeParamsProvider\n ]\n})\nexport class AppModule {\n constructor(private upgrade: <a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a>) { }\n ngDoBootstrap() {\n this.upgrade.bootstrap(document.documentElement, ['phonecatApp']);\n }\n}\n\n</code-example>\n<h3 id=\"aot-compile-the-hybrid-app\">AOT compile the hybrid app<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#aot-compile-the-hybrid-app\"><i class=\"material-icons\">link</i></a></h3>\n<p>To use AOT with a hybrid app, you have to first set it up like any other Angular application,\nas shown in <a href=\"guide/aot-compiler\">the Ahead-of-time Compilation chapter</a>.</p>\n<p>Then change <code>main-aot.ts</code> to bootstrap the <code>AppComponentFactory</code> that was generated\nby the AOT compiler:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/main-aot.ts\" header=\"app/main-aot.ts\">\nimport { <a href=\"api/platform-browser/platformBrowser\" class=\"code-anchor\">platformBrowser</a> } from '@angular/platform-browser';\n\nimport { AppModuleNgFactory } from './app.module.ngfactory';\n\n<a href=\"api/platform-browser/platformBrowser\" class=\"code-anchor\">platformBrowser</a>().bootstrapModuleFactory(AppModuleNgFactory);\n\n\n</code-example>\n<p>You need to load all the AngularJS files you already use in <code>index.html</code> in <code>aot/index.html</code>\nas well:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/aot/index.html\" header=\"aot/index.html\">\n<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n\n <base href=\"/app/\">\n\n <title>Google Phone Gallery</title>\n <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\" />\n <link rel=\"stylesheet\" href=\"app.css\" />\n <link rel=\"stylesheet\" href=\"app.animations.css\" />\n\n <script src=\"https://code.jquery.com/jquery-2.2.4.js\"></script>\n <script src=\"https://code.angularjs.org/1.5.5/angular.js\"></script>\n <script src=\"https://code.angularjs.org/1.5.5/angular-animate.js\"></script>\n <script src=\"https://code.angularjs.org/1.5.5/angular-resource.js\"></script>\n <script src=\"https://code.angularjs.org/1.5.5/angular-route.js\"></script>\n\n <script src=\"app.module.ajs.js\"></script>\n <script src=\"app.config.js\"></script>\n <script src=\"app.animations.js\"></script>\n <script src=\"core/core.module.js\"></script>\n <script src=\"core/phone/phone.module.js\"></script>\n <script src=\"phone-list/phone-list.module.js\"></script>\n <script src=\"phone-detail/phone-detail.module.js\"></script>\n\n <script src=\"/node_modules/core-js/client/shim.min.js\"></script>\n <script src=\"/node_modules/zone.js/bundles/zone.umd.min.js\"></script>\n\n <script>window.module = 'aot';</script>\n </head>\n\n <body>\n <div class=\"view-container\">\n <div ng-view class=\"view-frame\"></div>\n </div>\n </body>\n <script src=\"/dist/build.js\"></script>\n</html>\n\n\n</code-example>\n<p>These files need to be copied together with the polyfills. The files the application\nneeds at runtime, like the <code>.json</code> phone lists and images, also need to be copied.</p>\n<p>Install <code>fs-extra</code> via <code>npm install fs-extra --save-dev</code> for better file copying, and change\n<code>copy-dist-files.js</code> to the following:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/copy-dist-files.js\" header=\"copy-dist-files.js\">\nvar fsExtra = require('fs-extra');\nvar resources = [\n // polyfills\n 'node_modules/core-js/client/shim.min.js',\n 'node_modules/zone.js/bundles/zone.umd.min.js',\n // css\n 'app/app.css',\n 'app/app.animations.css',\n // images and json files\n 'app/img/',\n 'app/phones/',\n // app files\n 'app/app.module.ajs.js',\n 'app/app.config.js',\n 'app/app.animations.js',\n 'app/core/core.module.js',\n 'app/core/phone/phone.module.js',\n 'app/phone-list/phone-list.module.js',\n 'app/phone-detail/phone-detail.module.js'\n];\nresources.map(function(sourcePath) {\n // Need to rename zone.umd.min.js to zone.min.js\n var destPath = `aot/${sourcePath}`.replace('.umd.min.js', '.min.js');\n fsExtra.copySync(sourcePath, destPath);\n});\n\n\n</code-example>\n<p>And that's all you need to use AOT while upgrading your app!</p>\n<h3 id=\"adding-the-angular-router-and-bootstrap\">Adding The Angular Router And Bootstrap<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#adding-the-angular-router-and-bootstrap\"><i class=\"material-icons\">link</i></a></h3>\n<p>At this point, you've replaced all AngularJS application components with\ntheir Angular counterparts, even though you're still serving them from the AngularJS router.</p>\n<h4 id=\"add-the-angular-router\">Add the Angular router<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#add-the-angular-router\"><i class=\"material-icons\">link</i></a></h4>\n<p>Angular has an <a href=\"guide/router\">all-new router</a>.</p>\n<p>Like all routers, it needs a place in the UI to display routed views.\nFor Angular that's the <code><<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a>></code> and it belongs in a <em>root component</em>\nat the top of the applications component tree.</p>\n<p>You don't yet have such a root component, because the app is still managed as an AngularJS app.\nCreate a new <code>app.component.ts</code> file with the following <code>AppComponent</code> class:</p>\n<code-example path=\"upgrade-phonecat-3-final/app/app.component.ts\" header=\"app/app.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'phonecat-app',\n template: '<<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a>></<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a>>'\n})\nexport class AppComponent { }\n\n\n</code-example>\n<p>It has a simple template that only includes the <code><<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a>></code>.\nThis component just renders the contents of the active route and nothing else.</p>\n<p>The selector tells Angular to plug this root component into the <code><phonecat-app></code>\nelement on the host web page when the application launches.</p>\n<p>Add this <code><phonecat-app></code> element to the <code>index.html</code>.\nIt replaces the old AngularJS <code>ng-view</code> directive:</p>\n<code-example path=\"upgrade-phonecat-3-final/index.html\" region=\"appcomponent\" header=\"index.html (body)\">\n<body>\n <phonecat-app></phonecat-app>\n</body>\n\n</code-example>\n<h4 id=\"create-the-routing-module\">Create the <em>Routing Module</em><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#create-the-routing-module\"><i class=\"material-icons\">link</i></a></h4>\n<p>A router needs configuration whether it's the AngularJS or Angular or any other router.</p>\n<p>The details of Angular router configuration are best left to the <a href=\"guide/router\">Routing documentation</a>\nwhich recommends that you create a <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> dedicated to router configuration\n(called a <em>Routing Module</em>).</p>\n<code-example path=\"upgrade-phonecat-3-final/app/app-routing.module.ts\" header=\"app/app-routing.module.ts\">\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a>, <a href=\"api/router/RouterModule\" class=\"code-anchor\">RouterModule</a> } from '@angular/router';\nimport { <a href=\"api/common/APP_BASE_HREF\" class=\"code-anchor\">APP_BASE_HREF</a>, <a href=\"api/common/HashLocationStrategy\" class=\"code-anchor\">HashLocationStrategy</a>, <a href=\"api/common/LocationStrategy\" class=\"code-anchor\">LocationStrategy</a> } from '@angular/common';\n\nimport { PhoneDetailComponent } from './phone-detail/phone-detail.component';\nimport { PhoneListComponent } from './phone-list/phone-list.component';\n\nconst routes: <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a> = [\n { path: '', redirectTo: 'phones', pathMatch: 'full' },\n { path: 'phones', component: PhoneListComponent },\n { path: 'phones/:phoneId', component: PhoneDetailComponent }\n];\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [ RouterModule.forRoot(routes) ],\n exports: [ <a href=\"api/router/RouterModule\" class=\"code-anchor\">RouterModule</a> ],\n providers: [\n { provide: <a href=\"api/common/APP_BASE_HREF\" class=\"code-anchor\">APP_BASE_HREF</a>, useValue: '!' },\n { provide: <a href=\"api/common/LocationStrategy\" class=\"code-anchor\">LocationStrategy</a>, useClass: <a href=\"api/common/HashLocationStrategy\" class=\"code-anchor\">HashLocationStrategy</a> },\n ]\n})\nexport class AppRoutingModule { }\n\n\n</code-example>\n<p>This module defines a <code>routes</code> object with two routes to the two phone components\nand a default route for the empty path.\nIt passes the <code>routes</code> to the <code>RouterModule.forRoot</code> method which does the rest.</p>\n<p>A couple of extra providers enable routing with \"hash\" URLs such as <code>#!/phones</code>\ninstead of the default \"push state\" strategy.</p>\n<p>Now update the <code>AppModule</code> to import this <code>AppRoutingModule</code> and also the\ndeclare the root <code>AppComponent</code> as the bootstrap component.\nThat tells Angular that it should bootstrap the app with the <em>root</em> <code>AppComponent</code> and\ninsert its view into the host web page.</p>\n<p>You must also remove the bootstrap of the AngularJS module from <code>ngDoBootstrap()</code> in <code>app.module.ts</code>\nand the <code><a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a></code> import.</p>\n<code-example path=\"upgrade-phonecat-3-final/app/app.module.ts\" header=\"app/app.module.ts\">\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a> } from '@angular/platform-browser';\nimport { <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a> } from '@angular/forms';\nimport { <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a> } from '@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a>';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { CheckmarkPipe } from './core/checkmark/checkmark.pipe';\nimport { Phone } from './core/phone/phone.service';\nimport { PhoneDetailComponent } from './phone-detail/phone-detail.component';\nimport { PhoneListComponent } from './phone-list/phone-list.component';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a>,\n <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a>,\n AppRoutingModule\n ],\n declarations: [\n AppComponent,\n PhoneListComponent,\n CheckmarkPipe,\n PhoneDetailComponent\n ],\n providers: [\n Phone\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {}\n\n\n</code-example>\n<p>And since you are routing to <code>PhoneListComponent</code> and <code>PhoneDetailComponent</code> directly rather than\nusing a route template with a <code><phone-list></code> or <code><phone-detail></code> tag, you can do away with their\nAngular selectors as well.</p>\n<h4 id=\"generate-links-for-each-phone\">Generate links for each phone<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#generate-links-for-each-phone\"><i class=\"material-icons\">link</i></a></h4>\n<p>You no longer have to hardcode the links to phone details in the phone list.\nYou can generate data bindings for each phone's <code>id</code> to the <code><a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a></code> directive\nand let that directive construct the appropriate URL to the <code>PhoneDetailComponent</code>:</p>\n<code-example path=\"upgrade-phonecat-3-final/app/phone-list/phone-list.template.html\" region=\"list\" header=\"app/phone-list/phone-list.template.html (list with links)\">\n<ul class=\"phones\">\n <li *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let phone of getPhones()\"\n class=\"thumbnail phone-list-item\">\n <a [<a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>]=\"['/phones', phone.id]\" class=\"thumb\">\n <img [src]=\"phone.imageUrl\" [alt]=\"phone.name\" />\n </a>\n <a [<a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>]=\"['/phones', phone.id]\" class=\"name\">{{phone.name}}</a>\n <p>{{phone.snippet}}</p>\n </li>\n</ul>\n\n</code-example>\n<div class=\"alert is-helpful\">\n<p>See the <a href=\"guide/router\">Routing</a> page for details.</p>\n</div><br>\n<h4 id=\"use-route-parameters\">Use route parameters<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#use-route-parameters\"><i class=\"material-icons\">link</i></a></h4>\n<p>The Angular router passes route parameters differently.\nCorrect the <code>PhoneDetail</code> component constructor to expect an injected <code><a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a></code> object.\nExtract the <code>phoneId</code> from the <code>ActivatedRoute.snapshot.params</code> and fetch the phone data as before:</p>\n<code-example path=\"upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts\" header=\"app/phone-detail/phone-detail.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\nimport { <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a> } from '@angular/router';\n\nimport { Phone, PhoneData } from '../core/phone/phone.service';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'phone-detail',\n templateUrl: './phone-detail.template.html'\n})\nexport class PhoneDetailComponent {\n phone: PhoneData;\n mainImageUrl: string;\n\n constructor(activatedRoute: <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a>, phone: Phone) {\n phone.get(activatedRoute.snapshot.paramMap.get('phoneId'))\n .subscribe((p: PhoneData) => {\n this.phone = p;\n this.setImage(p.images[0]);\n });\n }\n\n setImage(imageUrl: string) {\n this.mainImageUrl = imageUrl;\n }\n}\n\n\n</code-example>\n<p>You are now running a pure Angular application!</p>\n<h3 id=\"say-goodbye-to-angularjs\">Say Goodbye to AngularJS<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#say-goodbye-to-angularjs\"><i class=\"material-icons\">link</i></a></h3>\n<p>It is time to take off the training wheels and let the application begin\nits new life as a pure, shiny Angular app. The remaining tasks all have to\ndo with removing code - which of course is every programmer's favorite task!</p>\n<p>The application is still bootstrapped as a hybrid app.\nThere's no need for that anymore.</p>\n<p>Switch the bootstrap method of the application from the <code><a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a></code> to the Angular way.</p>\n<code-example path=\"upgrade-phonecat-3-final/app/main.ts\" header=\"main.ts\">\nimport { <a href=\"api/platform-browser-dynamic/platformBrowserDynamic\" class=\"code-anchor\">platformBrowserDynamic</a> } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app.module';\n\n<a href=\"api/platform-browser-dynamic/platformBrowserDynamic\" class=\"code-anchor\">platformBrowserDynamic</a>().bootstrapModule(AppModule);\n\n\n</code-example>\n<p>If you haven't already, remove all references to the <code><a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a></code> from <code>app.module.ts</code>,\nas well as any <a href=\"guide/upgrade#making-angularjs-dependencies-injectable-to-angular\">factory provider</a>\nfor AngularJS services, and the <code>app/ajs-upgraded-providers.ts</code> file.</p>\n<p>Also remove any <code><a href=\"api/upgrade/static/downgradeInjectable\" class=\"code-anchor\">downgradeInjectable</a>()</code> or <code><a href=\"api/upgrade/static/downgradeComponent\" class=\"code-anchor\">downgradeComponent</a>()</code> you find,\ntogether with the associated AngularJS factory or directive declarations.\nSince you no longer have downgraded components, you no longer list them\nin <code>entryComponents</code>.</p>\n<code-example path=\"upgrade-phonecat-3-final/app/app.module.ts\" header=\"app.module.ts\">\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a> } from '@angular/platform-browser';\nimport { <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a> } from '@angular/forms';\nimport { <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a> } from '@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a>';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { CheckmarkPipe } from './core/checkmark/checkmark.pipe';\nimport { Phone } from './core/phone/phone.service';\nimport { PhoneDetailComponent } from './phone-detail/phone-detail.component';\nimport { PhoneListComponent } from './phone-list/phone-list.component';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a>,\n <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a>,\n AppRoutingModule\n ],\n declarations: [\n AppComponent,\n PhoneListComponent,\n CheckmarkPipe,\n PhoneDetailComponent\n ],\n providers: [\n Phone\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {}\n\n\n</code-example>\n<p>You may also completely remove the following files. They are AngularJS\nmodule configuration files and not needed in Angular:</p>\n<ul>\n<li><code>app/app.module.ajs.ts</code></li>\n<li><code>app/app.config.ts</code></li>\n<li><code>app/core/core.module.ts</code></li>\n<li><code>app/core/phone/phone.module.ts</code></li>\n<li><code>app/phone-detail/phone-detail.module.ts</code></li>\n<li><code>app/phone-list/phone-list.module.ts</code></li>\n</ul>\n<p>The external typings for AngularJS may be uninstalled as well. The only ones\nyou still need are for Jasmine and Angular polyfills.\nThe <code>@angular/upgrade</code> package and its mapping in <code>systemjs.config.js</code> can also go.</p>\n<code-example format=\"\">\n npm uninstall @angular/upgrade --save\n npm uninstall @types/angular @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev\n</code-example>\n<p>Finally, from <code>index.html</code>, remove all references to AngularJS scripts and jQuery.\nWhen you're done, this is what it should look like:</p>\n<code-example path=\"upgrade-phonecat-3-final/index.html\" region=\"full\" header=\"index.html\">\n<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <base href=\"/app/\">\n <title>Google Phone Gallery</title>\n <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\" />\n <link rel=\"stylesheet\" href=\"app.css\" />\n\n <script src=\"/node_modules/core-js/client/shim.min.js\"></script>\n <script src=\"/node_modules/zone.js/bundles/zone.umd.js\"></script>\n <script src=\"/node_modules/systemjs/dist/system.src.js\"></script>\n <script src=\"/systemjs.config.js\"></script>\n <script>\n System.import('/app');\n </script>\n </head>\n <body>\n <phonecat-app></phonecat-app>\n </body>\n</html>\n\n</code-example>\n<p>That is the last you'll see of AngularJS! It has served us well but now\nit's time to say goodbye.</p>\n<h2 id=\"appendix-upgrading-phonecat-tests\">Appendix: Upgrading PhoneCat Tests<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#appendix-upgrading-phonecat-tests\"><i class=\"material-icons\">link</i></a></h2>\n<p>Tests can not only be retained through an upgrade process, but they can also be\nused as a valuable safety measure when ensuring that the application does not\nbreak during the upgrade. E2E tests are especially useful for this purpose.</p>\n<h3 id=\"e2e-tests\">E2E Tests<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#e2e-tests\"><i class=\"material-icons\">link</i></a></h3>\n<p>The PhoneCat project has both E2E Protractor tests and some Karma unit tests in it.\nOf these two, E2E tests can be dealt with much more easily: By definition,\nE2E tests access the application from the <em>outside</em> by interacting with\nthe various UI elements the app puts on the screen. E2E tests aren't really that\nconcerned with the internal structure of the application components. That\nalso means that, although you modify the project quite a bit during the upgrade, the E2E\ntest suite should keep passing with just minor modifications. You\ndidn't change how the application behaves from the user's point of view.</p>\n<p>During TypeScript conversion, there is nothing to do to keep E2E tests\nworking. But when you change the bootstrap to that of a Hybrid app,\nyou must make a few changes.</p>\n<p>Update the <code>protractor-conf.js</code> to sync with hybrid apps:</p>\n<code-example format=\"\">\n ng12Hybrid: true\n</code-example>\n<p>When you start to upgrade components and their templates to Angular, you'll make more changes\nbecause the E2E tests have matchers that are specific to AngularJS.\nFor PhoneCat you need to make the following changes in order to make things work with Angular:</p>\n<table>\n <tbody><tr>\n <th>\n Previous code\n </th>\n <th>\n New code\n </th>\n <th>\n Notes\n </th>\n </tr>\n <tr>\n <td>\n<p> <code>by.repeater('phone in $ctrl.phones').column('phone.name')</code></p>\n </td>\n <td>\n<p> <code>by.css('.phones .name')</code></p>\n </td>\n <td>\n<p> The repeater matcher relies on AngularJS <code>ng-repeat</code></p>\n </td>\n </tr>\n <tr>\n <td>\n<p> <code>by.repeater('phone in $ctrl.phones')</code></p>\n </td>\n <td>\n<p> <code>by.css('.phones li')</code></p>\n </td>\n <td>\n<p> The repeater matcher relies on AngularJS <code>ng-repeat</code></p>\n </td>\n </tr>\n <tr>\n <td>\n<p> <code>by.model('$ctrl.query')</code></p>\n </td>\n <td>\n<p> <code>by.css('input')</code></p>\n </td>\n <td>\n<p> The model matcher relies on AngularJS <code>ng-model</code></p>\n </td>\n </tr>\n <tr>\n <td>\n<p> <code>by.model('$ctrl.orderProp')</code></p>\n </td>\n <td>\n<p> <code>by.css('select')</code></p>\n </td>\n <td>\n<p> The model matcher relies on AngularJS <code>ng-model</code></p>\n </td>\n </tr>\n <tr>\n <td>\n<p> <code>by.binding('$ctrl.phone.name')</code></p>\n </td>\n <td>\n<p> <code>by.css('h1')</code></p>\n </td>\n <td>\n<p> The binding matcher relies on AngularJS data binding</p>\n </td>\n </tr>\n</tbody></table>\n<p>When the bootstrap method is switched from that of <code><a href=\"api/upgrade/static/UpgradeModule\" class=\"code-anchor\">UpgradeModule</a></code> to\npure Angular, AngularJS ceases to exist on the page completely.\nAt this point, you need to tell Protractor that it should not be looking for\nan AngularJS app anymore, but instead it should find <em>Angular apps</em> from\nthe page.</p>\n<p>Replace the <code>ng12Hybrid</code> previously added with the following in <code>protractor-conf.js</code>:</p>\n<code-example format=\"\">\n useAllAngular2AppRoots: true,\n</code-example>\n<p>Also, there are a couple of Protractor API calls in the PhoneCat test code that\nare using the AngularJS <code>$location</code> service under the hood. As that\nservice is no longer present after the upgrade, replace those calls with ones\nthat use WebDriver's generic URL APIs instead. The first of these is\nthe redirection spec:</p>\n<code-example path=\"upgrade-phonecat-3-final/e2e-spec.ts\" region=\"redirect\" header=\"e2e-tests/scenarios.ts\">\nit('should redirect `index.html` to `index.html#!/phones', async () => {\n await browser.get('index.html');\n await browser.waitForAngular();\n const url = await browser.getCurrentUrl();\n expect(url.endsWith('/phones')).toBe(true);\n});\n\n</code-example>\n<p>And the second is the phone links spec:</p>\n<code-example path=\"upgrade-phonecat-3-final/e2e-spec.ts\" region=\"links\" header=\"e2e-tests/scenarios.ts\">\nit('should render phone specific links', async () => {\n const <a href=\"api/animations/query\" class=\"code-anchor\">query</a> = element(by.css('input'));\n await query.sendKeys('nexus');\n await element.all(by.css('.phones li a')).first().click();\n const url = await browser.getCurrentUrl();\n expect(url.endsWith('/phones/nexus-s')).toBe(true);\n});\n\n</code-example>\n<h3 id=\"unit-tests\">Unit Tests<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade#unit-tests\"><i class=\"material-icons\">link</i></a></h3>\n<p>For unit tests, on the other hand, more conversion work is needed. Effectively\nthey need to be <em>upgraded</em> along with the production code.</p>\n<p>During TypeScript conversion no changes are strictly necessary. But it may be\na good idea to convert the unit test code into TypeScript as well.</p>\n<p>For instance, in the phone detail component spec, you can use ES2015\nfeatures like arrow functions and block-scoped variables and benefit from the type\ndefinitions of the AngularJS services you're consuming:</p>\n<code-example path=\"upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts\" header=\"app/phone-detail/phone-detail.component.spec.ts\">\ndescribe('phoneDetail', () => {\n\n // Load the module that contains the `phoneDetail` component before each test\n beforeEach(angular.mock.module('phoneDetail'));\n\n // Test the controller\n describe('PhoneDetailController', () => {\n let $httpBackend: angular.IHttpBackendService;\n let ctrl: any;\n const xyzPhoneData = {\n name: 'phone xyz',\n images: ['image/url1.png', 'image/url2.png']\n };\n\n beforeEach(inject(($componentController: any,\n _$httpBackend_: angular.IHttpBackendService,\n $routeParams: angular.route.IRouteParamsService) => {\n $httpBackend = _$httpBackend_;\n $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData);\n\n $routeParams.phoneId = 'xyz';\n\n ctrl = $componentController('phoneDetail');\n }));\n\n it('should fetch the phone details', () => {\n jasmine.addCustomEqualityTester(angular.equals);\n\n expect(ctrl.phone).toEqual({});\n\n $httpBackend.flush();\n expect(ctrl.phone).toEqual(xyzPhoneData);\n });\n\n });\n\n});\n\n\n</code-example>\n<p>Once you start the upgrade process and bring in SystemJS, configuration changes\nare needed for Karma. You need to let SystemJS load all the new Angular code,\nwhich can be done with the following kind of shim file:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/karma-test-shim.1.js\" header=\"karma-test-shim.js\">\n// /*<a href=\"api/core/global\" class=\"code-anchor\">global</a> jasmine, __karma__, window*/\nError.stackTraceLimit = 0; // \"No stacktrace\"\" is usually best for app testing.\n\n// Uncomment to get full stacktrace output. Sometimes helpful, usually not.\n// Error.stackTraceLimit = Infinity; //\n\njasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;\n\nvar builtPath = '/base/app/';\n\n__karma__.loaded = function () { };\n\nfunction isJsFile(path) {\n return path.slice(-3) == '.js';\n}\n\nfunction isSpecFile(path) {\n return /\\.spec\\.(.*\\.)?js$/.test(path);\n}\n\nfunction isBuiltFile(path) {\n return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);\n}\n\nvar allSpecFiles = Object.keys(window.__karma__.files)\n .filter(isSpecFile)\n .filter(isBuiltFile);\n\nSystem.config({\n baseURL: '/base',\n // Extend usual application package list with test folder\n packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },\n\n // Assume npm: is set in `paths` in systemjs.config\n // Map the angular testing umd bundles\n map: {\n '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',\n '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',\n '@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a>/testing': 'npm:@angular/common/bundles/common-http-testing.umd.js',\n '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',\n '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',\n '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',\n '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',\n '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',\n },\n});\n\nSystem.import('systemjs.config.js')\n .then(importSystemJsExtras)\n .then(initTestBed)\n .then(initTesting);\n\n/** <a href=\"api/core/Optional\" class=\"code-anchor\">Optional</a> SystemJS configuration extras. Keep going w/o it */\nfunction importSystemJsExtras(){\n return System.import('systemjs.config.extras.js')\n .catch(function(reason) {\n console.log(\n 'Warning: System.import could not load the optional \"systemjs.config.extras.js\". Did you omit it by accident? Continuing without it.'\n );\n console.log(reason);\n });\n}\n\nfunction initTestBed() {\n return Promise.all([\n System.import('@angular/core/testing'),\n System.import('@angular/platform-browser-dynamic/testing')\n ])\n\n .then(function (providers) {\n var coreTesting = providers[0];\n var browserTesting = providers[1];\n\n coreTesting.TestBed.initTestEnvironment(\n browserTesting.BrowserDynamicTestingModule,\n browserTesting.platformBrowserDynamicTesting());\n })\n}\n\n// Import all spec files and start karma\nfunction initTesting() {\n return Promise.all(\n allSpecFiles.map(function (moduleName) {\n return System.import(moduleName);\n })\n )\n .then(__karma__.start, __karma__.error);\n}\n\n\n</code-example>\n<p>The shim first loads the SystemJS configuration, then Angular's test support libraries,\nand then the application's spec files themselves.</p>\n<p>Karma configuration should then be changed so that it uses the application root dir\nas the base directory, instead of <code>app</code>.</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/karma.conf.ajs.js\" region=\"basepath\" header=\"karma.conf.js\">\nbasePath: './',\n\n</code-example>\n<p>Once done, you can load SystemJS and other dependencies, and also switch the configuration\nfor loading application files so that they are <em>not</em> included to the page by Karma. You'll let\nthe shim and SystemJS load them.</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/karma.conf.ajs.js\" region=\"files\" header=\"karma.conf.js\">\n// System.js for module loading\n'node_modules/systemjs/dist/system.src.js',\n\n// Polyfills\n'node_modules/core-js/client/shim.js',\n\n// zone.js\n'node_modules/zone.js/bundles/zone.umd.js',\n'node_modules/zone.js/bundles/zone-testing.umd.js',\n\n// RxJs.\n{ <a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a>: 'node_modules/rxjs/**/*.js', included: false, watched: false },\n{ <a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a>: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },\n\n// Angular itself and the testing library\n{<a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a>: 'node_modules/@angular/**/*.js', included: false, watched: false},\n{<a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a>: 'node_modules/@angular/**/*.js.map', included: false, watched: false},\n\n{<a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a>: 'systemjs.config.js', included: false, watched: false},\n'karma-test-shim.js',\n\n{<a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a>: 'app/**/*.module.js', included: false, watched: true},\n{<a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a>: 'app/*!(.module|.spec).js', included: false, watched: true},\n{<a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a>: 'app/!(bower_components)/**/*!(.module|.spec).js', included: false, watched: true},\n{<a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a>: 'app/**/*.spec.js', included: false, watched: true},\n\n{<a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a>: '**/*.html', included: false, watched: true},\n\n</code-example>\n<p>Since the HTML templates of Angular components will be loaded as well, you must help\nKarma out a bit so that it can route them to the right paths:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/karma.conf.ajs.js\" region=\"html\" header=\"karma.conf.js\">\n// proxied base paths for loading assets\nproxies: {\n // required for component assets fetched by Angular's compiler\n '/phone-detail': '/base/app/phone-detail',\n '/phone-list': '/base/app/phone-list'\n},\n\n</code-example>\n<p>The unit test files themselves also need to be switched to Angular when their production\ncounterparts are switched. The specs for the checkmark pipe are probably the most straightforward,\nas the pipe has no dependencies:</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.spec.ts\" header=\"app/core/checkmark/checkmark.pipe.spec.ts\">\nimport { CheckmarkPipe } from './checkmark.pipe';\n\ndescribe('CheckmarkPipe', () => {\n\n it('should convert boolean values to unicode checkmark or cross', () => {\n const checkmarkPipe = new CheckmarkPipe();\n expect(checkmarkPipe.transform(true)).toBe('\\u2713');\n expect(checkmarkPipe.transform(false)).toBe('\\u2718');\n });\n});\n\n\n</code-example>\n<p>The unit test for the phone service is a bit more involved. You need to switch from the mocked-out\nAngularJS <code>$httpBackend</code> to a mocked-out Angular Http backend.</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts\" header=\"app/core/phone/phone.service.spec.ts\">\nimport { inject, <a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a> } from '@angular/core/testing';\nimport { <a href=\"api/common/http/testing/HttpClientTestingModule\" class=\"code-anchor\">HttpClientTestingModule</a>, <a href=\"api/common/http/testing/HttpTestingController\" class=\"code-anchor\">HttpTestingController</a> } from '@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a>/testing';\nimport { Phone, PhoneData } from './phone.service';\n\ndescribe('Phone', () => {\n let phone: Phone;\n const phonesData: PhoneData[] = [\n {name: 'Phone X', snippet: '', images: []},\n {name: 'Phone Y', snippet: '', images: []},\n {name: 'Phone Z', snippet: '', images: []}\n ];\n let httpMock: <a href=\"api/common/http/testing/HttpTestingController\" class=\"code-anchor\">HttpTestingController</a>;\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [\n <a href=\"api/common/http/testing/HttpClientTestingModule\" class=\"code-anchor\">HttpClientTestingModule</a>\n ],\n providers: [\n Phone,\n ]\n });\n });\n\n beforeEach(inject([<a href=\"api/common/http/testing/HttpTestingController\" class=\"code-anchor\">HttpTestingController</a>, Phone], (_httpMock_: <a href=\"api/common/http/testing/HttpTestingController\" class=\"code-anchor\">HttpTestingController</a>, _phone_: Phone) => {\n httpMock = _httpMock_;\n phone = _phone_;\n }));\n\n afterEach(() => {\n httpMock.verify();\n });\n\n it('should fetch the phones data from `/phones/phones.json`', () => {\n phone.query().subscribe(result => {\n expect(result).toEqual(phonesData);\n });\n const req = httpMock.expectOne(`/phones/phones.json`);\n req.flush(phonesData);\n });\n\n});\n\n\n\n</code-example>\n<p>For the component specs, you can mock out the <code>Phone</code> service itself, and have it provide\ncanned phone data. You use Angular's component unit testing APIs for both components.</p>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts\" header=\"app/phone-detail/phone-detail.component.spec.ts\">\nimport { <a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a>, <a href=\"api/core/testing/waitForAsync\" class=\"code-anchor\">waitForAsync</a> } from '@angular/core/testing';\nimport { <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a> } from '@angular/router';\nimport { Observable, of } from 'rxjs';\n\nimport { PhoneDetailComponent } from './phone-detail.component';\nimport { Phone, PhoneData } from '../core/phone/phone.service';\nimport { CheckmarkPipe } from '../core/checkmark/checkmark.pipe';\n\nfunction xyzPhoneData(): PhoneData {\n return {name: 'phone xyz', snippet: '', images: ['image/url1.png', 'image/url2.png']};\n}\n\nclass MockPhone {\n get(id: string): Observable<PhoneData> {\n return of(xyzPhoneData());\n }\n}\n\n\nclass ActivatedRouteMock {\n constructor(public snapshot: any) {}\n}\n\n\ndescribe('PhoneDetailComponent', () => {\n\n beforeEach(<a href=\"api/core/testing/waitForAsync\" class=\"code-anchor\">waitForAsync</a>(() => {\n TestBed.configureTestingModule({\n declarations: [ CheckmarkPipe, PhoneDetailComponent ],\n providers: [\n { provide: Phone, useClass: MockPhone },\n { provide: <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a>, useValue: new ActivatedRouteMock({ params: { phoneId: 1 } }) }\n ]\n })\n .compileComponents();\n }));\n\n it('should fetch phone detail', () => {\n const fixture = TestBed.createComponent(PhoneDetailComponent);\n fixture.detectChanges();\n const compiled = fixture.debugElement.nativeElement;\n expect(compiled.querySelector('h1').textContent).toContain(xyzPhoneData().name);\n });\n});\n\n\n</code-example>\n<code-example path=\"upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts\" header=\"app/phone-list/phone-list.component.spec.ts\">\nimport {<a href=\"api/common/testing/SpyLocation\" class=\"code-anchor\">SpyLocation</a>} from '@angular/common/testing';\nimport {<a href=\"api/core/NO_ERRORS_SCHEMA\" class=\"code-anchor\">NO_ERRORS_SCHEMA</a>} from '@angular/core';\nimport {<a href=\"api/core/testing/ComponentFixture\" class=\"code-anchor\">ComponentFixture</a>, <a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a>, <a href=\"api/core/testing/waitForAsync\" class=\"code-anchor\">waitForAsync</a>} from '@angular/core/testing';\nimport {<a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a>} from '@angular/router';\nimport {Observable, of} from 'rxjs';\n\nimport {Phone, PhoneData} from '../core/phone/phone.service';\n\nimport {PhoneListComponent} from './phone-list.component';\n\nclass ActivatedRouteMock {\n constructor(public snapshot: any) {}\n}\n\nclass MockPhone {\n <a href=\"api/animations/query\" class=\"code-anchor\">query</a>(): Observable<PhoneData[]> {\n return of([\n {name: 'Nexus S', snippet: '', images: []}, {name: 'Motorola DROID', snippet: '', images: []}\n ]);\n }\n}\n\nlet fixture: <a href=\"api/core/testing/ComponentFixture\" class=\"code-anchor\">ComponentFixture</a><PhoneListComponent>;\n\ndescribe('PhoneList', () => {\n beforeEach(<a href=\"api/core/testing/waitForAsync\" class=\"code-anchor\">waitForAsync</a>(() => {\n <a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a>\n .configureTestingModule({\n declarations: [PhoneListComponent],\n providers: [\n {provide: <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a>, useValue: new ActivatedRouteMock({params: {'phoneId': 1}})},\n {provide: <a href=\"api/common/Location\" class=\"code-anchor\">Location</a>, useClass: <a href=\"api/common/testing/SpyLocation\" class=\"code-anchor\">SpyLocation</a>},\n {provide: Phone, useClass: MockPhone},\n ],\n schemas: [<a href=\"api/core/NO_ERRORS_SCHEMA\" class=\"code-anchor\">NO_ERRORS_SCHEMA</a>]\n })\n .compileComponents();\n }));\n\n beforeEach(() => {\n fixture = TestBed.createComponent(PhoneListComponent);\n });\n\n it('should create \"phones\" model with 2 phones fetched from xhr', () => {\n fixture.detectChanges();\n let compiled = fixture.debugElement.nativeElement;\n expect(compiled.querySelectorAll('.phone-list-item').length).toBe(2);\n expect(compiled.querySelector('.phone-list-item:nth-child(1)').textContent)\n .toContain('Motorola DROID');\n expect(compiled.querySelector('.phone-list-item:nth-child(2)').textContent)\n .toContain('Nexus S');\n });\n\n xit('should set the default value of orderProp model', () => {\n fixture.detectChanges();\n let compiled = fixture.debugElement.nativeElement;\n expect(compiled.querySelector('select option:last-child').selected).toBe(true);\n });\n});\n\n\n</code-example>\n<p>Finally, revisit both of the component tests when you switch to the Angular\nrouter. For the details component, provide a mock of Angular <code><a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a></code> object\ninstead of using the AngularJS <code>$routeParams</code>.</p>\n<code-example path=\"upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts\" region=\"activatedroute\" header=\"app/phone-detail/phone-detail.component.spec.ts\">\nimport { <a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a>, <a href=\"api/core/testing/waitForAsync\" class=\"code-anchor\">waitForAsync</a> } from '@angular/core/testing';\nimport { <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a> } from '@angular/router';\n/* . . . */\n\nclass ActivatedRouteMock {\n constructor(public snapshot: any) {}\n}\n\n/* . . . */\n\n beforeEach(<a href=\"api/core/testing/waitForAsync\" class=\"code-anchor\">waitForAsync</a>(() => {\n TestBed.configureTestingModule({\n declarations: [ CheckmarkPipe, PhoneDetailComponent ],\n providers: [\n { provide: Phone, useClass: MockPhone },\n { provide: <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a>, useValue: new ActivatedRouteMock({ params: { phoneId: 1 } }) }\n ]\n })\n .compileComponents();\n }));\n\n</code-example>\n<p>And for the phone list component, a few adjustments to the router make\nthe <code>RouteLink</code> directives work.</p>\n<code-example path=\"upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts\" region=\"routestuff\" header=\"app/phone-list/phone-list.component.spec.ts\">\nimport {<a href=\"api/common/testing/SpyLocation\" class=\"code-anchor\">SpyLocation</a>} from '@angular/common/testing';\nimport {<a href=\"api/core/NO_ERRORS_SCHEMA\" class=\"code-anchor\">NO_ERRORS_SCHEMA</a>} from '@angular/core';\nimport {<a href=\"api/core/testing/ComponentFixture\" class=\"code-anchor\">ComponentFixture</a>, <a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a>, <a href=\"api/core/testing/waitForAsync\" class=\"code-anchor\">waitForAsync</a>} from '@angular/core/testing';\nimport {<a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a>} from '@angular/router';\nimport {Observable, of} from 'rxjs';\n\nimport {Phone, PhoneData} from '../core/phone/phone.service';\n\nimport {PhoneListComponent} from './phone-list.component';\n\n/* . . . */\n\n beforeEach(<a href=\"api/core/testing/waitForAsync\" class=\"code-anchor\">waitForAsync</a>(() => {\n <a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a>\n .configureTestingModule({\n declarations: [PhoneListComponent],\n providers: [\n {provide: <a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a>, useValue: new ActivatedRouteMock({params: {'phoneId': 1}})},\n {provide: <a href=\"api/common/Location\" class=\"code-anchor\">Location</a>, useClass: <a href=\"api/common/testing/SpyLocation\" class=\"code-anchor\">SpyLocation</a>},\n {provide: Phone, useClass: MockPhone},\n ],\n schemas: [<a href=\"api/core/NO_ERRORS_SCHEMA\" class=\"code-anchor\">NO_ERRORS_SCHEMA</a>]\n })\n .compileComponents();\n }));\n\n beforeEach(() => {\n fixture = TestBed.createComponent(PhoneListComponent);\n });\n\n</code-example>\n\n \n</div>\n\n<!-- links to this doc:\n - api/common\n - api/common/upgrade\n - api/common/upgrade/$locationShim\n - api/common/upgrade/LocationUpgradeModule\n - api/upgrade/static/downgradeComponent\n - guide/deprecations\n - guide/releases\n - guide/updating\n - guide/upgrade-performance\n - guide/upgrade-setup\n-->\n<!-- links from this doc:\n - api/animations/query\n - api/common/APP_BASE_HREF\n - api/common/HashLocationStrategy\n - api/common/Location\n - api/common/LocationStrategy\n - api/common/NgClass\n - api/common/NgForOf\n - api/common/NgIf\n - api/common/Time\n - api/common/http\n - api/common/http/HttpClient\n - api/common/http/HttpClientModule\n - api/common/http/testing/HttpClientTestingModule\n - api/common/http/testing/HttpTestingController\n - api/common/testing/SpyLocation\n - api/common/upgrade/$locationShim\n - api/common/upgrade/LocationUpgradeConfig\n - api/common/upgrade/LocationUpgradeModule\n - api/common/upgrade/LocationUpgradeModule#config\n - api/core/Component\n - api/core/Directive\n - api/core/ElementRef\n - api/core/EventEmitter\n - api/core/Injectable\n - api/core/Injector\n - api/core/Input\n - api/core/NO_ERRORS_SCHEMA\n - api/core/NgModule\n - api/core/NgZone\n - api/core/OnChanges\n - api/core/OnDestroy\n - api/core/OnInit\n - api/core/Optional\n - api/core/Output\n - api/core/Pipe\n - api/core/PipeTransform\n - api/core/SimpleChanges\n - api/core/Type\n - api/core/Version\n - api/core/global\n - api/core/testing/ComponentFixture\n - api/core/testing/TestBed\n - api/core/testing/waitForAsync\n - api/forms/FormsModule\n - api/forms/MaxValidator\n - api/forms/NgModel\n - api/forms/PatternValidator\n - api/platform-browser-dynamic/platformBrowserDynamic\n - api/platform-browser/BrowserModule\n - api/platform-browser/platformBrowser\n - api/router/ActivatedRoute\n - api/router/Router\n - api/router/RouterLink\n - api/router/RouterModule\n - api/router/RouterOutlet\n - api/router/Routes\n - api/router/UrlSegment\n - api/upgrade/static\n - api/upgrade/static/UpgradeComponent\n - api/upgrade/static/UpgradeModule\n - api/upgrade/static/downgradeComponent\n - api/upgrade/static/downgradeInjectable\n - guide/animations\n - guide/aot-compiler\n - guide/built-in-directives\n - guide/dependency-injection\n - guide/dependency-injection-providers#factory-providers\n - guide/glossary#lazy-loading\n - guide/hierarchical-dependency-injection\n - guide/lifecycle-hooks\n - guide/ngmodules\n - guide/router\n - guide/typescript-configuration\n - guide/upgrade#add-the-angular-router\n - guide/upgrade#add-the-checkmarkpipe\n - guide/upgrade#adding-the-angular-router-and-bootstrap\n - guide/upgrade#aot-compile-the-hybrid-app\n - guide/upgrade#appendix-upgrading-phonecat-tests\n - guide/upgrade#bootstrapping-a-hybrid-phonecat\n - guide/upgrade#bootstrapping-hybrid-applications\n - guide/upgrade#change-detection\n - guide/upgrade#components-and-the-dom\n - guide/upgrade#configure-a-custom-route-matcher-for-angularjs-routes\n - guide/upgrade#create-a-component-to-render-angularjs-content\n - guide/upgrade#create-a-service-to-lazy-load-angularjs\n - guide/upgrade#create-the-routing-module\n - guide/upgrade#creating-the-appmodule\n - guide/upgrade#dependency-injection\n - guide/upgrade#e2e-tests\n - guide/upgrade#follow-the-angular-styleguide\n - guide/upgrade#follow-the-angularjs-style-guide\n - guide/upgrade#generate-links-for-each-phone\n - guide/upgrade#how-ngupgrade-works\n - guide/upgrade#installing-angular\n - guide/upgrade#lazy-loading-angularjs\n - guide/upgrade#making-angular-dependencies-injectable-to-angularjs\n - guide/upgrade#making-angularjs-dependencies-injectable-to-angular\n - guide/upgrade#migrating-to-typescript\n - guide/upgrade#no-angular-filter-or-orderby-filters\n - guide/upgrade#phonecat-upgrade-tutorial\n - guide/upgrade#preparation\n - guide/upgrade#projecting-angularjs-content-into-angular-components\n - guide/upgrade#say-goodbye-to-angularjs\n - guide/upgrade#switching-to-typescript\n - guide/upgrade#transcluding-angular-content-into-angularjs-component-directives\n - guide/upgrade#unit-tests\n - guide/upgrade#upgrading-components\n - guide/upgrade#upgrading-from-angularjs-to-angular\n - guide/upgrade#upgrading-the-phone-service\n - guide/upgrade#upgrading-with-ngupgrade\n - guide/upgrade#use-route-parameters\n - guide/upgrade#using-a-module-loader\n - guide/upgrade#using-angular-components-from-angularjs-code\n - guide/upgrade#using-angularjs-component-directives-from-angular-code\n - guide/upgrade#using-component-directives\n - guide/upgrade#using-the-unified-angular-location-service\n - guide/upgrade#using-upgrademodule-with-angular-ngmodules\n - guide/upgrade#why-declare-angular-as-angulariangularstatic\n - guide/upgrade-setup\n - http://browserify.org/\n - https://docs.angularjs.org/api/ng/function/angular.bootstrap\n - https://docs.angularjs.org/api/ng/service/$location\n - https://docs.angularjs.org/api/ng/type/angular.Module\n - https://docs.angularjs.org/api/ng/type/angular.Module#component\n - https://docs.angularjs.org/api/ngRoute/directive/ngView\n - https://docs.angularjs.org/api/ngRoute/provider/$routeProvider\n - https://docs.angularjs.org/tutorial\n - https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-umd-module-definitions\n - https://github.com/angular/angular-phonecat\n - https://github.com/angular/angular/edit/master/aio/content/guide/upgrade.md?message=docs%3A%20describe%20your%20change...\n - https://github.com/angular/quickstart\n - https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md\n - https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure\n - https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity\n - https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#organizing-tests\n - https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility\n - https://github.com/systemjs/systemjs\n - https://webpack.github.io/\n - https://www.npmjs.com/package/@types/angular\n-->"
|
||
} |