asp.net-core
Angular2 и .Net Core

Быстрый урок для Angular 2 Hello World! Приложение с .Net Core в Visual Studio 2015

шаги:

1. Создать пустое сетевое приложение .Net Core:

2. Перейдите в wwwroot и создайте обычную html-страницу под названием Index.html:

3. Настройте Startup.cs, чтобы принимать статические файлы (для этого потребуется добавить в файл «project.json» библиотеку «Microsoft.AspNetCore.StaticFiles»: «1.0.0»):

4. Добавить файл NPN:

   • Щелкните правой кнопкой мыши проект WebUi и добавьте файл конфигурации NPN (package.json):

   • Проверьте последние версии пакетов:

     Примечание. Если визуальная студия не обнаруживает версии пакетов (проверьте все пакеты, потому что некоторые из них показывают версию, а некоторые другие нет), возможно, это связано с тем, что версия узла, входящая в визуальную студию, работает некорректно , поэтому, вероятно, потребуется установить узел js извне, а затем связать эту установку с визуальной студией.

     я. Загрузите и установите узел js: https://nodejs.org/es/download/

     II. Свяжите установку с визуальной студией: https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/ : III. (Необязательно) после сохранения package.json он будет устанавливать зависимости в проекте, если нет, запустите «npm install» с помощью командной строки из того же места, что и файл package.json.

     Примечание. Рекомендуется установить «Open Command Line», расширение, которое можно добавить в Visual Studio:

5. Добавить машинопись:

   • Создайте папку TsScript внутри проекта WebUi, только для организации (TypeScripts не перейдут в браузер, они будут переведены в обычный JS-файл, и этот JS-файл будет тот, который будет отправлен на wwwroot foder с помощью gulp, this будет объяснено позже):

   • Внутри этой папки добавьте «Конфигурационный файл JScript типа» (tsconfig.json): И добавьте следующий код:

     

   • В корне проекта WebUi добавьте новый файл с именем typings.json: И добавьте следующий код:

   • В корневом веб-проекте откройте командную строку и выполните команду «typings install», это создаст папку с типизацией (для этого требуется «Open Command Line», объясненная как необязательный шаг в примечании внутри шага 4, номер iii).

6. Добавьте gulp для перемещения файлов:

   • Добавьте «Файл конфигурации Gulp» (gulpfile.js) в корень веб-проекта:
   • Добавить код:

7. Добавьте файлы автозагрузки Angular 2 внутри папки «tsScripts»:

   app.component.ts

   app.module.ts

   main.ts

8. Внутри wwwroot создайте следующую структуру файла:

9. Внутри папки сценариев (но за пределами приложения) добавьте systemjs.config.js: И добавьте следующий код:

10. Выполнение задачи Gulp для генерации скриптов в wwwroot.

    • Щелкните правой кнопкой мыши gulpfile.js
    • Задача Runner Проводник я. Если задачи не загружены («Невозможно загрузить. Смотрите окно вывода»). Перейдите в окно вывода и посмотрите на ошибки, большую часть времени - синтаксические ошибки в файле gulp.
    • Щелкните правой кнопкой мыши задачу «по умолчанию» и «Запустить» (это займет некоторое время, а сообщения подтверждения не очень точны, он показывает, что он завершен, но процесс все еще запущен, помните об этом):

11. Измените Index.html как:

12. Теперь бегите и наслаждайтесь.

    Заметки:

    • В случае ошибок компиляции с машинописным текстом, например «Виртуальный проект TypeScript», это индикатор того, что версия TypeScript для Visual Studio не обновляется в соответствии с версией, выбранной в «package.json», если это произойдет, пожалуйста, установите : https://www.microsoft.com/en-us/download/details.aspx?id=48593

Рекомендации:

• Курс Дебора Кураты «Угловой 2: Начало работы» в Pluralsight:

  https://www.pluralsight.com/courses/angular-2-getting-started-update

• Угловая 2 Официальная документация:

  https://angular.io/

• Статьи Митхун Паттанкар:

  http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/

  http://www.mithunvp.com/using-angular-2-asp-net-mvc-5-visual-studio/

Ожидаемые ошибки при создании компонентов Angular 2 в проекте .NET Core (версия 0.8.3)

При создании новых компонентов Angular 2 в проекте .NET Core вы можете столкнуться с следующими ошибками (начиная с версии 0.8.3):

Error locating module for declaration
        SilentError: No module files found

ИЛИ ЖЕ

No app module found. Please add your new Class to your component. 
        Identical ClientApp/app/app.module.ts

[РЕШЕНИЕ]

1. Переименуйте app.module.client.ts в app.client.module.ts

2. Откройте app.client.module.ts: добавьте объявление с 3 точками «...» и заверните объявление в скобки.

   Например: [...sharedConfig.declarations, <MyComponent>]

3. Откройте boot-client.ts: обновите свой импорт, чтобы использовать новую ссылку app.client.module.

   Например: import { AppModule } from './app/app.client.module';

4. Теперь попробуйте создать новый компонент: ng g component my-component

[ОБЪЯСНЕНИЕ]

Угловая CLI ищет файл с именем app.module.ts в вашем проекте и пытается найти ссылки для свойства declarations для импорта компонента. Это должен быть массив (как sharedConfig.declarations), но изменения не применяются

[ИСХОДНЫЕ]

• https://github.com/angular/angular-cli/issues/2962
• https://www.udemy.com/aspnet-core-angular/learn/v4/t/lecture/6848548 (раздел 3.33 докладчик Брайан Гарсон)