Skip to content

Commit

Permalink
feat(package): updated to rc.4 and ng2-bootstrap 1.0.18
Browse files Browse the repository at this point in the history
  • Loading branch information
valorkin committed Jul 11, 2016
1 parent 52fae50 commit 750f25e
Show file tree
Hide file tree
Showing 8 changed files with 110 additions and 60 deletions.
16 changes: 16 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,20 @@ like this one: https://github.com/valor-software/ng2-bootstrap
Clone this repo
`npm i` and `npm start` and you are ready!

## Couple of things you should pay attention
1. Install and add `map` for `moment.js` in system.js config
```js
'moment': 'node_modules/moment/moment.js'
```
2. Import `ng2-bootstrap` in `index.html` before starting application
```html
<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
```
3. Use new forms
```js
import {provideForms, disableDeprecatedForms} from '@angular/forms';

bootstrap(AppComponent, [disableDeprecatedForms(), provideForms()]);
```

Good luck with angular2 hacking!
3 changes: 2 additions & 1 deletion app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import {Component} from '@angular/core';
import {AlertComponent, DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
import {NgModel} from '@angular/forms';

@Component({
selector: 'my-app',
directives: [AlertComponent, DATEPICKER_DIRECTIVES],
directives: [AlertComponent, DATEPICKER_DIRECTIVES, NgModel],
template: `
<alert type="info">ng2-bootstrap hello world!</alert>
<pre>Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
Expand Down
3 changes: 2 additions & 1 deletion app/boot.ts → app/main.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component'
import {enableProdMode} from '@angular/core';
import {provideForms, disableDeprecatedForms} from '@angular/forms';

enableProdMode();

bootstrap(AppComponent);
bootstrap(AppComponent, [disableDeprecatedForms(), provideForms()]);
37 changes: 8 additions & 29 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,39 +5,18 @@
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

<!-- 1. Load libraries -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/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.js"></script>
<script src="node_modules/rxjs/bundles/Rx.min.js"></script>

<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<!-- 3. Load ng2-bootstrap -->
<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>

<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
map: {
moment: 'node_modules/moment/moment.js',
"@angular/core": "node_modules/@angular/core/core.umd.js",
"@angular/common": "node_modules/@angular/common/common.umd.js",
"@angular/compiler": "node_modules/@angular/compiler/compiler.umd.js",
"@angular/platform-browser": "node_modules/@angular/platform-browser/platform-browser.umd.js",
"@angular/platform-browser-dynamic": "node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js",
// ng2-bootstrap specifics
"@angular/core/src/facade/lang": "node_modules/@angular/core/src/facade/lang.js",
// "@angular/platform-browser/src/animate/animation_builder": "node_modules/@angular/platform-browser/src/animate/animation_builder.js"
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
System.import('app').catch(function(err){ console.error(err); });
</script>

</head>
Expand Down
41 changes: 24 additions & 17 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,38 @@
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"postinstall": " ./node_modules/.bin/typings install",
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "^2.0.0-rc.1",
"@angular/compiler": "^2.0.0-rc.1",
"@angular/core": "^2.0.0-rc.1",
"@angular/platform-browser": "^2.0.0-rc.1",
"@angular/platform-browser-dynamic": "^2.0.0-rc.1",
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.4",
"angular2-in-memory-web-api": "0.0.14",
"bootstrap": "^3.3.6",
"es6-shim": "0.35.0",
"ng2-bootstrap": "1.0.17",
"reflect-metadata": "0.1.2",
"core-js": "^2.4.0",
"ng2-bootstrap": "1.0.19",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.29",
"typings": "0.8.1",
"zone.js": "0.6.12"
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"concurrently": "2.0.0",
"lite-server": "2.2.0",
"typescript": "1.8.10"
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
}
}
49 changes: 49 additions & 0 deletions systemjs.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'moment': 'node_modules/moment/moment.js',
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
15 changes: 5 additions & 10 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"listFiles": true
},
"exclude": [
"node_modules",
"typings/browser.d.ts"
]
}
"noImplicitAny": false
}
}
6 changes: 4 additions & 2 deletions typings.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"ambientDependencies": {
"es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160621231320"
}
}

0 comments on commit 750f25e

Please sign in to comment.