Skip to content

GitLab

N
Ng2 Bootstrap Modal
Commit a1fba3e6 authored by avovchuk's avatar avovchuk
Browse files
Options

Unexpected value 'BootstrapModalModule' imported by the module 'AppModule' #1; 

Small fixes
parent 59dbb1a3
Hide whitespace changes
Inline Side-by-side
Showing with 370 additions and 797 deletions
demo/.editorconfig deleted 100644 → 0
View file @ 59dbb1a3
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
demo/.gitignore deleted 100644 → 0
View file @ 59dbb1a3
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
# dependencies
/node_modules
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage/*
/libpeerconnection.log
npm-debug.log
testem.log
/typings
# e2e
/e2e/*.js
/e2e/*.map
#System Files
.DS_Store
Thumbs.db
demo/README.md deleted 100644 → 0
View file @ 59dbb1a3
# Demo
This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.26.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.
## Deploying to GitHub Pages
Run `ng github-pages:deploy` to deploy to GitHub Pages.
## Further help
To get more help on the `angular-cli` use `ng help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
demo/angular-cli.json deleted 100644 → 0
View file @ 59dbb1a3
{
"project": {
"version": "1.0.0-beta.26",
"name": "demo"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
demo/e2e/app.e2e-spec.ts deleted 100644 → 0
View file @ 59dbb1a3
import { DemoPage } from './app.po';
describe('demo App', function() {
let page: DemoPage;
beforeEach(() => {
page = new DemoPage();
});
it('should display message saying app works', () => {
page.navigateTo();
expect(page.getParagraphText()).toEqual('app works!');
});
});
demo/e2e/app.po.ts deleted 100644 → 0
View file @ 59dbb1a3
import { browser, element, by } from 'protractor';
export class DemoPage {
navigateTo() {
return browser.get('/');
}
getParagraphText() {
return element(by.css('app-root h1')).getText();
}
}
demo/e2e/tsconfig.json deleted 100644 → 0
View file @ 59dbb1a3
{
"compileOnSave": false,
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"outDir": "../dist/out-tsc-e2e",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
}
}
demo/karma.conf.js deleted 100644 → 0
View file @ 59dbb1a3
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma')
],
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['angular-cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'karma-remap-istanbul']
: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
demo/package.json deleted 100644 → 0
View file @ 59dbb1a3
{
"name": "demo",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "^2.4.3",
"@angular/compiler": "^2.4.3",
"@angular/core": "^2.4.3",
"@angular/forms": "^2.4.3",
"@angular/http": "^2.4.3",
"@angular/platform-browser": "^2.4.3",
"@angular/platform-browser-dynamic": "^2.4.3",
"@angular/router": "^3.3.1",
"core-js": "^2.4.1",
"ng2-bootstrap-modal": "^0.0.1",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/compiler-cli": "^2.3.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.26",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "~2.0.3"
}
}
demo/protractor.conf.js deleted 100644 → 0
View file @ 59dbb1a3
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
/*global jasmine */
var SpecReporter = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./e2e/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
useAllAngular2AppRoots: true,
beforeLaunch: function() {
require('ts-node').register({
project: 'e2e'
});
},
onPrepare: function() {
jasmine.getEnv().addReporter(new SpecReporter());
}
};
demo/src/app/alert.component.ts deleted 100644 → 0
View file @ 59dbb1a3
import { Component } from '@angular/core';
import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
@Component({ selector: 'alert',
template: `<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="close()" >&times;</button>
<h4 class="modal-title">{{title || 'Alert'}}</h4>
</div>
<div class="modal-body">
<p>{{message || '!!!'}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="close()">OK</button>
</div>
</div>`
})
export class AlertComponent extends DialogComponent {
constructor(dialogService: DialogService) {
super(dialogService);
}
}
demo/src/app/app.component.html deleted 100644 → 0
View file @ 59dbb1a3
<div class="container" >
<h1 class="text-center">ng2-bootstrap-modal demo application</h1>
<div class="row">
<div class="col-sm-4 text-right">
<b>Alert example: </b>
</div>
<div class="col-sm-4">
<button class="btn btn-default btn-block" (click)=showAlert()>Show alert</button>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-4 text-right">
<b>Confirm example: </b>
</div>
<div class="col-sm-4">
<button class="btn btn-default btn-block" (click)=showConfirm()>Show confirm</button>
</div>
<div class="col-sm-4">
<span>Result: </span>
<b *ngIf="confirmResult == null" class="text-default">Not answered</b>
<b *ngIf="confirmResult != null" [ngClass]="{'text-danger': !confirmResult, 'text-success': confirmResult}">{{confirmResult ? 'Accepted': 'Declined'}}</b>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-4 text-right">
<b>Prompt example: </b>
</div>
<div class="col-sm-4">
<button class="btn btn-default btn-block" (click)=showPrompt()>Show prompt</button>
</div>
<div class="col-sm-4">
<span>Your name: </span>
<b>{{promptMessage}}</b>
</div>
</div>
</div>
demo/src/app/app.component.spec.ts deleted 100644 → 0
View file @ 59dbb1a3
/* tslint:disable:no-unused-variable */
import { TestBed, async } from '@angular/core/testing';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
AppModule
],
});
TestBed.compileComponents();
});
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it('should render button "Show confirm"', async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('button').textContent).toContain('Show confirm');
}));
//FIXME:Uncaught Error: Error in ./AppComponent class AppComponent - inline template:3:10 caused by: Cannot read property 'hostView' of undefined
/*it('should render confirm dialog by click', async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
compiled.querySelector('button').click();
expect(compiled.querySelector('.modal')).toBeDefined();
}));*/
});
demo/src/app/app.component.ts deleted 100644 → 0
View file @ 59dbb1a3
import { Component } from '@angular/core';
import { AlertComponent } from './alert.component';
import { ConfirmComponent } from './confirm.component';
import { PromptComponent } from './prompt.component';
import { DialogService } from "ng2-bootstrap-modal";
import Timer = NodeJS.Timer;
@Component({
selector: 'app',
templateUrl: './app.component.html'
})
export class AppComponent {
confirmResult:boolean = null;
promptMessage:string = '';
constructor(private dialogService:DialogService) {}
showAlert() {
this.dialogService.addDialog(AlertComponent, {
title:'Alert!!!!',
message:'TADAM!!!'});
}
showConfirm() {
let disposable = this.dialogService.addDialog(ConfirmComponent, {
title:'Confirmation',
message:'Bla bla comfirm action?'})
.subscribe((isConfirmed)=>{
//We get dialog result
this.confirmResult = !!isConfirmed;
});
}
showPrompt() {
let disposable = this.dialogService.addDialog(PromptComponent, {
title:'Name dialog',
question:'Enter your name: '})
.subscribe((message)=>{
//We get dialog result
this.promptMessage = message;
});
}
}
demo/src/app/app.module.ts deleted 100644 → 0
View file @ 59dbb1a3
import { NgModule} from '@angular/core';
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BootstrapModalModule } from 'ng2-bootstrap-modal';
import { ConfirmComponent } from './confirm.component';
import { AlertComponent } from './alert.component';
import { PromptComponent } from './prompt.component';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
AlertComponent,
ConfirmComponent,
PromptComponent
],
imports: [
CommonModule,
BrowserModule,
FormsModule,
BootstrapModalModule
],
//Don't forget add component to entryComponents section
entryComponents: [
AlertComponent,
ConfirmComponent,
PromptComponent
],
bootstrap: [AppComponent]
})
export class AppModule {}
demo/src/app/confirm.component.ts deleted 100644 → 0
View file @ 59dbb1a3
import { Component } from '@angular/core';
import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
@Component({ selector: 'confirm',
template: `<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="close()" >&times;</button>
<h4 class="modal-title">{{title || 'Confirm'}}</h4>
</div>
<div class="modal-body">
<p>{{message || 'Are you sure?'}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="confirm()">OK</button>
<button type="button" class="btn btn-default" (click)="close()" >Cancel</button>
</div>
</div>`
})
export class ConfirmComponent extends DialogComponent {
constructor(dialogService: DialogService) {
super(dialogService);
}
confirm() {
// on click on confirm button we set dialog result as true,
// ten we can get dialog result from caller code
this.result = true;
this.close();
}
}
demo/src/app/prompt.component.ts deleted 100644 → 0
View file @ 59dbb1a3
import { Component } from '@angular/core';
import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
@Component({ selector: 'confirm',
template: `<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="close()" >&times;</button>
<h4 class="modal-title">{{title || 'Prompt'}}</h4>
</div>
<div class="modal-body">
<label>{{question}}</label><input type="text" class="form-control" [(ngModel)]="message" name="name" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="apply()">OK</button>
<button type="button" class="btn btn-default" (click)="close()" >Cancel</button>
</div>
</div>`
})
export class PromptComponent extends DialogComponent {
message: string = '';
constructor(dialogService: DialogService) {
super(dialogService);
}
apply() {
this.result = this.message;
this.close();
}
}
demo/src/environments/environment.prod.ts deleted 100644 → 0
View file @ 59dbb1a3
export const environment = {
production: true
};
demo/src/environments/environment.ts deleted 100644 → 0
View file @ 59dbb1a3
// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `angular-cli.json`.
export const environment = {
production: false
};
demo/src/index.html deleted 100644 → 0
View file @ 59dbb1a3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<app>Loading...</app>
</body>
</html>
demo/src/main.ts deleted 100644 → 0
View file @ 59dbb1a3
import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
demo/src/polyfills.ts deleted 100644 → 0
View file @ 59dbb1a3
// This file includes polyfills needed by Angular and is loaded before
// the app. You can add your own extra polyfills to this file.
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
demo/src/styles.css deleted 100644 → 0
View file @ 59dbb1a3
/* You can add global styles to this file, and also import other style files */
demo/src/test.ts deleted 100644 → 0
View file @ 59dbb1a3
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import './polyfills.ts';
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare var __karma__: any;
declare var require: any;
// Prevent Karma from running prematurely.
__karma__.loaded = function () {};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
// Finally, start Karma to run the tests.
__karma__.start();
demo/src/tsconfig.json deleted 100644 → 0
View file @ 59dbb1a3
{
"compilerOptions": {
"baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",