در این مقاله نحوه راه اندازی یک محیط توسعه Angular 6 در ویژوال استودیو 2017 بدون استفاده از Angular CLI را یاد خواهیم گرفت.
پیش نیازها
- Node.JS باید نصب شود (اگر نصب نیست به لینک دانلود و نصب بروید ).
- NPM باید نصب شود (برای نصب NPM خط فرمان را اجرا کنید: npm install -g npm@latest ).
- ویژوال استودیو 2017 باید نصب شود.
مرحله 1
فایل "package.json" را که با کمک مقاله بالا ایجاد کرده اید باز کنید.
- {
- "name": "angular-quickstart",
- "version": "1.0.0",
- "description": "QuickStart package.json from the documentation, supplemented with testing support",
- "scripts": {
- "build": "tsc -p src/",
- "build:watch": "tsc -p src/ -w",
- "build:e2e": "tsc -p e2e/",
- "serve": "lite-server -c=bs-config.json",
- "serve:e2e": "lite-server -c=bs-config.e2e.json",
- "prestart": "npm run build",
- "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
- "pree2e": "npm run build:e2e",
- "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
- "preprotractor": "webdriver-manager update",
- "protractor": "protractor protractor.config.js",
- "pretest": "npm run build",
- "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
- "pretest:once": "npm run build",
- "test:once": "karma start karma.conf.js --single-run",
- "lint": "tslint ./src/**/*.ts -t verbose"
- },
- "keywords": [],
- "author": "",
- "license": "MIT",
- "dependencies": {
- "@angular/common": "~5.0.1",
- "@angular/compiler": "~5.0.1",
- "@angular/core": "~5.0.1",
- "@angular/forms": "~5.0.1",
- "@angular/http": "~5.0.1",
- "@angular/platform-browser": "~5.0.1",
- "@angular/platform-browser-dynamic": "~5.0.1",
- "@angular/router": "~5.0.1",
- "angular-in-memory-web-api": "~0.3.0",
- "systemjs": "0.19.40",
- "core-js": "^2.4.1",
- "rxjs": "5.0.1",
- "zone.js": "^0.8.4"
- },
- "devDependencies": {
- "concurrently": "^3.2.0",
- "lite-server": "^2.2.2",
- "typescript": "~2.1.0",
- "canonical-path": "0.0.2",
- "tslint": "^3.15.1",
- "lodash": "^4.16.4",
- "jasmine-core": "~2.4.1",
- "karma": "^1.3.0",
- "karma-chrome-launcher": "^2.0.0",
- "karma-cli": "^1.0.1",
- "karma-jasmine": "^1.0.2",
- "karma-jasmine-html-reporter": "^0.2.2",
- "protractor": "~4.0.14",
- "rimraf": "^2.5.4",
- "@types/node": "^6.0.46",
- "@types/jasmine": "2.5.36"
- },
- "repository": {}
- }
مرحله 2
نسخه Angular "5.0.1" را پیدا کنید و با نسخه "6.1.0-rc.3" جایگزین کنید. اکنون فایل "package.json" مانند زیر خواهد بود،
- {
- "name": "angular-quickstart",
- "version": "1.0.0",
- "description": "QuickStart package.json from the documentation, supplemented with testing support",
- "scripts": {
- "build": "tsc -p src/",
- "build:watch": "tsc -p src/ -w",
- "build:e2e": "tsc -p e2e/",
- "serve": "lite-server -c=bs-config.json",
- "serve:e2e": "lite-server -c=bs-config.e2e.json",
- "prestart": "npm run build",
- "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
- "pree2e": "npm run build:e2e",
- "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
- "preprotractor": "webdriver-manager update",
- "protractor": "protractor protractor.config.js",
- "pretest": "npm run build",
- "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
- "pretest:once": "npm run build",
- "test:once": "karma start karma.conf.js --single-run",
- "lint": "tslint ./src/**/*.ts -t verbose"
- },
- "keywords": [],
- "author": "",
- "license": "MIT",
- "dependencies": {
- "@angular/common": "~6.1.0-rc.3",
- "@angular/compiler": "~6.1.0-rc.3",
- "@angular/core": "~6.1.0-rc.3",
- "@angular/forms": "~6.1.0-rc.3",
- "@angular/http": "~6.1.0-rc.3",
- "@angular/platform-browser": "~6.1.0-rc.3",
- "@angular/platform-browser-dynamic": "~6.1.0-rc.3",
- "@angular/router": "~6.1.0-rc.3",
- "angular-in-memory-web-api": "~0.3.0",
- "systemjs": "0.19.40",
- "core-js": "^2.4.1",
- "rxjs": "6.1.0-rc.3",
- "zone.js": "^0.8.4"
- },
- "devDependencies": {
- "concurrently": "^3.2.0",
- "lite-server": "^2.2.2",
- "typescript": "~2.1.0",
- "canonical-path": "0.0.2",
- "tslint": "^3.15.1",
- "lodash": "^4.16.4",
- "jasmine-core": "~2.4.1",
- "karma": "^1.3.0",
- "karma-chrome-launcher": "^2.0.0",
- "karma-cli": "^1.0.1",
- "karma-jasmine": "^1.0.2",
- "karma-jasmine-html-reporter": "^0.2.2",
- "protractor": "~4.0.14",
- "rimraf": "^2.5.4",
- "@types/node": "^6.0.46",
- "@types/jasmine": "2.5.36"
- },
- "repository": {}
- }
یا روی هر کلید Angular یا نسخه ای در "package.json" مانند صفحه زیر، ماوس را روی آن قرار دهید.