Setup for local Environment
Setting up Angular2/Angular4 is a quite complex, it needs a lot of work when compared with the installation for Angular1.X applications.
To setup with the quick start files follow these steps:
Step1: Install Node JS and npm
Step2: Install visual studio 2015 update3
Step3: Configuring External Web Tools.
Step4: Install Typescript
Step5: Download quick start files
Step6: Create ASP.NET Project
Step7: Copy the quick start files into your ASP.NET Project
Step8: Restore Packages
Step9: Build and Run
Install Node JS and npm
1. To work with Angular2/Angular4 you must have Node JS version 4.6.X or higher and npm 3.X.X or higher. Older versions produce errors.
2. Before installing make sure whether you have already installed Node JS before. For checking the Node JS and npm versions follow these commands in command prompt.
For Node JS: node –v
For npm: npm –v
3. If the PC don’t have Node JS installed it will show you like “node” is not recognized as an internal or external command, “npm” is not recognized as an internal or external command. Or if your PC has older version than the required please update to the latest versions.
4. For installing latest version of Node JS and npm go to https://nodejs.org/en/download/
5. Your first step will be completed if you have installed the required versions.
Install visual studio 2015 update3
Minimum requirement for developing Angular2/ Angular4 applications is Visual Studio Update3 because the earlier versions do not follow the best practice for developing applications with Typescript.
1. To check the version of Visual Studio 2015
Open Visual Studio 2015 -> go to Help -> click on About Microsoft Visual Studio
2. If you don’t have update3 go to the following links (or) you can directly install from visual studio go to Tools -> Extensions and Updates
Visual Studio Enterprise 2015 - Update 3
Visual Studio Professional 2015 - Update 3
Visual Studio Community 2015 - Update 3
Configuring External Web Tools
1. We need to configure Visual Studio to use the global external web tools before the tools that ship with visual studio.
2. Go to Visual Studio -> Click on Tools -> Options -> Expand Projects and Solutions -> click on External Web Tools now in the right hand side move $(PATH) entry above the $(DevEnvDir) entries. This tells the visual studio to use the external tools like (npm) found in the global path before using its own version of the external tools.
3. Now click OK and restart the Visual Studio to reflect these changes. Visual Studio now looks first for external tools in the current workspace and if it doesn't find them, it looks in the global path. If Visual Studio doesn't find them in either location, it will use its own versions of the tools.
Install Typescript
1. To develop Angular applications we need Typescript 2.2.0 or its higher versions, as Visual studio Update3 doesn’t have such specifications we need to install it externally
2. Before installation we can check our Typescript version in the Visual Studio
Open Visual Studio 2015 -> go to Help -> click on About Microsoft Visual Studio
3. To get the latest version of typescript for Visual studio 2015 go to https://www.microsoft.com/en-us/download/details.aspx?id=48593
Download quick start files
You can download the quick start files from Git hub https://github.com/angular/quickstart and then extract the files.
Create ASP.NET Project
Create ASP.NET 4.X or above project in the visual studio
Go to Visual Studio -> File -> New -> Project -> select Visual C# under Templates -> click on
ASP.NET Web Application -> select Desired Templates -> give the project name and click on OK.
Copy the quick start files into your ASP.NET Project
Copy the quick start files into your project, but all the files are not necessary to be included into your project. So copy only selected files from the extracted folder.
Copy the following files into your .csproj
- Src
- Bs-config.json
- Package.json
- Tslint.json
Restore Packages
Restore the packages required for your application
1. For restoring packages right click on package.json -> select Restore Packages. This uses npm to install all the packages defined in package.json.
2. In between you can open the Output window to watch the npm commands that are executed. Simply we can ignore the warnings.
3. After you see the message Installing Packages Complete make sure that your project doesn’t includes node_modules folder.
Build and Run
1. After Installing packages build the Application.
2. To run the application open Command Prompt -> go to your Project Directory -> execute command npm start.
3.When this command is executed,
-> firstly it will launch typescript compiler and compiles the application with the following command tsc –p src/
-> Now it will start the lite-server and launches the browser where you can see the
Output: Hello Angular
4. But if you run the index.html by pressing F5 in visual studio it will not show the same output.
4. But if you run the index.html by pressing F5 in visual studio it will not show the same output.
To Run in VS with F5 follow these steps
1. In index.html, change base href from <base href="/"> to <base href="/src/">.
2. Also in index.html, change the scripts from node_modules to /node_modules with a slash
3. In src/systemjs.config.js, near the top of the file, change the npm path to /node_modules/ with a slash.
4. After these changes npm start command no longer works, you must choose to configure either for F5 with IIS or for npm start with the lite-server.
5. Now run the application using F5
No comments:
Post a Comment