How to install Angular2 in MVC6 Project?

Question

I'm facing problem with ASP.NET5 MVC6 project. I have been create project that's using AngularJS to create Single Page Application. Now I want to install Angular 2 instead of AngularJS 1.

So what should I do to upgrade the project from normal AngularJS to Angular 2.

Use Nuget package manager to add angularjs package, it'll add the necessary js files to your project, you still need to make sure you're loading the js files on the html pages. — AD.Net
– AD.Net, Commented Nov 8, 2015 at 19:09
I'm stuck at the same point. I have installed Angular2 using npm. Now I want the angular2 files to appear inside the wwwroot/lib folder, the same way Bower does. I think we have to add a Gulp task to copy the files from the node_modules folder to the lib folder. — Augusto Barreto
– Augusto Barreto, Commented Nov 21, 2015 at 3:26
That is exactly what you have to do: create a Gulp task to copy files from node_modules to a folder in wwwroot, such as lib. — Richard Nalezynski
– Richard Nalezynski, Commented Oct 10, 2016 at 21:23

Evan Wieland · Accepted Answer · 2017-09-18 15:30:35Z

1

To get a basic application configured you need to include angular2 and configure system.js

Here is an example from the documentation (https://angular.io/guide/quickstart):

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script>
      System.config({
        packages: {'app': {defaultExtension: 'js'}}
      });
      System.import('app/app');
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

edited Sep 18, 2017 at 15:30

Evan Wieland

1,5281 gold badge22 silver badges36 bronze badges

answered Nov 8, 2015 at 23:21

TGH

39.4k13 gold badges106 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ahmed El-Maghrabi Over a year ago

I'm using TypeScript with angular. I have been setup the project as I see inside the documentation and I have problem with call .ts file the browser console give me error said "app.ts is not found" the normal path inside project it's "wwwroot/js/app.ts".

Richard Nalezynski · Accepted Answer · 2016-06-22 00:23:44Z

0

Since the web root is wwwroot, no files or folders outside of wwwroot can be accessed. The node_modules folder is a sibling of wwwroot - both under the parent project folder.

Unfortunately, the only method is to copy the files from node_modules into wwwroot accordingly.

Be sure to update the mappings in systemjsconfig.js!

answered Jun 22, 2016 at 0:23

Richard Nalezynski

7018 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to install Angular2 in MVC6 Project?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related