I'm trying to learn angular2, I followed few links
for jspm and systemjs
for project type and settings
for .csproj configuration
My understanding is that in angular2 application, the module part in the import statement : import {} from 'module' needs complete path to module file (it treats directory and file name as namespace).
Now, I'm using jspm and systemjs, which introduces a middle file config.js to map modules. I tried to understand its working but without any luck I got stuck with this error in 'hello.ts'.
Cannot find module 'ng2-bootstrap/ng2-bootstrap'
Here is my application set-up
IDE : Visual Studio
Project : Typescript => Html Application with TypeScript
Project Properties for 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: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",
"typescript": "npm:typescript@1.6.2",
"zone.js": "npm:zone.js@0.5.8",
.
.
.
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/angular2@2.0.0-alpha.45/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/ng2-bootstrap@0.44.6/ng2-bootstrap.d.ts" />
PS: Application is working good without ng2-bootstrap
