5 lines
15 KiB
JSON
5 lines
15 KiB
JSON
{
|
|
"id": "guide/upgrade-setup",
|
|
"title": "Setup for upgrading from AngularJS",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/upgrade-setup.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=\"setup-for-upgrading-from-angularjs\">Setup for upgrading from AngularJS<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade-setup#setup-for-upgrading-from-angularjs\"><i class=\"material-icons\">link</i></a></h1>\n<!--\nQuestion: Can we remove this file and instead direct readers to https://github.com/angular/quickstart/blob/master/README.md\n-->\n<div class=\"alert is-critical\">\n<p><strong>Audience:</strong> Use this guide <strong>only</strong> in the context of <a href=\"guide/upgrade\" title=\"Upgrading from AngularJS to Angular\">Upgrading from AngularJS</a> or <a href=\"guide/upgrade-performance\" title=\"Upgrading for Performance\">Upgrading for Performance</a>.\nThose Upgrade guides refer to this Setup guide for information about using the <a href=\"https://github.com/angular/quickstart\" title=\"Deprecated Angular QuickStart GitHub repository\">deprecated QuickStart GitHub repository</a>, which was created prior to the current Angular <a href=\"cli\" title=\"CLI Overview\">CLI</a>.</p>\n<p><strong>For all other scenarios,</strong> see the current instructions in <a href=\"guide/setup-local\" title=\"Setting up for Local Development\">Setting up the Local Environment and Workspace</a>.</p>\n</div>\n<!--\nThe <live-example name=quickstart>QuickStart live-coding</live-example> example is an Angular _playground_.\nThere are also some differences from a local app, to simplify that live-coding experience.\nIn particular, the QuickStart live-coding example shows just the AppComponent file; it creates the equivalent of app.module.ts and main.ts internally for the playground only.\n-->\n<p>This guide describes how to develop locally on your own machine.\nSetting up a new project on your machine is quick and easy with the <a href=\"https://github.com/angular/quickstart\" title=\"Install the github QuickStart repo\">QuickStart seed on github</a>.</p>\n<p><strong>Prerequisite:</strong> Make sure you have <a href=\"guide/setup-local#prerequisites\" title=\"Angular prerequisites\">Node.js® and npm installed</a>.</p>\n<a id=\"clone\"></a>\n<h2 id=\"clone\">Clone<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade-setup#clone\"><i class=\"material-icons\">link</i></a></h2>\n<p>Perform the <em>clone-to-launch</em> steps with these terminal commands.</p>\n<code-example language=\"sh\" class=\"code-shell\">\n git clone https://github.com/angular/quickstart.git quickstart\n cd quickstart\n npm install\n npm start\n\n</code-example>\n<div class=\"alert is-important\">\n<p><code>npm start</code> fails in <em>Bash for Windows</em> in versions earlier than the Creator's Update (April 2017).</p>\n</div>\n<a id=\"download\"></a>\n<h2 id=\"download\">Download<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade-setup#download\"><i class=\"material-icons\">link</i></a></h2>\n<p><a href=\"https://github.com/angular/quickstart/archive/master.zip\" title=\"Download the QuickStart seed repository\">Download the QuickStart seed</a>\nand unzip it into your project folder. Then perform the remaining steps with these terminal commands.</p>\n<code-example language=\"sh\" class=\"code-shell\">\n cd quickstart\n npm install\n npm start\n\n</code-example>\n<div class=\"alert is-important\">\n<p><code>npm start</code> fails in <em>Bash for Windows</em> in versions earlier than the Creator's Update (April 2017).</p>\n</div>\n<a id=\"non-essential\"></a>\n<h2 id=\"delete-non-essential-files-optional\">Delete <em>non-essential</em> files (optional)<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade-setup#delete-non-essential-files-optional\"><i class=\"material-icons\">link</i></a></h2>\n<p>You can quickly delete the <em>non-essential</em> files that concern testing and QuickStart repository maintenance\n(<strong><em>including all git-related artifacts</em></strong> such as the <code>.git</code> folder and <code>.gitignore</code>!).</p>\n<div class=\"alert is-important\">\n<p>Do this only in the beginning to avoid accidentally deleting your own tests and git setup!</p>\n</div>\n<p>Open a terminal window in the project folder and enter the following commands for your environment:</p>\n<h3 id=\"osx-bash\">OS/X (bash)<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade-setup#osx-bash\"><i class=\"material-icons\">link</i></a></h3>\n<code-example language=\"sh\" class=\"code-shell\">\n xargs rm -rf < non-essential-files.osx.txt\n rm src/app/*.spec*.ts\n rm non-essential-files.osx.txt\n\n</code-example>\n<h3 id=\"windows\">Windows<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade-setup#windows\"><i class=\"material-icons\">link</i></a></h3>\n<code-example language=\"sh\" class=\"code-shell\">\n for /f %i in (non-essential-files.txt) do del %i /F /S /Q\n rd .git /s /q\n rd e2e /s /q\n\n</code-example>\n<a id=\"seed\"></a>\n<h2 id=\"whats-in-the-quickstart-seed\">What's in the QuickStart seed?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade-setup#whats-in-the-quickstart-seed\"><i class=\"material-icons\">link</i></a></h2>\n<p>The <strong>QuickStart seed</strong> provides a basic QuickStart playground application and other files necessary for local development.\nConsequently, there are many files in the project folder on your machine,\nmost of which you can <a href=\"guide/file-structure\">learn about later</a>.</p>\n<div class=\"alert is-helpful\">\n<p><strong>Reminder:</strong> The \"QuickStart seed\" example was created prior to the Angular CLI, so there are some differences between what is described here and an Angular CLI application.</p>\n</div>\n<a id=\"app-files\"></a>\n<p>Focus on the following three TypeScript (<code>.ts</code>) files in the <strong><code>/src</code></strong> folder.</p>\n<div class=\"filetree\">\n <div class=\"file\">\n src\n </div>\n <div class=\"children\">\n <div class=\"file\">\n app\n </div>\n <div class=\"children\">\n <div class=\"file\">\n app.component.ts\n </div>\n <div class=\"file\">\n app.module.ts\n </div>\n </div>\n <div class=\"file\">\n main.ts\n </div>\n </div>\n</div>\n<code-tabs>\n\n <code-pane header=\"src/app/app.component.ts\" path=\"setup/src/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: 'app-root',\n template: `<h1>Hello {{name}}</h1>`\n})\nexport class AppComponent { name = 'Angular'; }\n\n\n</code-pane>\n\n <code-pane header=\"src/app/app.module.ts\" path=\"setup/src/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 { AppComponent } from './app.component';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [ <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a> ],\n declarations: [ AppComponent ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n\n\n</code-pane>\n\n <code-pane header=\"src/main.ts\" path=\"setup/src/main.ts\">\nimport { <a href=\"api/platform-browser-dynamic/platformBrowserDynamic\" class=\"code-anchor\">platformBrowserDynamic</a> } from '@angular/platform-browser-dynamic';\nimport { AppModule } from './app/app.module';\n\n<a href=\"api/platform-browser-dynamic/platformBrowserDynamic\" class=\"code-anchor\">platformBrowserDynamic</a>().bootstrapModule(AppModule);\n\n\n</code-pane>\n\n</code-tabs>\n<p>All guides and cookbooks have <em>at least these core files</em>.\nEach file has a distinct purpose and evolves independently as the application grows.</p>\n<p>Files outside <code>src/</code> concern building, deploying, and testing your app.\nThey include configuration files and external dependencies.</p>\n<p>Files inside <code>src/</code> \"belong\" to your app.\nAdd new Typescript, HTML and CSS files inside the <code>src/</code> directory, most of them inside <code>src/app</code>,\nunless told to do otherwise.</p>\n<p>The following are all in <code>src/</code></p>\n<style>\n td, th {vertical-align: top}\n</style>\n<table width=\"100%\">\n <colgroup><col width=\"20%\">\n \n <col width=\"80%\">\n \n </colgroup><tbody><tr>\n <th>\n File\n </th>\n <th>\n Purpose\n </th>\n </tr>\n <tr>\n <td>\n <code>app/app.component.ts</code>\n </td>\n <td>\n<p> Defines the same <code>AppComponent</code> as the one in the QuickStart playground.\nIt is the <strong>root</strong> component of what will become a tree of nested components\nas the application evolves.</p>\n </td>\n </tr>\n <tr>\n <td>\n <code>app/app.module.ts</code>\n </td>\n <td>\n<p> Defines <code>AppModule</code>, the <a href=\"guide/bootstrapping\" title=\"AppModule: the root module\">root module</a> that tells Angular how to assemble the application.\nWhen initially created, it declares only the <code>AppComponent</code>.\nOver time, you add more components to declare.</p>\n </td>\n </tr>\n <tr>\n <td>\n <code>main.ts</code>\n </td>\n <td>\n<p> Compiles the application with the <a href=\"guide/glossary#jit\">JIT compiler</a> and\n<a href=\"guide/bootstrapping\">bootstraps</a>\nthe application's main module (<code>AppModule</code>) to run in the browser.\nThe JIT compiler is a reasonable choice during the development of most projects and\nit's the only viable choice for a sample running in a <em>live-coding</em> environment such as Stackblitz.\nAlternative <a href=\"guide/aot-compiler\">compilation</a>, <a href=\"guide/build\">build</a>, and <a href=\"guide/deployment\">deployment</a> options are available.</p>\n </td>\n </tr>\n</tbody></table>\n<h2 id=\"appendix-develop-locally-with-ie\">Appendix: Develop locally with IE<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade-setup#appendix-develop-locally-with-ie\"><i class=\"material-icons\">link</i></a></h2>\n<p>If you develop Angular locally with <code>ng serve</code>, a <code>websocket</code> connection is set up automatically between browser and local dev server, so when your code changes, the browser can automatically refresh.</p>\n<p>In Windows, by default, one application can only have 6 websocket connections, <a href=\"https://msdn.microsoft.com/library/ee330736%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396#websocket_maxconn\" title=\"MSDN WebSocket settings\">MSDN WebSocket Settings</a>.\nSo when IE is refreshed (manually or automatically by <code>ng serve</code>), sometimes the websocket does not close properly. When websocket connections exceed the limitations, a <code>SecurityError</code> will be thrown. This error will not affect the Angular application, you can just restart IE to clear this error, or modify the windows registry to update the limitations.</p>\n<h2 id=\"appendix-test-using-fakeasyncwaitforasync\">Appendix: Test using <code><a href=\"api/core/testing/fakeAsync\" class=\"code-anchor\">fakeAsync</a>()/<a href=\"api/core/testing/waitForAsync\" class=\"code-anchor\">waitForAsync</a>()</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/upgrade-setup#appendix-test-using-fakeasyncwaitforasync\"><i class=\"material-icons\">link</i></a></h2>\n<p>If you use the <code><a href=\"api/core/testing/fakeAsync\" class=\"code-anchor\">fakeAsync</a>()/<a href=\"api/core/testing/waitForAsync\" class=\"code-anchor\">waitForAsync</a>()</code> helper function to run unit tests (for details, read the <a href=\"guide/testing-components-scenarios#fake-async\">Testing guide</a>), you need to import <code>zone.js/testing</code> in your test setup file.</p>\n<div class=\"alert is-important\">\nIf you create project with `Angular/CLI`, it is already imported in `src/test.ts`.\n</div>\n<p>And in the earlier versions of <code>Angular</code>, the following files were imported or added in your html file:</p>\n<code-example>\nimport 'zone.js/plugins/long-stack-trace-zone';\nimport 'zone.js/plugins/proxy';\nimport 'zone.js/plugins/sync-test';\nimport 'zone.js/plugins/jasmine-patch';\nimport 'zone.js/plugins/async-test';\nimport 'zone.js/plugins/fake-async-test';\n</code-example>\n<p>You can still load those files separately, but the order is important, you must import <code>proxy</code> before <code>sync-test</code>, <code>async-test</code>, <code>fake-async-test</code> and <code>jasmine-patch</code>. And you also need to import <code>sync-test</code> before <code>jasmine-patch</code>, so it is recommended to just import <code>zone-testing</code> instead of loading those separated files.</p>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/upgrade\n - guide/upgrade-performance\n-->\n<!-- links from this doc:\n - api/core/Component\n - api/core/NgModule\n - api/core/testing/fakeAsync\n - api/core/testing/waitForAsync\n - api/platform-browser-dynamic/platformBrowserDynamic\n - api/platform-browser/BrowserModule\n - cli\n - guide/aot-compiler\n - guide/bootstrapping\n - guide/build\n - guide/deployment\n - guide/file-structure\n - guide/glossary#jit\n - guide/setup-local\n - guide/setup-local#prerequisites\n - guide/testing-components-scenarios#fake-async\n - guide/upgrade\n - guide/upgrade-performance\n - guide/upgrade-setup#appendix-develop-locally-with-ie\n - guide/upgrade-setup#appendix-test-using-fakeasyncwaitforasync\n - guide/upgrade-setup#clone\n - guide/upgrade-setup#delete-non-essential-files-optional\n - guide/upgrade-setup#download\n - guide/upgrade-setup#osx-bash\n - guide/upgrade-setup#setup-for-upgrading-from-angularjs\n - guide/upgrade-setup#whats-in-the-quickstart-seed\n - guide/upgrade-setup#windows\n - https://github.com/angular/angular/edit/master/aio/content/guide/upgrade-setup.md?message=docs%3A%20describe%20your%20change...\n - https://github.com/angular/quickstart\n - https://github.com/angular/quickstart/archive/master.zip\n - https://msdn.microsoft.com/library/ee330736%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396#websocket_maxconn\n-->"
|
|
} |