Я пытаюсь изучить angular2, я перешел по нескольким ссылкам
для jspm и systemjs
для типа проекта и настроек.
для конфигурации .csproj
Насколько я понимаю, в приложении angular2 часть модуля в операторе импорта: import {} from 'module' требуется полный путь к файлу модуля (он рассматривает каталог и имя файла как пространство имен).
Теперь я использую jspm и systemjs, которые вводят промежуточный файл config.js для сопоставления модулей. Я пытался понять, как это работает, но безуспешно застрял с этой ошибкой в «hello.ts».
Cannot find module 'ng2-bootstrap/ng2-bootstrap'
Вот моя настройка приложения
IDE: Visual Studio
Проект: Typescript => Html-приложение с TypeScript
Свойства проекта для машинописного текста
Project.csproj
</PropertyGroup>
.
.
.
<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
</PropertyGroup>
package.json
{
"jspm": {
"directories": {
"baseURL": "app"
},
"dependencies": {
"angular2": "npm:angular2@^2.0.0-alpha.45",
"es6-shim": "github:es-shims/es6-shim@^0.33.9",
"ng2-bootstrap": "npm:ng2-bootstrap@^0.44.6",
"reflect-metadata": "npm:reflect-metadata@^0.1.2",
"zone.js": "npm:zone.js@^0.5.8"
},
"devDependencies": {
"typescript": "npm:typescript@^1.6.2"
}
}
}
config.js
System.config({
baseURL: "/app",
defaultJSExtensions: true,
transpiler: "typescript",
typescriptOptions: {
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
packages: {
"app": {
"defaultExtension": "ts"
}
},
map: {
"angular2": "npm:[email protected]",
"es6-shim": "github:es-shims/[email protected]",
"ng2-bootstrap": "npm:[email protected]",
"reflect-metadata": "npm:[email protected]",
"typescript": "npm:[email protected]",
"zone.js": "npm:[email protected]",
.
.
.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Getting Started with Angular 2</title>
</head>
<body>
<app></app>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('hello');
</script>
</body>
</html>
hello.ts
/// <reference path="../typings/tsd.d.ts" />
import 'zone.js';
import 'reflect-metadata';
import 'es6-shim';
import {Component, View, bootstrap} from 'angular2/angular2';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'app'
})
@View({
template: `
<div>Hello {{ name }}</div>
<alert>Hi</alert>
`
})
class App
{
name: string = 'Sandeep';
}
bootstrap(App);
tsd.d.ts
/// <reference path="../app/jspm_packages/npm/[email protected]/bundles/typings/angular2/angular2.d.ts" />
/// <reference path="rx/rx-lite.d.ts" />
/// <reference path="rx/rx.d.ts" />
/// <reference path="angular2/angular2.d.ts" />
/// <reference path="es6-promise/es6-promise.d.ts" />
/// <reference path="../app/jspm_packages/npm/[email protected]/ng2-bootstrap.d.ts" />
PS: приложение работает без ng2-bootstrap
