angular2 with asp.net core and systemjs installation

Question

i tried to start a project Angular2 / TypeScript / ASP.Net Core with NPM / Gulp / SystemJS

But it seems that all the tutorial out there are not uptodate or i'm missing something...

When i try -> import { Component } from '@angular/core'; Visual studio is not building anymore and saying that it cannot find the module '@angular/core'.

Here are my configs files:

NPM:

{
    "dependencies": {
        "@angular/common": "2.1.2",
        "@angular/compiler": "2.1.2",
        "@angular/core": "2.1.2",
        "@angular/forms": "2.1.2",
        "@angular/http": "2.1.2",
        "@angular/platform-browser": "2.1.2",
        "@angular/platform-browser-dynamic": "2.1.2",
        "@angular/router": "3.1.2",
        "@angular/upgrade": "2.1.2",
        "core-js": "^2.4.1",
        "moment": "^2.14.1",
        "ng2-bootstrap": "^1.0.24",
        "reflect-metadata": "^0.1.3",
        "rxjs": "5.0.0-beta.6",
        "systemjs": "^0.19.37",
        "typings": "^2.0.0",
        "zone.js": "^0.6.12"
    },
    "devDependencies": {
        "gulp": "3.9.1",
        "gulp-clean": "0.3.2",
        "gulp-concat": "2.6.1",
        "gulp-sourcemaps": "1.9.1",
        "gulp-typescript": "3.1.3",
        "gulp-uglify": "2.0.0",
        "typescript": "2.0.10"
    },
    "name": "kira",
    "private": true,
    "scripts": {
        "postinstall": "typings install dt~core-js --global"
    },
    "version": "1.0.0"
}

systemjs.config.js:

(function (global) {
    System.config({
        paths: {
            'npm:': 'node_modules/'
        },
        map: {
            app: 'wwwroot/app',
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            'rxjs': 'npm:rxjs'
        },
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

My app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})

export class AppComponent { name = 'Angular'; }

Vince · Accepted Answer · 2016-11-28 21:23:24Z

1

I finally got it to work after many hours! I needed to ask a question to find the solution few minutes after...

My problem were in my tsconfig.json

I was using 'module': 'system' that was not working (i don't really know why...)

I changed this to 'module': 'commonjs' and now everything is building !! :D

EDIT:

I found the reason why "system" was not working as module for my tsconfig.json. Because i'm using Node.js for my module packaging and node use commonjs to unpack those module, so we need to put commonjs in tsconfig so typescript can read them.

edited Nov 28, 2016 at 21:23

answered Nov 28, 2016 at 4:44

Vince

1,4362 gold badges21 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

angular2 with asp.net core and systemjs installation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related