caroso1222 / angular2-shop Goto Github PK

🍒 A fancy, minimal, responsive shop made on Angular 2

Home Page: https://carlosroso.com/angular2-shop

License: MIT License

TypeScript 42.21% JavaScript 2.74% HTML 17.32% CSS 37.72%

angular2-shop's Introduction

Angular 2 Shop

This is an implementation of a fancy, responsive, cross browser compatible (IE11) shop/ecommerce webapp built on Angular.

Demo: carlosroso.com/angular2-shop

Features

Sort products by name, price (asc) and price (desc)
Instant search by product name
Filter products by categories, price range, availability, and more custom filters.
Add products to the shopping cart
See details and manage the shopping cart
You can also load your own data through the app. You'll see a red button with a link icon, click it and paste the URL. The JSON file must follow a specific format. see example here. IMPORTANT: Make sure you set the appropriate Access-Control-Allow-Methods header on your JSON HTTP response.
Angular 6 compatible
Pretty good looking UI and some fancy animations to improve UX

Installation

Clone the project

git clone https://github.com/caroso1222/angular2-shop

Install npm dependencies inside the project folder

cd angular2-shop
npm install

Make sure you have angular-cli installed. I'll try to keep this project updated with the latest angular-cli version.

npm install -g angular-cli

Start the application

ng serve

Now open a new tab at localhost:4200.

Contributing

This project was generated with angular-cli version 1.0.0-beta.15.

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.

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.

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.

angular2-shop's People

Stargazers

Watchers

angular2-shop's Issues

Hi

Hello Caroso,

This is Swadesh (ShopNx). Could not find your email. Hence contacting you this way.
I am working on Javascript e-commerce (ShopNx) http://mshop.codenx.com/

I am really impressed with the ui of your ecommerce app. I thought if you have time together we could make a much better product.

Contact me at [email protected]

Getting Weird Error on ng serve

I cloned the project, went into the dir and ran npm install and I am getting this error:

Versions of @angular/compiler-cli and typescript could not be determined.
The most common reason for this is a broken npm install.

Please make sure your package.json contains both @angular/compiler-cli and typescript in
devDependencies, then delete node_modules and package-lock.json (if you have one) and
run npm install again.

I've tried looking around the net for anyone having similar problem, and cannot find anyone else with this error message. Any ideas?

Hi Caroso, Tried your solution, stuck at one thing

Product thumbnail not showing properly

Product thumbnails are looking weird in my development server. View Details and Cart Option are not showing properly within the thumbnail.
Image Link : http://imgur.com/a/tTjcB

Using the latest angular/cli. Below is my package.json =>

package.json

package,json.txt

angular-cli.json

{
"project": {
"version": "1.0.0-beta.15",
"name": "angular2-store"
},
"apps": [{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.sass"
],
"scripts": [],

"environmentSource": "environments/environment.ts",
"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

}],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "sass",
"prefixInterfaces": false
}
}

Looking forward to your help. Other than this issue, the site looks amazing !

Hi, need little help

Can you help me with this :

https://stackoverflow.com/questions/49244379/angular-5-checkbox-filter-data

webpack: Failed to compile.

Hi Caroso
I tried to run your application after (npm install) however, I get these bunch of errors; I think the configuration or the packages are not up to date. it will be very helpful if you update this project.

Thanks

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:113:37
A parameter initializer is only allowed in a function or constructor implementation.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:113:45
Cannot find name 'keyof'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:113:51
'=' expected.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:121:45
A parameter initializer is only allowed in a function or constructor implementation.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:121:55
Cannot find name 'keyof'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:121:61
'=' expected.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:137:41
Cannot find name 'Partial'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:182:21
Cannot find name 'Partial'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:182:34
Cannot find name 'Partial'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:551:12
Invalid use of 'arguments'. Modules are automatically in strict mode.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:614:6
A computed property name must be of type 'string', 'number', 'symbol', or 'any'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:614:7
Cannot find name 'k'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:614:12
Cannot find name 'keyof'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:614:18
']' expected.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:614:18
Cannot find name 'T'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:614:19
';' expected.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:614:20
Declaration or statement expected.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:614:22
Cannot find name 'Spy'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:619:23
Cannot find name 'Spy'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:621:31
Cannot find name 'Spy'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:623:40
Cannot find name 'Spy'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:625:32
Cannot find name 'Spy'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:627:33
Cannot find name 'Spy'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:629:16
Cannot find name 'Spy'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:668:36
Cannot find name 'Reporter'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:674:20
Cannot find name 'RunDetails'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:678:18
Cannot find name 'Suite'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:679:32
Cannot find name 'SuiteOrSpec'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:688:14
Cannot find name 'Spec'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:689:15
Cannot find name 'Clock'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:693:29
Cannot find name 'HtmlReporter'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:694:31
Cannot find name 'HtmlSpecFilter'.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:697:0
Declaration or statement expected.

ERROR in [default] /Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index.d.ts:702:25
Module '"/Users/Saber/Desktop/angular2-shop/node_modules/@types/jasmine/index".jasmine' has no exported member 'Jasmine'.
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 3.09 kB 0
webpack: Failed to compile.