به روز رسانی: ارتقاء به نگارش «2.0.0rc.0 »
برای ارتقاء به نگارش RC0، این مراحل را باید طی کنید:
1) پیش از هر کاری، پوشه‌ی node_modules قدیمی خود را حذف کنید (با تمام محتوای آن).
2) به روز رسانی فایل package.json به صورت ذیل:
{
"name": "asp-net-mvc5x-angular2x",
"version": "1.0.0",
"author": "DNT",
"description": "",
"scripts": {
"postinstall": "typings install"
},
"license": "Apache-2.0",
"dependencies": {
"@angular/common": "^2.0.0-rc.0",
"@angular/compiler": "^2.0.0-rc.0",
"@angular/core": "^2.0.0-rc.0",
"@angular/http": "2.0.0-rc.0",
"@angular/router": "2.0.0-rc.0",
"@angular/router-deprecated": "^2.0.0-rc.0",
"@angular/platform-browser": "^2.0.0-rc.0",
"@angular/platform-browser-dynamic": "^2.0.0-rc.0",
"bootstrap": "^3.3.6",
"es6-promise": "^3.1.2",
"es6-shim": "^0.35.0",
"jquery": "^2.2.3",
"reflect-metadata": "^0.1.3",
"rxjs": "^5.0.0-beta.6",
"systemjs": "^0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"typescript": "^1.8.9",
"typings": "^0.8.1"
},
"repository": { }
}
به روز شده‌ی محتوای فوق، همیشه
در آدرس مستندات npm packages موجود است.
3) افزودن فایلی به نام
typings.json در ریشه‌ی پروژه؛ با این محتوا:
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
}
}
این فایل توسط قسمت «postinstall» اسکریپت package.json نصب می‌شود. اما چون مسیر https://raw.githubusercontent.com قابل دسترسی نیست (از این طرف البته!)، موفق به دریافت آن نخواهید شد. بنابراین یک پوشه را به نام typings به ریشه‌ی سایت اضافه کنید و سپس فایل ذیل را به آن اضافه نمائید:
es6-shim.d.ts
بدون این فایل، کامپایلر TypeScript تعاریف ES 6 را مانند Map و Promise و امثال آن، نمی‌شناسد و پروژه را کامپایل نخواهد کرد.
اکنون یکبار فایل package.json را ذخیره کنید تا کار به روز رسانی بسته‌ها انجام شود. البته اگر بر روی این فایل کلیک راست کنید، در منوی ظاهر شده، گزینه‌ی restore packages هم موجود است.
4) پس از آن، چند تغییر جزئی ذیل باید در کدهای این سری، اعمال شوند:
هر جایی angular2 تعریف شده، اینبار می‌شود angular@. مثلا:
import { PipeTransform, Pipe } from '@angular/core';
فایل مسیریابی آن قرار است تغییرات کلی داشته باشد. این مورد به صورت ذیل تغییر نام یافته است:
import { RouteParams, Router } from '@angular/router-deprecated';
5) فایل
main.ts (قسمت دوم) به صورت ذیل تغییر کرده‌است:
/// <reference path="../typings/es6-shim.d.ts" />
import { bootstrap } from '@angular/platform-browser-dynamic';
// Our main component
import { AppComponent } from "./app.component";
bootstrap(AppComponent);
6) تعاریف اسکریپت‌های Index.html سایت، اینبار به نحو ذیل تغییر کرده‌اند:
یک نکته: اگر می‌خواهید این تعاریف را در یک فایل razor، وارد کنید، چون
@ به ابتدای پوشه‌ی angular2 اضافه شده (node_modules\
@angular)، مشکل پردازشی razor را ایجاد خواهد کرد و باید
escape شود. به همین جهت بجای @ بهتر است معادل آن را یعنی ("@")Html.Raw@
وارد کنید.
سپس ابتدا فایل systemjs.config.js را
از اینجا دریافت کنید.
در ادامه مداخل جدید را هم
در فایل index.html مثال رسمی آغازین آن بررسی کنید.
بنابراین، فایل systemjs.config.js را به ریشه‌ی سایت اضافه کنید (از این جهت که مسیر بسته‌های node_modules را از ریشه‌ی سایت می‌خواند). سپس فایل Views\Shared\_Layout.cshtml را به نحو ذیل تغییر دهید:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
<link href="~/app/app.component.css" rel="stylesheet"/>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css"/>
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="~/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="~/node_modules/zone.js/dist/zone.js"></script>
<script src="~/node_modules/reflect-metadata/Reflect.js"></script>
<script src="~/node_modules/systemjs/dist/system.src.js"></script>
<script src="~/systemjs.config.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.import('app/main').then(null, console.error.bind(console));
</script>
</head>
<body>
<div>
@RenderBody()
<pm-app>Loading App...</pm-app>
</div>
@RenderSection("Scripts", required: false)
</body>
</html> خلاصه‌ی سریع این موارد
الف) تغییرات آخرین بسته‌های npm را
از مستندات آن پیگیری و اعمال کنید. آخرین نگارش آن همیشه
در اینجا قابل دسترسی است.
ب) تغییرات index.html، فایل
main.ts و مداخل آغازین آن‌را
از مثال آغازین رسمی آن پیگیری و اعمال کنید.
