Angular 2 JSON — Дополнительная настройка

Angular 2 JSON — Дополнительная настройка

От автора: в этой главе мы рассмотрим другие файлы конфигурации, Angular JSON, которые являются частью проекта.

tsconfig.json

Этот файл используется для предоставления опций TypeScript, используемых для проекта Angular JS.

{ 
  "compilerOptions": {
 "target": "es5",
 "module": "commonjs",
 "moduleResolution": "node",
 "sourceMap": true,
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true,
 "lib": [ "es2015", "dom" ],
 "noImplicitAny": true,
 "suppressImplicitAnyIndexErrors": true
  }
}

Ниже приведены некоторые ключевые моменты, которые следует отметить в отношении вышеуказанного кода.

Целью компиляции является es5, и это связано с тем, что большинство браузеров могут понимать только ES5 typescript.

Параметр sourceMap используется для создания файлов Map, которые применяются при отладке. Следовательно, во время разработки рекомендуется устанавливать для этой опции значение true.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Для декораторов Angular JS требуется установить «emitDecoratorMetadata»: true и «experimentalDecorators»: true.

Без этого приложение Angular JS не будет компилироваться.

package.json

Этот файл содержит информацию о проекте Angular 2. Ниже приведены стандартные настройки этого файла.

{
  "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\" 
 --killothers --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": "~2.4.0",
 "@angular/compiler": "~2.4.0",
 "@angular/core": "~2.4.0",
 "@angular/forms": "~2.4.0",
 "@angular/http": "~2.4.0",
 "@angular/platform-browser": "~2.4.0",
 "@angular/platform-browser-dynamic": "~2.4.0",
 "@angular/router": "~3.4.0",
 "angular-in-memory-web-api": "~0.2.4",
 "systemjs": "0.19.40",
 "core-js": "^2.4.1",
 "rxjs": "5.0.1",
 "zone.js": "^0.7.4"
  },
 
  "devDependencies": {
 "concurrently": "^3.2.0",
 "lite-server": "^2.2.2",
 "typescript": "~2.0.10",
 "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": {}
}

В этом коде следует отметить следующее -

Существует два типа зависимостей: обычные зависимости и зависимости разработки. Последние требуются для процесса разработки, в то время, как стандартные зависимости нужны для запуска приложения.

Команда «build:watch»: «tsc -p src/ -w» используется для компиляции текста в фоновом режиме путем поиска изменений в файлах typescript.

systemjs.config.json

Этот файл содержит системные файлы, необходимые для приложения Angular JS. Он добавляет все требуемые файлы скриптов без необходимости добавлять тег script в html-код страницы. Стандартные файлы содержат следующий код.

/** 
* Системные настройки для экземпляров Angular 
*  Данные настройки задаются в соответствии с потребностями конкретного приложения
*/ 
(function (global) { 
  System.config ({ 
 paths: { 
 // пути используются в качестве алиасов
 'npm:': 'node_modules/' 
 }, 
 
 // map указывает загрузчику системы, где располагаются соответствующие элементы
 map: { 
 //  приложение размещается в папке app 
 app: 'app', 
 
 // пакеты angular 
 '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
 '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
 '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
 '@angular/platform-browser': 'npm:@angular/platformbrowser/bundles/platform-browser.umd.js', 
 '@angular/platform-browser-dynamic': 
 'npm:@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js', 
 '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
 '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
 '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
 
 // другие библиотеки
 'rxjs':  'npm:rxjs', 
 'angular-in-memory-web-api': 
 'npm:angular-in-memory-web-api/bundles/inmemory-web-api.umd.js' 
 }, 
 
 // пакеты указывают  загрузчику системы, что загружать если отсутствует имя файла
 and/or no extension 
 packages: { 
 app: { 
 defaultExtension: 'js' 
 }, 
 
 rxjs: { 
 defaultExtension: 'js' 
 } 
 } 
 
  }); 
})(this);

В данном коде нужно отметить следующее -

‘npm:’: ‘node_modules/’ указывает место, где расположены все модули npm.

Указание места ‘app’ задает папку, в которую загружаются все файлы приложений.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree