akserg / ng2-webpack-demo Goto Github PK

View Code? Open in Web Editor NEW

85.0 6.0 29.0 14.74 MB

A minimal Angular2 playground using TypeScript and Webpack loader to demonstrate the use of different libraries

Home Page: http://akserg.github.io/ng2-webpack-demo

License: MIT License

JavaScript 3.38% HTML 5.94% TypeScript 69.03% CSS 21.64%

ng2-webpack-demo's Introduction

ng2-webpack-demo

This project was generated with angular-cli version 1.0.0-beta.24. It demonstrates the use of different libraries such:

ng2-dnd: Angular 2 Drag-and-Drop without dependencies

ng2-toasty: Angular2 Toasty component shows growl-style alerts and messages for your application

ng2-slim-loading-bar: Angular 2 component shows slim loading bar at the top of the page

Online demo available here

Development server

Run npm start 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.

Build with AOT

Run npm run aot:buildd to build the project for production with Ahead of Time (AOT) compilation. The build artifacts will be stored in the dist/ directory. Use the npm run aot:start to start server in production with AOT.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. 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.

License

MIT

ng2-webpack-demo's People

Contributors

Stargazers

Watchers

ng2-webpack-demo's Issues

Include skeleton.css into builds

Include skeleton.css into development and production builds.

Cursor fixed to 'move' when item dragged in ng-repeat

I'm submitting a ...
[x] bug report
[ ] feature request
[ ] question about the decisions made in the repository
Do you want to request a feature or report a bug?
Report bug
What is the current behavior?
After dragging one item in an ng-repeat the cursor stays fixed to 'move'.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.

I can reproduce this behaviour in your demo: http://akserg.github.io/ng2-webpack-demo/#/dnd

go to the example 'Simple sortable'
Drag Item of ng-repeat
Hover with the cursor over the dragged item
the cursor of the before dragged item is still set to 'move'
move more items of the list -> whole list becomes cursor 'move'

What is the expected behavior?
The cursor should be reset to whatever is suitable for the item after dragging the item.
Please tell us about your environment:

Angular version: 2.0.0-beta.25.5
Browser: [ Chrome 55.0.2883.87 | Firefox 51.0.1 ]

this.slimLoader.color not setting the color

I'm submitting a ...
[x ] bug report
[ ] feature request
[ ] question about the decisions made in the repository
Do you want to request a feature or report a bug?
What is the current behavior?
The color of the slimbar is always brickred which I believe is default color
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.

try set color of the slimbar using this.slimLoader.color = 'blue' and the color is unchanged

What is the expected behavior?
color property should define bar color
What is the motivation / use case for changing the behavior?
Please tell us about your environment:

Angular version: 2.0.0-beta.X
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.2.0
Xcode version: Xcode 8.2 Build version 8C38

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Plunker project for ng2-dnd

If I want to create a plunker(http://plnkr.co) project for ng2-dnd
what is the ng2-dnd src path I have to select there is no online plugin available in plnkr for dnd ?
any help will be appreciated!!

test errors

I'm submitting a ...
[ ] bug report
[ ] feature request
[ ] question about the decisions made in the repository
[x] Test error

Thanks for your dnd library.
If run test by "npm run test", I got the three errors.
It makes error my project too.
How to fix it?

Connected on socket Yqctxoaoa9XBuiSLAAAA with id 43035665 Chrome 56.0.2924 (Windows 7 0.0.0) AppComponent should create the app FAILED
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

<a class="navbar-link" [ERROR ->][routerLink]="['/']">Home
<a class="navbar-l"): AppComponent@4:71 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("rLink]="['/']">Home
<a class="navbar-link" [ERROR ->][routerLink]="['/toasty']">Toasty
<a class=""): AppComponent@5:71 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("['/toasty']">Toasty
<a class="navbar-link" [ERROR ->][routerLink]="['/dnd']">Drag-and-Drop
<a cla"): AppComponent@6:71 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("nd']">Drag-and-Drop
<a class="navbar-link" [ERROR ->][routerLink]="['/slim']">Slim Loading Bar

"): AppComponent@7:71 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] "): AppComponent@13:0 'ng2-slim-loading-bar' is not a known element: 1. If 'ng2-slim-loading-bar' is an Angular component, then verify that it is part of this module. 2. If 'ng2-slim-loading-bar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]"): AppComponent@14:0 Error: Template parse errors: at SyntaxError.ZoneAwareError (webpack:///~~/zone.js/dist/zone.js:811:0 <- src/test.ts:80939:33) at SyntaxError.BaseError [as constructor] (webpack:///~~/@angular/compiler/src/facade/errors.js:22:0 <- src/test.ts:63100:16) at new SyntaxError (webpack:///~~/@angular/compiler/src/util.js:151:0 <- src/test.ts:5422:16) at TemplateParser.parse (webpack:///~~/@angular/compiler/src/template_parser/template_parser.js:140:0 <- src/test.ts:17786:19) at JitCompiler._compileTemplate (webpack:///~~/@angular/compiler/src/jit/compiler.js:362:25 <- src/test.ts:44755:68) at webpack:///~~/@angular/compiler/src/jit/compiler.js:245:47 <- src/test.ts:44638:62 at Set.forEach (native) at JitCompiler._compileComponents (webpack:///~~/@angular/compiler/src/jit/compiler.js:245:0 <- src/test.ts:44638:19) at createResult (webpack:///~~/@angular/compiler/src/jit/compiler.js:147:0 <- src/test.ts:44540:19) at JitCompiler._compileModuleAndAllComponents (webpack:///~~/@angular/compiler/src/jit/compiler.js:151:0 <- src/test.ts:44544:88) at JitCompiler.compileModuleAndAllComponentsSync (webpack:///~~/@angular/compiler/src/jit/compiler.js:98:0 <- src/test.ts:44491:21)
at TestingCompilerImpl.compileModuleAndAllComponentsSync (webpack:////@angular/compiler/bundles/compiler-testing.umd.js:482:0 <- src/test.ts:62771:35)
at TestBed._initIfNeeded (webpack:////@angular/core/bundles/core-testing.umd.js:770:0 <- src/test.ts:21855:40)
at TestBed.createComponent (webpack:////@angular/core/bundles/core-testing.umd.js:853:0 <- src/test.ts:21938:18)
at Function.TestBed.createComponent (webpack:////@angular/core/bundles/core-testing.umd.js:682:0 <- src/test.ts:21767:33)
Chrome 56.0.2924 (Windows 7 0.0.0) AppComponent should have as title 'app works!' FAILED
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

<a class="navbar-link" [ERROR ->][routerLink]="['/']">Home

<a class="navbar-l"): AppComponent@4:71
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("rLink]="['/']">Home

<a class="navbar-link" [ERROR ->][routerLink]="['/toasty']">Toasty

<a class=""): AppComponent@5:71
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("['/toasty']">Toasty

<a class="navbar-link" [ERROR ->][routerLink]="['/dnd']">Drag-and-Drop

<a cla"): AppComponent@6:71
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("nd']">Drag-and-Drop

<a class="navbar-link" [ERROR ->][routerLink]="['/slim']">Slim Loading Bar

"): AppComponent@7:71
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]
"): AppComponent@13:0
'ng2-slim-loading-bar' is not a known element:
1. If 'ng2-slim-loading-bar' is an Angular component, then verify that it is part of this module.
2. If 'ng2-slim-loading-bar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]"): AppComponent@14:0
Error: Template parse errors:
at SyntaxError.ZoneAwareError (webpack:////zone.js/dist/zone.js:811:0 <- src/test.ts:80939:33)
at SyntaxError.BaseError [as constructor] (webpack:////@angular/compiler/src/facade/errors.js:22:0 <- src/test.ts:63100:16)
at new SyntaxError (webpack:////@angular/compiler/src/util.js:151:0 <- src/test.ts:5422:16)
at TemplateParser.parse (webpack:////@angular/compiler/src/template_parser/template_parser.js:140:0 <- src/test.ts:17786:19)
at JitCompiler._compileTemplate (webpack:////@angular/compiler/src/jit/compiler.js:362:25 <- src/test.ts:44755:68)
at webpack:////@angular/compiler/src/jit/compiler.js:245:47 <- src/test.ts:44638:62
at Set.forEach (native)
at JitCompiler._compileComponents (webpack:////@angular/compiler/src/jit/compiler.js:245:0 <- src/test.ts:44638:19)
at createResult (webpack:////@angular/compiler/src/jit/compiler.js:147:0 <- src/test.ts:44540:19)
at JitCompiler._compileModuleAndAllComponents (webpack:////@angular/compiler/src/jit/compiler.js:151:0 <- src/test.ts:44544:88)
at JitCompiler.compileModuleAndAllComponentsSync (webpack:////@angular/compiler/src/jit/compiler.js:98:0 <- src/test.ts:44491:21)
at TestingCompilerImpl.compileModuleAndAllComponentsSync (webpack:////@angular/compiler/bundles/compiler-testing.umd.js:482:0 <- src/test.ts:62771:35)
at TestBed._initIfNeeded (webpack:////@angular/core/bundles/core-testing.umd.js:770:0 <- src/test.ts:21855:40)
at TestBed.createComponent (webpack:////@angular/core/bundles/core-testing.umd.js:853:0 <- src/test.ts:21938:18)
at Function.TestBed.createComponent (webpack:////@angular/core/bundles/core-testing.umd.js:682:0 <- src/test.ts:21767:33)
Chrome 56.0.2924 (Windows 7 0.0.0) AppComponent should render title in a h1 tag FAILED
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

<a class="navbar-link" [ERROR ->][routerLink]="['/']">Home

<a class="navbar-l"): AppComponent@4:71
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("rLink]="['/']">Home

<a class="navbar-link" [ERROR ->][routerLink]="['/toasty']">Toasty

<a class=""): AppComponent@5:71
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("['/toasty']">Toasty

<a class="navbar-link" [ERROR ->][routerLink]="['/dnd']">Drag-and-Drop

<a cla"): AppComponent@6:71
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("nd']">Drag-and-Drop

<a class="navbar-link" [ERROR ->][routerLink]="['/slim']">Slim Loading Bar

"): AppComponent@7:71
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]
"): AppComponent@13:0
'ng2-slim-loading-bar' is not a known element:
1. If 'ng2-slim-loading-bar' is an Angular component, then verify that it is part of this module.
2. If 'ng2-slim-loading-bar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]"): AppComponent@14:0
Error: Template parse errors:
at SyntaxError.ZoneAwareError (webpack:////zone.js/dist/zone.js:811:0 <- src/test.ts:80939:33)
at SyntaxError.BaseError [as constructor] (webpack:////@angular/compiler/src/facade/errors.js:22:0 <- src/test.ts:63100:16)
at new SyntaxError (webpack:////@angular/compiler/src/util.js:151:0 <- src/test.ts:5422:16)
at TemplateParser.parse (webpack:////@angular/compiler/src/template_parser/template_parser.js:140:0 <- src/test.ts:17786:19)
at JitCompiler._compileTemplate (webpack:////@angular/compiler/src/jit/compiler.js:362:25 <- src/test.ts:44755:68)
at webpack:////@angular/compiler/src/jit/compiler.js:245:47 <- src/test.ts:44638:62
at Set.forEach (native)
at JitCompiler._compileComponents (webpack:////@angular/compiler/src/jit/compiler.js:245:0 <- src/test.ts:44638:19)
at createResult (webpack:////@angular/compiler/src/jit/compiler.js:147:0 <- src/test.ts:44540:19)
at JitCompiler._compileModuleAndAllComponents (webpack:////@angular/compiler/src/jit/compiler.js:151:0 <- src/test.ts:44544:88)
at JitCompiler.compileModuleAndAllComponentsSync (webpack:////@angular/compiler/src/jit/compiler.js:98:0 <- src/test.ts:44491:21)
at TestingCompilerImpl.compileModuleAndAllComponentsSync (webpack:////@angular/compiler/bundles/compiler-testing.umd.js:482:0 <- src/test.ts:62771:35)
at TestBed._initIfNeeded (webpack:////@angular/core/bundles/core-testing.umd.js:770:0 <- src/test.ts:21855:40)
at TestBed.createComponent (webpack:////@angular/core/bundles/core-testing.umd.js:853:0 <- src/test.ts:21938:18)
at Function.TestBed.createComponent (webpack:////@angular/core/bundles/core-testing.umd.js:682:0 <- src/test.ts:21767:33)
Chrome 56.0.2924 (Windows 7 0.0.0): Executed 3 of 3 (3 FAILED) ERROR (0.469 secs / 0.22 secs)

Typo in README.md

There is a typo error in the README.md under 'Build with AOT'
aot:build was miss-spelt as aot:buildd

Dropdown components do not select options

Hey ,There is a bug!~

Code To:
SlimLoadingBarService.start(()=>{alert("complete!")});
When I run the code ,it start ok but can't get my completed status like the "complete!";
I check your slim-loading-bar.service.js code on [email protected].
it does not has the function to onComplete ,
then i fix it simple and the code is down:

SlimLoadingBarService.prototype.start = function (onCompleted) {
var _this = this;
if (onCompleted === void 0) {
onCompleted = null;
}else
this.onCompleted=onCompleted;
// Stop current timer
this.stop();
// Make it visible for sure
this.visible = true;
// Run the timer with milliseconds iterval
this._intervalCounterId = setInterval(function () {
// Increment the progress and update view component
_this.progress++;
// If the progress is 100% - call complete
if (_this.progress === 100) {
_this.complete();
}
}, this.interval);
};
SlimLoadingBarService.prototype.complete = function () {
var _this = this;
this.progress = 100;
this.stop();
setTimeout(function () {
// Hide it away
_this.visible = false;
setTimeout(function () {
// Drop to 0
_this.progress = 0;
}, 250);
}, 250);
this.onCompleted();
};
SlimLoadingBarService.prototype.onCompleted = function () {
};

thanks for your giving!

Unable to read typings for "angular2-beta-to-rc-alias"

I'm submitting a ...
[ x ] bug report
[ ] feature request
[ ] question about the decisions made in the repository
Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

npm install fails because of an error during the typings install process

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.

Clone the repo.
Run npm install

What is the expected behavior?

Install should complete successfully

What is the motivation / use case for changing the behavior?

n/a

Please tell us about your environment:

OSX v10.11.5
npm v3.5.3
node v.5.6.0
typings v1.3.1

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Error message:

typings ERR! message Unable to read typings for "angular2-beta-to-rc-alias". You should check the entry paths in "typings.d.ts" are up to date
typings ERR! caused by ENOENT: no such file or directory, open '/ng2-webpack-demo/node_modules/@angularclass/angular2-beta-to-rc-alias/src/beta-17/typings.d.ts'

Bar hiding before time

I'm submitting a ...
[ ] bug report
[x ] feature request
[ ] question about the decisions made in the repository

Hi guys,

First of all, thanks for library, is really helpful

But, I started using it now and realized the need to pause before finishing.
That is because my server can responding after the bar is complete. And that is not an expected behavior.

To make that work on my project, I changed:
if (_this.progress === 100) {
_this.complete();
}
to:
if (_this.progress === 95) {
_this.stop();
}
And I force myself to use the "slimLoader.complete()" when request is finish.

I hope not offending, but in my experience, that is necessary.

Thanks for attention.

I am getting following error when 'npm start' is run

ERROR in ./src/main.browser.ts
Module build failed: Error: Cannot resolve module 'ng2-toasty/ng2-toasty'

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.