As of March 14, 2017
Downloaded the angular 2 quickstart project to get all of the files angular 2 files. It is located at https://github.com/angular/quickstart. See the attached zip file.
Create new project with Visual Studio 2017
In this case I used Core with .Net
Add a package.json to the root project folder. (from the quickstart project)
open a cmd prompt and type npm install (or right click from vs on the file and restore packages)
Copy the ./app folder, main.ts, systemjs.config.js, and the tsconfig.json to the wwwroot folder in the project
Modify the systemjs.config.js by adding baseURL: '/', above the paths: setting and change the 'npm:' setting.
The npm: setting tells the runtime application where to resolve its references. aspnet core will not look below the wwwroot, which is where node_modules is, so, the easy solution is to use the cdn to get the libraries.
(function (global) {
System.config({
baseURL: '/',
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/' //'node_modules/'
},
Modify the _Layout.cshtml to resolve the appropriate dependencies (add to both enviroment sections):
<!-- Polyfill(s) for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/systemjs/dist/system.src.js"></script>
<script src="~/systemjs.config.js"></script>
<script>
System.import('main.js').catch(function (err) { console.error(err); });
</script>
Add the angular component to a page, in this case Home/About.cshtml
<my-app>Loading AppComponent content here ...</my-app>