Angular 2.0/4.0 Configuration in Visual Studio
Angular 2.0/4.0 Setup in Visual
Studio
Step 1: Install node.js & TypeScript
For
checking node.js is installed in command prompt use “node -v” or “node --version”(space
before -)
For
checking TypeScript is installed in command prompt use “tsc -v”
Step 2: Open
latest version of Visual Studio
Select File->project
Step 3: Under
Templates select web option as seen below image. Change project name as you
required & press OK button
Step 4: Select MVC project& select OK
Step 5:
Download Sample From angular.io
1. Open VS NewProject ->select
MVC template.
Now add below files to root
Systemjs.config.js
Tsconfig.json
Packages.json
Step 6: Project -> Rt click -> new folder {app}
In app folder add
Main.ts
App.module.ts
App.component.ts
Step 7: Now in index.html page copy the scripts & paste in
layout.cshtml
<script
src="node_modules/core-js/client/shim.min.js"></script>
<script
src="node_modules/zone.js/dist/zone.js"></script>
<script
src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){
console.error(err); });
</script>
Note:
<script>
System.import('main.js').catch(function(err){
console.error(err); });
</script>
Change the above line as shown below
<script>
System.import('app').catch(function(err){ console.error(err);
});
</script>
Step 8: In index.cshtml delete every thing and write
<my-app>Hi….</my-app>
Step 9: So now in main
.ts
import
{ AppModule } from './app/app.module';
change
to
import
{ AppModule } from './app.module';
Step 10: In
systemjs.congif.js
Add
this line
main:
'./main.js',
ex:
packages:
{
app:
{
main:
'./main.js',
defaultExtension:
'js',
Step 10: and comment
loader line like below .
//loader:
'systemjs-angular-loader.js'
So
now rt click on project open folder in file explorer. Open cmd and run npm
install
After completing build the project and run
Comments
Post a Comment