Code

Discussion on Serverless Angular 2 - Bootstrap 4 Web App Template Starter with Membership

Discussion on Serverless Angular 2 - Bootstrap 4 Web App Template Starter with Membership

Cart 25 sales

appeality supports this item

Supported

This author's response time can be up to 2 business days.

15 comments found.

hi , i want to buy if you answer my question, do you have road map? share if possible? do you have a plan token refresh mechanism implementation? if yes , time frame, i will buy and wait for that …

Hi, your app is great but after adding dependencies “ng2-chartjs2” and start npm I see these errors / warnings, some solutions? thanks

Following previous comments I added ng2-chartjs2 to dependencies.

While I manage to compile it successfully, only SPLASH PAGE IS LOADING: Cloud First Serverless App Template

How do I load the content and set AWS Cognito variables?

Hello. You need to set the Cognito settings in the global-cognito-util.service.ts file

HI,

There is another test I run on WINDOWS 10 using the latest download for Windows 7.10. from nodejs.org

After installing the node-v7.10.0-x64.msi I unzipped your files in filder and run: npm install

subsequently I run:

ng serve

THE FOLLOWING ERRORS OCCUR:

| +—rxjs@5.0.0-beta.12 | +—systemjs@0.19.40 | | `—when@3.7.8 | `—zone.js@0.7.4 +—web-animations-js@2.2.5 `—zone.js@0.7.8

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.0.0 (node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {os“} (current: {os“}) npm WARN ng-bootstrap/<redpre#7> requires a peer of @angular/core4.0.3 but none was installed. npm WARN ng-bootstrap/<redpre#8> requires a peer of @angular/common4.0.3 but none was installed. npm WARN ng-bootstrap/<redpre#9> requires a peer of @angular/forms4.0.3 but none was installed. npm WARN angular/<redpre#10> requires a peer of typescript2.1.5 but none was installed. npm WARN tsickle@0.21.6 requires a peer of typescript@2.1.0 but none was installed.

C:\Users\Robd\Downloads\norb\serverless> C:\Users\Robd\Downloads\norb\serverless> C:\Users\Robd\Downloads\norb\serverless>ng serve Your global Angular CLI version (1.0.2) is greater than your local version (1.0.0-rc.2). The local Angular CLI version is used.

To disable this warning use “ng set—global warnings.versionMismatch=false”.
  • NG Live Development Server is running on http://localhost:4200 ** Hash: b870e567c22c1209677c Time: 16126ms chunk {0} main.bundle.js, main.bundle.js.map (main) 227 kB {3} initial chunk {1} styles.bundle.js, styles.bundle.js.map (styles) 307 kB {4} initial chunk {2} scripts.bundle.js, scripts.bundle.js.map (scripts) 208 kB {4} initial chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.24 MB initial chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes entry

ERROR in Error encountered resolving symbol values statically. Could not resolve ng2-chartjs2 relative to C:/Users/Robd/Downloads/norb/serverless/src/app/features/basic-charts/basic-charts.module.ts., resolving symbol BasicChartsModule in C:/Users/Robd/Downloads/norb/serverless/src/app/features/basic-charts/basic-charts.module.ts, resolving symbol BasicChartsModule in C:/Users/Robd/Downloads/norb/serverless/src/app/features/basic-charts/basic-charts.module.ts

ERROR in C:/Users/Robd/Downloads/norb/serverless/src/app/features/basic-charts/basic-charts.module.ts (3,37): Cannot find module ‘ng2-chartjs2’.)

ERROR in ./src/app/features/basic-charts/basic-charts.module.ts Module not found: Error: Can’t resolve ‘ng2-chartjs2’ in ‘C:\Users\Robd\Downloads\norb\serverless\src\app\features\basic-charts’ @ ./src/app/features/basic-charts/basic-charts.module.ts 12:0-46 @ ./src/app/features/basic-charts/index.ts @ ./src/app/app.module.ts @ ./src/app/index.ts @ ./src/main.ts @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in C:/Users/Robd/Downloads/norb/serverless/src/app/features/basic-charts/basic-bar-chart/basic-bar-chart.component.ts (2,37): Cannot find module ‘ng2-chartjs2’.)

ERROR in C:/Users/Robd/Downloads/norb/serverless/src/app/features/basic-charts/basic-line-chart/basic-line-chart.component.ts (2,37): Cannot find module ‘ng2-chartjs2’.)

ERROR in C:/Users/Robd/Downloads/norb/serverless/src/app/features/basic-charts/basic-bubble-chart/basic-bubble-chart.component.ts (2,37): Cannot find module ‘ng2-chartjs2’.) webpack: Failed to compile.

What is the solution?

Hello. I am glad you were able to compile after adding ng2-chartjs2 to the dependencies

HI,

I’m running into problems, it looks like you are using OLD version of ANGULAR CLI, How can this be resolved? Your global Angular CLI version (1.0.2) is greater than your local version (1.0.0-rc.2). The local Angular CLI version is used.

ng serve --host 0.0.0.0 --port 4201
To disable this warning use “ng set—global warnings.versionMismatch=false”.
  • NG Live Development Server is running on http://0.0.0.0:4201 ** Hash: de7f5640497e3258fc03 Time: 20027ms chunk {0} main.bundle.js, main.bundle.js.map (main) 223 kB {3} initial chunk {1} styles.bundle.js, styles.bundle.js.map (styles) 307 kB {4} initial chunk {2} scripts.bundle.js, scripts.bundle.js.map (scripts) 208 kB {4} initial chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.23 MB initial chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes entry

ERROR in Error encountered resolving symbol values statically. Could not resolve ng2-chartjs2 relative to /var/www/html/cognitorangular/src/app/features/basic-charts/basic-charts.module.ts., resolving symbol BasicChartsModule in /var/www/html/cognitorangular/src/app/features/basic-charts/basic-charts.module.ts, resolving symbol BasicChartsModule in /var/www/html/cognitorangular/src/app/features/basic-charts/basic-charts.module.ts

ERROR in /var/www/html/cognitorangular/src/app/features/basic-charts/basic-charts.module.ts (3,37): Cannot find module ‘ng2-chartjs2’.)

ERROR in ./src/app/features/basic-charts/basic-charts.module.ts Module not found: Error: Can’t resolve ‘ng2-chartjs2’ in ’/var/www/html/cognitorangular/src/app/features/basic-charts’ @ ./src/app/features/basic-charts/basic-charts.module.ts 12:0-46 @ ./src/app/features/basic-charts/index.ts @ ./src/app/app.module.ts @ ./src/app/index.ts @ ./src/main.ts @ multi webpack-dev-server/client?http://0.0.0.0:4201 ./src/main.ts

ERROR in /var/www/html/cognitorangular/src/app/features/basic-charts/basic-bar-chart/basic-bar-chart.component.ts (2,37): Cannot find module ‘ng2-chartjs2’.)

ERROR in /var/www/html/cognitorangular/src/app/features/basic-charts/basic-line-chart/basic-line-chart.component.ts (2,37): Cannot find module ‘ng2-chartjs2’.)

ERROR in /var/www/html/cognitorangular/src/app/features/basic-charts/basic-bubble-chart/basic-bubble-chart.component.ts (2,37): Cannot find module ‘ng2-chartjs2’.) webpack: Failed to compile.

Hi, you should update the Angular CLI version from in the package.json. Follow the steps outline on the Angular CLI Github https://github.com/angular/angular-cli#updating-angular-cli

This template is great. The question I have is, If I purchase this would it be possible to integrate this with firebase instead of AWS? I have good knowledge of AngularJS2 and Firebase.

The membership module uses AWS, and its tightly integrated with the template. The idea is that you would seamlessly use other AWS services by using the integrated membership module as the foundation.

For this template, I would recommend using AWS services, instead of Firebase

For example:
  • Map the authenticated user’s ID to a hash key in DynamoDB to retrieve, update, delete items on behalf of that user
  • Create an S3 bucket for a specific user based on their authenticated credentials
  • Restrict access to API Gateway based on the authenticated user by using your User Pool as a custom authorizer
  • etc.

THANK YOU FOR QUICK SUPPORT, I just needed to add “ng2-chartjs2”: “^1.0.3”, to package.json to get webpack to compile. AWESOME SUPPORT, Thanks!!!

It looks like the package.json was missing some dependencies after the Angular CLI update. An update is pending with the fixes, but private message me and I can send you a link to the updated files. Get yours working correctly by:

- Cleaning out your node_modules cache as described here: https://github.com/angular/angular-cli#updating-angular-cli

- Replace your package.json with the following:

{
  "name": "cloud-first-serverless-app-kit",
  "version": "1.0.0",
  "license": "None",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e" 
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.18",
    "angular-calendar": "^0.6.2",
    "angular-sortablejs": "^1.3.1",
    "angular2-infinite-scroll": "^0.2.8",
    "angular2-masonry": "^0.4.0",
    "angular2-signaturepad": "^2.2.0",
    "angular2-simple-countdown": "0.0.6",
    "aws-sdk": "^2.7.19",
    "bootstrap": "^4.0.0-alpha.6",
    "chart.js": "^2.4.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "localforage": "^1.4.3",
    "lodash": "^4.17.3",
    "moment": "^2.16.0",
    "ng2-img-cropper": "^0.7.7",
    "reflect-metadata": "^0.1.9",
    "rxjs": "^5.2.0",
    "uuid": "^3.0.1",
    "videogular2": "^3.2.1",
    "web-animations-js": "^2.2.2",
    "zone.js": "^0.7.6" 
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.2",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.0.0" 
  }
}

Let me know if you have any other issues with setting up your environment. I do recommend Visual Studio code, as it handles Typescript (used by Angular 2+) well.

You might see peer dependency warnings during the setup: You can either 1. ignore those warnings because the dependencies are being installed 2. or install the dependencies first, separately

The update has been approved and you should have received the updated package.

I had following installation problems: > node -v v7.7.4

> npm -v 4.1.2

> npm install -g @angular/cli This was OK, no errors

> npm install npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch okidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@ 1.1.1: wanted {os“} (current: {os“} ) npm WARN codelyzer@1.0.0-beta.4 requires a peer of angular/compiler2.2.0 but none was installed. npm WARN codelyzer@1.0.0-beta.4 requires a peer of angular/core2.2.0 but none was installed.

> ng serve ... C:/Users/me/WebstormProjects/angular2envato/node_modules/@types/lodash/index.d.t s (19339,21): Cannot find namespace ’_’. C:/Users/me/WebstormProjects/angular2envato/node_modules/@types/lodash/index.d.t s (19507,15): All declarations of ‘WeakMap’ must have identical type parameters.

C:/Users/me/WebstormProjects/angular2envato/node_modules/@types/lodash/index.d.t s (19507,33): Cannot find name ‘object’. webpack: Failed to compile.

Firefox browser localhosst 4200 cannot GET /

This looks like it might be a problem with your IDE configuration and how it is handling typings. Have you tried building in a different IDE, such as VS Code?

I suggest you try that and see if you still experience issues.

Looking into this…

HI,

I’ve installed your script with node 6.10.0 and npm 3.10.10 as per latest Windows 10 installation.

However there are errors in your script as described below. Please advise:

I installed on my Windows 10 machine the current NODE:

1) downloaded and installed NODE:

https://nodejs.org/dist/v6.10.0/node-v6.10.0-x64.msi

node -v v6.10.0

npm -v 3.10.10

========

2) opened CMD and installed angular/cli as per https://cli.angular.io/:

npm install -g @angular/cli

===========

3) in your folder, on my server: C:\Users\Robd\Desktop\serverless\cloud-first-serverless-app-kit

npm install

all looked OK, but at the bottom was: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\@angular\cli\node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {os“} (current: {os“})

4) ng serve

C:\Users\Robd\Desktop\serverless\cloud-first-serverless-app-kit>ng serve The package “angular-cli” has been renamed to ”@angular/cli”. The old package will be deprecated soon.

Please take the following steps to avoid issues: “npm uninstall—save angular-cli” “npm uninstall—save-dev angular-cli” “npm install—save-dev @angular/cli@latest”

Environment configuration does not contain “environmentSource” entry.

A new environmentSource entry replaces the previous source entry inside environments.

To migrate angular-cli.json follow the example below:

Before:

“environments”: { “source”: “environments/environment.ts”, “dev”: “environments/environment.ts”, “prod”: “environments/environment.prod.ts” }

After:

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

Hello I am glad you were able to get it installed with your current version of Node and NPM. I have updated the tooling to account for the latest version of the angular CLI which is 1.0.0-rc.2. You should upgrade your Node version to the latest 7.4.0, and npm to 3.10.5 to avoid any issues with tooling.

I am submitting the attached update to Code Canyon.

Regarding Cognito, everything you need to setup registration, login, password recovery, etc is already configured in the template code. When you are ready to build out user data operations using the tokens retrieved from Cognito, I recommend looking into the documentation.http://docs.aws.amazon.com/cognito/latest/developerguide/using-amazon-cognito-user-identity-pools-javascript-examples.html

Hi, actually 6.10.0 FAILED TO COMPILE: ERROR in ./src/main.ts Module build failed: TypeError: Cannot read property ‘newLine’ of undefined at Object.getNewLineCharacter (C:\Users\Robd\Desktop\serverless\cloud-first-serverless-app-kit\node_modules\typescript\lib\typescript.js:8062:20) at Object.createCompilerHost (C:\Users\Robd\Desktop\serverless\cloud-first-serverless-app-kit\node_modules\typescript\lib\typescript.js:44978:26) at Object.ngcLoader (C:\Users\Robd\Desktop\serverless\cloud-first-serverless-app-kit\node_modules\@ngtools\webpack\src\loader.js:338:33) @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts webpack: Failed to compile.

Is there any way of using NODE 6.10.0 and NPM 3.10.0 with your script?

I understand your error above, but I don’t believe the issue is the node version. The update is working after updating the config and updating to the latest version of the CLI.

If you cannot wait for the update, try following the steps here to update the angular-cli version to the latest release https://github.com/angular/angular-cli#updating-angular-cli

Regarding the node version, the Angular team recommends using the latest version of node for development. Remember node is only used for design time tooling. If you are using Node as a back-end server, you can use whatever version you like. The node version here is only applicable to properly building and packaging the front end app.

I have everything else up and running and accepting membership, but how can I get the membership to work so that only logged in members can view content?

You should take a look at Angular 2 navigation, specifically the navigation guards on components: https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

Also, have a look at how to retrieve a user with AWS Cognito User pools. Once you have the user, you can verify the session, then show the content.

http://docs.aws.amazon.com/cognito/latest/developerguide/using-amazon-cognito-user-identity-pools-javascript-examples.html

Cool! Good luck with sales!!!

Thanks!

Is the project build with Angular CLI?

Yes, the latest version of Angular CLI. Also, each feature is standalone with its own ng module and router module.

Dream on and achieve on. DigitalCenturySF

Thanks!

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey