Используйте angular2 с визуальной студией

Кто-нибудь получил Angular2 (бета) для работы в Visual Studio?

Я использую Visual Studio 2015 с обновлением 1, и у меня есть проект HTMLTypeScript.

Если я установил "модульную систему" ​​в "Систему", я получаю ошибки сборки (такие как: Не удается найти модуль "angular/core" ), но он скомпилирует файлы ts при сохранении (а не в сборке). Если у меня уже запущено приложение, я могу обновить страницу, и она работает.

Если я установил "модульную систему" ​​в "CommonJS", она будет правильно построена, но я получаю ошибки времени выполнения, такие как "require" is undefined "и" Невозможно получить свойство "split" из undefined или null справочник".

Я думаю, что я должен использовать систему, потому что это то, что работает при использовании tsconfig.json и lite-сервера (с запуском npm), который используется в учебниках.

Ответы

Ответ 1

У меня есть angular2, работающий с Visual Studio 2015. Мне нужно было установить .NET 5 RC1 для поддержки tsconfig.json. У них совершенно новая структура проекта, которая мне очень нравится. Вот моя настройка:

Обозреватель решений

Вы заметите, что я поместил папку своего приложения и файлы ts внутри моего wwwroot - это только мое предпочтение, и оно следует за быстрым стартом angular2. Я скопировал связанные файлы из моих модулей node в папку моих скриптов внутри моего wwwroot.

Я создал package.json на основе быстрого запуска angular2 beta:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  }
}

Затем я щелкнул правой кнопкой мыши по package.json и выбрал "Restore Packages", и он запустил установку NPM для создания папки node_modules со всеми пакетами, которые вы видите. Затем я устанавливаю свой tsconfig.json так и помещаю его в корень:

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

Это ключ к тому, чтобы заставить его работать. Мне действительно пришлось перезагрузить решение для него, чтобы увидеть tsconfig.json и начать использовать его. В дополнение к этому я зашел в "Инструменты" > "Параметры" и задал параметры typescript следующим образом: TypeScript Параметры

Далее я добавил файл index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Sample Angular 2 App</title>
</head>
<body>
    <my-app>Loading...</my-app>

    <script src="scripts/angular2-polyfills.js"></script>
    <script src="scripts/system.src.js"></script>
    <script src="scripts/Rx.js"></script>
    <script src="scripts/angular2.dev.js"></script>
    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });

        System.import('app/boot').then(null, console.error.bind(console));
    </script>
</body>
</html>

Порядок ваших script включает в себя! Вот мой файл MyApp.ts:

import { Component } from "angular2/core";

@Component({
    selector: "my-app",
    template: `
        <div>Hello from Angular 2</div>
    `
})
export class MyApp {
    public constructor() {
    }
}

и мой файл boot.ts:

import { bootstrap } from "angular2/platform/browser";
import { MyApp } from "./MyApp";

bootstrap(MyApp);

В этот момент я почувствовал, что готов запустить его, поэтому я запустил его и перешел к моему /index.html - но все, что я увидел, было "Hello World!". Казалось, что я игнорировал свой путь для обслуживания index.html и статически выписывал текст. Глядя на Startup.cs, я нашел проблему.:

namespace Angular2Demo
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app)
        {
            app.UseIISPlatformHandler();

            // Add this!
            app.UseStaticFiles();

            // Remove this!
            //app.Run(async (context) =>
            //{
            //    await context.Response.WriteAsync("Hello World!");
            //});
        }

        // Entry point for the application.
        public static void Main(string[] args) => WebApplication.Run<Startup>(args);
    }
}

Прокомментировав app.Run и добавив app.UseStaticFiles(); (требующий установки дополнительного пакета), я был готов повторить попытку:

Eureka!

Успех!