Ответ 1

У меня были некоторые проблемы и в начале, но их в основном легко исправить.

эквивалент TsConfig

Во-первых, настройка проекта:

<TypeScriptToolsVersion>1.7.6</TypeScriptToolsVersion>
<TypeScriptModuleKind>system</TypeScriptModuleKind>
<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
<TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata>
<TypeScriptAdditionalFlags> $(TypeScriptAdditionalFlags) --experimentalDecorators </TypeScriptAdditionalFlags>
<TypeScriptAdditionalFlags> $(TypeScriptAdditionalFlags) --emitDecoratorMetadata </TypeScriptAdditionalFlags>

Системный модуль прав, но убедитесь, что он правильно включен в ваш html файл. Вы также можете выбрать его в окне параметров проекта.

В зависимости от вашей версии VS вам необходимо указать флаги в дополнительных флагах (более старые версии) или в выделенных тегах. Вам по-прежнему необходимо проверить исходные коды и целевую версию es в ваших вариантах проекта (например, es5 - EcmaScript 5 в версии EcmaScript).

Не забудьте установить последнюю версию TypeScript, иначе RxJs не будет работать.

Angular2 файлы

При загрузке angular2 через npm имеет смысл, я бы не включил node_modules непосредственно в вашу папку TypeScript. Включение всей папки означает использование любого другого модуля node, например, gulp. Вместо этого вы можете просто скопировать всю папку angular2 в каталог TypeScript в папке "Содержимое" (вы можете сделать это автоматически с помощью gulp или простого файла bat, если хотите).

О ошибках TypeScript, проблема в том, что Visual Studio попытается проанализировать все файлы в папках angular2, а некоторые из этих файлов дублируются. Вам нужно удалить источники и сохранить только скомпилированные js файлы и определения типов. Это означает:

• remove/es6 (это файлы, используемые для разработки в es6 вместо typescript)
• remove/ts (исходные файлы)
• удалить пучки/пиктограммы (дополнительные файлы дефиниции для es6-shim и жасмина)

Вам нужна папка rxjs на том же уровне папки, что и angular2, иначе включенные не будут работать, например:

Content  
    typings  
        angular2  
        rxjs  
        mymodule
           whatever.ts
        boot.ts

В ваших html файлах вы можете связать файлы js в папках сложения как angular2, так и rxjs.

<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="/content/typings/angular2/bundles/angular2-polyfills.js"></script>
<script src="/content/typings/rxjs/bundles/Rx.min.js"></script>
<script src="/content/typings/angular2/bundles/angular2.dev.js"></script>
<script src="/content/typings/angular2/bundles/router.dev.js"></script>

Затем ваш импорт будет выглядеть следующим образом:

import { Component } from 'angular2/core';

Конфигурация системы

Чтобы заставить импорт работать, вам необходимо настроить систему. Конфигурация довольно проста:

        System.paths = {
            'boot': '/content/typings/boot.js',
            'mymodule/*': '/content/typings/myModule/*.js'
        };
        System.config({
            meta: {
                'traceur': {
                    format: 'global'
                },
                'rx': {
                    format: 'cjs'
                }
            }
        });
        System.import('boot');

Включите этот код после тегов script для angular и всех других librairies.

Так как angular2 включен глобально (с помощью тегов script), вам не нужно добавлять его в конфигурацию системы. Затем в ваших файлах вы можете импортировать свои модули следующим образом:

import { MyThing } from "mymodule/whatever";

Ответ 2

Если вы запускаете и запускаете с установкой npm для установки ваших зависимостей в node_modules, здесь, как использовать их там на месте без необходимости переместить их в каталог /lib или/scripts или изменить способ написания ваши файлы typescript по пути, указанному в Quickstart:

Свойства проекта → typescript Сборка

В "Модульной системе" выберите "Система":

Установить typescript параметры компилятора

Если вы используете ASP.NET Core, задайте параметры в tsconfig.json:

{  
    "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
 },
 "exclude": [
    "node_modules"
 ]
}

Если вы используете ASP.NET(Non-Core), задайте параметры компилятора в файле csproj. (Документы для настройки параметров компилятора: https://github.com/Microsoft/TypeScript/wiki/Setting-Compiler-Options-in-MSBuild-projects). В текстовом редакторе найдите PropertyGroup с другими параметрами typescript и добавьте:

<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
<TypeScriptModuleResolution>node</TypeScriptModuleResolution>

Загрузите исходные файлы в правильном порядке

В вашем index.html настройте свои сценарии в этом конкретном порядке, чтобы убедиться, что модули загружены из папки node_modules (вам нужно загрузить пакеты rxjs и angular2 после выполнения System.config, иначе системный загрузчик будет загрузите исходные файлы angular/rxjs снова, так как он не зарегистрировал их с правильным путем)

<!-- load system libraries -->
<script src="~/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="~/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="~/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="~/node_modules/systemjs/dist/system.js"></script>

<!-- configure system loader first -->
<script>
    System.config({
        defaultJSExtensions: true,
        paths: {
            'angular2/*': 'node_modules/angular2/*',
            'rxjs/*': 'node_modules/rxjs/*'
        }
    });
</script>

<!-- load app bundles *after* configuring system so they are registered properly -->
<script src="~/node_modules/rxjs/bundles/Rx.js"></script>
<script src="~/node_modules/angular2/bundles/angular2.js"></script>

<!-- boot up the main app -->
<script>
    System.import("app/main").then(null, console.error.bind(console));
</script>

Приложение typescript может использовать стандартный синтаксис импорта, здесь app/main.ts:

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

Обратите внимание, что для angular2 "import" необязательно иметь "../node_modules/", поскольку разрешение модуля компилятора typescript использует режим "node". (docs на node логике разрешения модуля: https://github.com/Microsoft/TypeScript/issues/2338) Надеюсь, что это сработает для вас!

Ответ 3

Я вообще доволен новыми вещами с asp.net 5 vnext и Angular 2. Но оснастка Angular 2 в Visual Studio была проблемой. Я последовал за angular.io quickstart guide религиозно и не повезло получить приложение Hello Angular 2, пока я не использовал следующий код:

<script src="~/lib/anguar2/angular2-polyfills.js"></script>
<script src="~/lib/es6-shim/es6-shim.js"></script>
<script src="~/lib/systemjs/system.js"></script>
<script>

    System.config({
        defaultJSExtensions: true
      
    });

</script>
<script src="~/lib/rxjs/rx.js"></script>
<script src="~/lib/anguar2/angular2.min.js"></script>
<script>
    System.import('js/boot');
</script>

Ответ 4

У меня точно такие же проблемы (рабочий проект alpha 48, те же ошибки с бета-версией 0 и т.д.). Мои рабочие файлы (проект MVC):

App/boot.ts

/// <reference path="../node_modules/angular2/manual_typings/globals-es6.d.ts" />
/// <reference path="../node_modules/angular2/typings/es6-shim/es6-shim.d.ts" />
import {bootstrap}    from '../node_modules/angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

App/app.component.ts

import {Component} from '../node_modules/angular2/core'
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent {}

Views/Shared/_Layout.cshtml

<head>
...
<script src="~/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="~/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="~/node_modules/systemjs/dist/system.src.js"></script>
<script>
 System.config({
   defaultJSExtensions: true,
   packages: {
     'app': { format: 'register', defaultExtension: 'js'}
   },
   paths: {
     'angular2/*': 'node_modules/angular2/*',
     'rxjs': 'node_modules/rxjs/bundles/Rx.js'
   }
 });
</script>
<script src="~/node_modules/rxjs/bundles/Rx.js"></script>
<script src="~/node_modules/angular2/bundles/angular2.dev.js"></script>
<base href="/">
@Scripts.Render("~/bundles/modernizr")
...
</head>

Views/Home/Index.cshtml

<my-app>Loading...</my-app>
<script>
  System.import('App/boot')
   .then(null, console.error.bind(console));
</script>

Он работал у меня после добавления "путей" в System.config.

Ответ 5

Убедитесь, что вы находитесь в Visual Studio 2015 Update 1, Typescript 1.7. * А также вы можете запустить 'Angular 2: 5 min Quickstart'.

Проблема, которую вы используете как "внешние веб-инструменты VS2015", имеет слишком старую версию

После того, как VS 2015 создало веб-приложение asp.net5, нажмите Показать весь файл, затем удалите папку package.json и node_modules и снова добавьте package.json.

Если выше не работает, см. это: http://jameschambers.com/2015/09/upgrading-npm-in-visual-studio-2015/