5 lines
15 KiB
JSON
5 lines
15 KiB
JSON
{
|
||
"id": "guide/visual-studio-2015",
|
||
"title": "Using Angular with Visual Studio 2015",
|
||
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/visual-studio-2015.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=\"using-angular-with-visual-studio-2015\">Using Angular with Visual Studio 2015<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/visual-studio-2015#using-angular-with-visual-studio-2015\"><i class=\"material-icons\">link</i></a></h1>\n<a id=\"top\"></a>\n<p>Some developers prefer Visual Studio as their Integrated Development Environment (IDE).</p>\n<p>This cookbook describes the steps required to set up and use Angular app files in Visual Studio 2015 within an ASP.NET 4.x project.</p>\n<div class=\"alert is-helpful\">\n<p>There is no <em>live example</em> for this cookbook because it describes Visual Studio, not\nthe Angular application itself. It uses the starter Angular application created by the CLI command <a href=\"cli/new\"><code>ng new</code></a> as an example.</p>\n</div>\n<a id=\"asp-net-4\"></a>\n<h2 id=\"aspnet-4x-project\">ASP.NET 4.x Project<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/visual-studio-2015#aspnet-4x-project\"><i class=\"material-icons\">link</i></a></h2>\n<p>To set up the Getting Started files with an <strong>ASP.NET 4.x project</strong> in\nVisual Studio 2015, follow these steps:</p>\n<div class=\"alert is-helpful\">\n<p>If you prefer a <code>File | New Project</code> experience and are using <strong>ASP.NET Core</strong>,\nthen consider the <em>experimental</em>\n<a href=\"https://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/\">ASP.NET Core + Angular template for Visual Studio 2015</a>.\nNote that the resulting code does not map to the docs. Adjust accordingly.</p>\n</div>\n<h2 id=\"prereq1\">\n Prerequisite: Node.js\n<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/visual-studio-2015#prereq1\"><i class=\"material-icons\">link</i></a></h2>\n<p>Install <strong><a href=\"https://nodejs.org/en/download/\">Node.js® and npm</a></strong>\nif they are not already on your machine.\nSee <a href=\"guide/setup-local\" title=\"Setting up for Local Development\">Local Environment Setup</a> for supported versions and instructions.</p>\n<h2 id=\"prereq2\">\n Prerequisite: Visual Studio 2015 Update 3\n<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/visual-studio-2015#prereq2\"><i class=\"material-icons\">link</i></a></h2>\n<p>The minimum requirement for developing Angular applications with Visual Studio is Update 3.\nEarlier versions do not follow the best practices for developing applications with TypeScript.\nTo view your version of Visual Studio 2015, go to <code>Help | About Visual Studio</code>.</p>\n<p>If you don't have it, install <strong><a href=\"https://www.visualstudio.com/en-us/news/releasenotes/vs2015-update3-vs\">Visual Studio 2015 Update 3</a></strong>.\nOr use <code>Tools | Extensions and Updates</code> to update to Update 3 directly from Visual Studio 2015.</p>\n<h2 id=\"prereq3\">\n Prerequisite: Configure External Web tools\n<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/visual-studio-2015#prereq3\"><i class=\"material-icons\">link</i></a></h2>\n<p>Configure Visual Studio to use the global external web tools instead of the tools that ship with Visual Studio:</p>\n<ul>\n<li>Open the <strong>Options</strong> dialog with <code>Tools</code> | <code>Options</code>.</li>\n<li>In the tree on the left, select <code>Projects and Solutions</code> | <code>External Web Tools</code>.</li>\n<li>On the right, move the <code>$(PATH)</code> entry above the <code>$(DevEnvDir</code>) entries. This tells Visual Studio to\nuse the external tools (such as npm) found in the global path before using its own version of the external tools.</li>\n<li>Click OK to close the dialog.</li>\n<li>Restart Visual Studio for this change to take effect.</li>\n</ul>\n<p>Visual Studio now looks first for external tools in the current workspace and\nif it doesn't find them, it looks in the global path. If Visual Studio doesn't\nfind them in either location, it will use its own versions of the tools.</p>\n<h2 id=\"prereq4\">\n Prerequisite: Install TypeScript for Visual Studio 2015\n<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/visual-studio-2015#prereq4\"><i class=\"material-icons\">link</i></a></h2>\n<p>While Visual Studio Update 3 ships with TypeScript support out of the box, it currently doesn’t ship with more recent versions of TypeScript, which you need to develop Angular applications.</p>\n<p>To install the latest version of TypeScript:</p>\n<ul>\n<li>\n<p>Download and install the latest <a href=\"https://www.microsoft.com/en-us/download/details.aspx?id=48593\">TypeScript for Visual Studio 2015</a>,</p>\n</li>\n<li>\n<p>OR install it with npm: <code>npm install -g typescript@latest</code>.</p>\n</li>\n</ul>\n<p>You can find out more about TypeScript support in Visual Studio <strong><a href=\"https://blogs.msdn.microsoft.com/typescript/announcing-typescript-3-1/\">here</a></strong>.</p>\n<p>At this point, Visual Studio is ready. It’s a good idea to close Visual Studio and\nrestart it to make sure everything is clean.</p>\n<h2 id=\"download\">\n Step 1: Create a starter Angular app\n<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/visual-studio-2015#download\"><i class=\"material-icons\">link</i></a></h2>\n<p> Follow the instructions in <a href=\"guide/setup-local\" title=\"Setting up for Local Development\">Local Environment Setup</a> to create a starter Angular app using the CLI command <a href=\"cli/new\"><code>ng new</code></a>.</p>\n<h2 id=\"create-project\">\n Step 2: Create the Visual Studio ASP.NET project\n<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/visual-studio-2015#create-project\"><i class=\"material-icons\">link</i></a></h2>\n<p>Create the ASP.NET 4.x project in the usual way as follows:</p>\n<ul>\n<li>In Visual Studio, select <code>File</code> | <code>New</code> | <code>Project</code> from the menu.</li>\n<li>In the template tree, select <code>Templates</code> | <code>Visual C#</code> (or <code>Visual Basic</code>) | <code>Web</code>.</li>\n<li>Select the <code>ASP.NET Web Application</code> template, give the project a name, and click OK.</li>\n<li>Select the desired ASP.NET 4.5.2 template and click OK.</li>\n</ul>\n<div class=\"alert is-helpful\">\n<p>This cookbook uses the <code>Empty</code> template with no added folders,\nno authentication, and no hosting. Pick the template and options appropriate for your project.</p>\n</div>\n<h2 id=\"copy\">\n Step 3: Copy the Angular project files into the ASP.NET project folder\n<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/visual-studio-2015#copy\"><i class=\"material-icons\">link</i></a></h2>\n<p>Copy files from the starter Angular app into the folder containing the <code>.csproj</code> file.\nInclude the files in the Visual Studio project as follows:</p>\n<ul>\n<li>\n<p>Click the <code>Show All Files</code> button in Solution Explorer to reveal all of the hidden files in the project.</p>\n</li>\n<li>\n<p>Right-click on each folder/file to be included in the project and select <code>Include in Project</code>.\nMinimally, include the following folder/files:</p>\n<ul>\n<li>src/app folder (answer <em>No</em> if asked to search for TypeScript Typings)</li>\n<li>src/styles.css</li>\n<li>src/index.html</li>\n<li>package.json</li>\n<li>src/tsconfig.json</li>\n</ul>\n</li>\n</ul>\n<h2 id=\"restore\">\n Step 4: Restore the required packages\n<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/visual-studio-2015#restore\"><i class=\"material-icons\">link</i></a></h2>\n<p>Restore the packages required for an Angular application as follows:</p>\n<ul>\n<li>Right-click on the <code>package.json</code> file in Solution Explorer and select <code>Restore Packages</code>.\n<br>This uses <code>npm</code> to install all of the packages defined in the <code>package.json</code> file.\nIt may take some time.</li>\n<li>If desired, open the Output window (<code>View</code> | <code><a href=\"api/core/Output\" class=\"code-anchor\">Output</a></code>) to watch the npm commands execute.</li>\n<li>Ignore the warnings.</li>\n<li>When the restore is finished, a message in the bottom message bar of Visual Studio\nshould say: <code>Installing packages complete</code>. Be patient. This could take a while.</li>\n<li>Click the <code>Refresh</code> icon in Solution Explorer.</li>\n<li><strong>Do not</strong> include the <code>node_modules</code> folder in the project. Let it be a hidden project folder.</li>\n</ul>\n<h2 id=\"build-and-run\">\n Step 5: Build and run the app\n<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/visual-studio-2015#build-and-run\"><i class=\"material-icons\">link</i></a></h2>\n<p>First, ensure that <code>src/index.html</code> is set as the start page.\nRight-click <code>index.html</code> in Solution Explorer and select option <code>Set As Start Page</code>.</p>\n<h3 id=\"to-run-in-vs-with-f5\">To run in VS with F5<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/visual-studio-2015#to-run-in-vs-with-f5\"><i class=\"material-icons\">link</i></a></h3>\n<p>Most Visual Studio developers like to press the F5 key and see the IIS server come up.\nTo use the IIS server with the Getting Started app, you must make the following three changes.</p>\n<ol>\n<li>In <code>index.html</code>, change base href from <code><base href=\"/\"></code> to <code><base href=\"/src/\"></code>.</li>\n<li>Also in <code>index.html</code>, change the scripts to use <code>/node_modules</code> with a slash\ninstead of <code>node_modules</code> without the slash.</li>\n<li>In <code>src/systemjs.config.js</code>, near the top of the file,\nchange the npm <code>path</code> to <code>/node_modules/</code> with a slash.</li>\n</ol>\n<div class=\"alert is-important\">\n<p>After these changes, <code>npm start</code> no longer works.\nYou must choose to configure <em>either</em> for F5 with IIS <em>or</em> for <code>npm start</code> with the lite-server.</p>\n</div>\n<h3 id=\"for-apps-that-use-routing\">For apps that use routing<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/visual-studio-2015#for-apps-that-use-routing\"><i class=\"material-icons\">link</i></a></h3>\n<p>If your app uses routing, you need to teach the server to always return\n<code>index.html</code> when the user asks for an HTML page\nfor reasons explained in the <a href=\"guide/deployment#fallback\">Deployment</a> guide.</p>\n<p>Everything seems fine while you move about <em>within</em> the app.\nBut you'll see the problem right away if you refresh the browser\nor paste a link to an app page (called a \"deep link\") into the browser address bar.</p>\n<p>You'll most likely get a <em>404 - Page Not Found</em> response from the server\nfor any address other than <code>/</code> or <code>/index.html</code>.</p>\n<p>You have to configure the server to return <code>index.html</code> for requests to these \"unknown\" pages.\nThe <code>lite-server</code> development server does out-of-the-box.\nIf you've switched over to F5 and IIS, you have to configure IIS to do it.\nThis section walks through the steps to adapt the Getting Started application.</p>\n<h4 id=\"configure-iis-rewrite-rules\">Configure IIS rewrite rules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/visual-studio-2015#configure-iis-rewrite-rules\"><i class=\"material-icons\">link</i></a></h4>\n<p>Visual Studio ships with IIS Express, which has the rewrite module baked in.\nHowever, if you're using regular IIS you'll have to install the rewrite\nmodule.</p>\n<p>Tell Visual Studio how to handle requests for route app pages by adding these\nrewrite rules near the bottom of the <code>web.config</code>:</p>\n<code-example format=\".\">\n <system.webServer>\n <rewrite>\n <rules>\n <rule name=\"Angular <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a>\" stopProcessing=\"true\">\n <match url=\".*\" />\n <conditions logicalGrouping=\"MatchAll\">\n <add input=\"{REQUEST_FILENAME}\" matchType=\"IsFile\" negate=\"true\" />\n <add input=\"{REQUEST_FILENAME}\" matchType=\"IsDirectory\" negate=\"true\" />\n </conditions>\n <action type=\"Rewrite\" url=\"/src/\" />\n </rule>\n </rules>\n </rewrite>\n </system.webServer>\n\n</code-example>\n<div class=\"alert is-helpful\">\n<p>The match url, <code><match url=\".*\" /></code>, will rewrite every request. You'll have to adjust this if\nyou want some requests to get through, such as web API requests.</p>\n<p>The URL in <code><action type=\"Rewrite\" url=\"/src/\"/></code> should\nmatch the base href in <code>index.html</code>.</p>\n</div>\n<p>Build and launch the app with debugger by clicking the <strong>Run</strong> button or by pressing <code>F5</code>.</p>\n<div class=\"alert is-helpful\">\n<p>It's faster to run without the debugger by pressing <code>Ctrl-F5</code>.</p>\n</div>\n<p>The default browser opens and displays the Getting Started sample application.</p>\n<p>Try editing any of the project files. Save and refresh the browser to\nsee the changes.</p>\n\n \n</div>\n\n<!-- links to this doc:\n-->\n<!-- links from this doc:\n - api/core/Output\n - api/router/Routes\n - cli/new\n - guide/deployment#fallback\n - guide/setup-local\n - guide/visual-studio-2015#aspnet-4x-project\n - guide/visual-studio-2015#build-and-run\n - guide/visual-studio-2015#configure-iis-rewrite-rules\n - guide/visual-studio-2015#copy\n - guide/visual-studio-2015#create-project\n - guide/visual-studio-2015#download\n - guide/visual-studio-2015#for-apps-that-use-routing\n - guide/visual-studio-2015#prereq1\n - guide/visual-studio-2015#prereq2\n - guide/visual-studio-2015#prereq3\n - guide/visual-studio-2015#prereq4\n - guide/visual-studio-2015#restore\n - guide/visual-studio-2015#to-run-in-vs-with-f5\n - guide/visual-studio-2015#using-angular-with-visual-studio-2015\n - https://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/\n - https://blogs.msdn.microsoft.com/typescript/announcing-typescript-3-1/\n - https://github.com/angular/angular/edit/master/aio/content/guide/visual-studio-2015.md?message=docs%3A%20describe%20your%20change...\n - https://nodejs.org/en/download/\n - https://www.microsoft.com/en-us/download/details.aspx?id=48593\n - https://www.visualstudio.com/en-us/news/releasenotes/vs2015-update3-vs\n-->"
|
||
} |