//////////////////////////////////
Install the Angular CLI
/////////////////////////////////
npm install -g @angular/cli
//////////////////////////////////
Create a workspace and initial application
/////////////////////////////////
ng new my-app
//////////////////////////////////
Run the application
/////////////////////////////////
cd my-app
ng serve --open
###################################################################################
//////////////////////////////////
Install bootstrap and jquery:
/////////////////////////////////
npm install jquery --save
npm install bootstrap --save
//////////////////////////////////////////////////////
Setting jquery and bootstrap in the angular.json
/////////////////////////////////////////////////////
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
////////////////////////////////////////////////////// End /////////////////////////////////////////////////////
{path: "engineer-list", component :EngineerListComponent},
import { EngineerListComponent } from './dashboard/internal/engineer-list/engineer-list.component';
ng generate component
ng generate module
ng generate service
ng g c product-add --skipTests=true
ng generate service demo/demo
ng serve
---------------------------------------
Use the following command to generate 3 Angular Components:
ng g c product-add --skipTests=true
ng g c product-get --skipTests=true
ng g c product-edit --skipTests=true
npm install ng2-slim-loading-bar --save
ng g c user --skipTests=true
ng g c user/user-add --skipTests=true
ng g c user/user-edit --skipTests=true
ng g c user/user-delete --skipTests=true
ng g c user/user-veiw --skipTests=true
----------------------------------------------
ng add @angular/material
/////////////////////////////////////////////////////////////////////////////////////////////////
How to install new workspace/project
////////////////////////////////////////////////////////////////////////////////////////////////
C:\xampp\htdocs\angular>ng new angular-school
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE angular-school/angular.json (3631 bytes)
CREATE angular-school/package.json (1291 bytes)
CREATE angular-school/README.md (1030 bytes)
CREATE angular-school/tsconfig.json (543 bytes)
CREATE angular-school/tslint.json (1953 bytes)
CREATE angular-school/.editorconfig (246 bytes)
CREATE angular-school/.gitignore (631 bytes)
CREATE angular-school/browserslist (429 bytes)
CREATE angular-school/karma.conf.js (1026 bytes)
CREATE angular-school/tsconfig.app.json (210 bytes)
CREATE angular-school/tsconfig.spec.json (270 bytes)
CREATE angular-school/src/favicon.ico (948 bytes)
CREATE angular-school/src/index.html (299 bytes)
CREATE angular-school/src/main.ts (372 bytes)
CREATE angular-school/src/polyfills.ts (2835 bytes)
CREATE angular-school/src/styles.css (80 bytes)
CREATE angular-school/src/test.ts (753 bytes)
CREATE angular-school/src/assets/.gitkeep (0 bytes)
CREATE angular-school/src/environments/environment.prod.ts (51 bytes)
CREATE angular-school/src/environments/environment.ts (662 bytes)
CREATE angular-school/src/app/app-routing.module.ts (246 bytes)
CREATE angular-school/src/app/app.module.ts (393 bytes)
CREATE angular-school/src/app/app.component.html (25755 bytes)
CREATE angular-school/src/app/app.component.spec.ts (1083 bytes)
CREATE angular-school/src/app/app.component.ts (218 bytes)
CREATE angular-school/src/app/app.component.css (0 bytes)
CREATE angular-school/e2e/protractor.conf.js (808 bytes)
CREATE angular-school/e2e/tsconfig.json (214 bytes)
CREATE angular-school/e2e/src/app.e2e-spec.ts (647 bytes)
CREATE angular-school/e2e/src/app.po.ts (301 bytes)
√ Packages installed successfully.
'git' is not recognized as an internal or external command,
operable program or batch file.
/////////////////////////////////////////////////////////////////////////////////////////////////
How to install bootstrap
////////////////////////////////////////////////////////////////////////////////////////////////
C:\xampp\htdocs\angular\angular-school>npm install bootstrap --save
npm WARN bootstrap@4.5.0 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.5.0 requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ bootstrap@4.5.0
added 1 package from 2 contributors and audited 1348 packages in 46.074s
36 packages are looking for funding
run `npm fund` for details
found 3 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
/////////////////////////////////////////////////////////////////////////////////////////////////
How to install jquery
////////////////////////////////////////////////////////////////////////////////////////////////
C:\xampp\htdocs\angular\angular-school>npm install jquery --save
npm WARN bootstrap@4.5.0 requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ jquery@3.5.1
added 1 package from 1 contributor in 19.846s
36 packages are looking for funding
run `npm fund` for details
/////////////////////////////////////////////////////////////////////////////////////////////////
How to install Ng2-Image Viewer
////////////////////////////////////////////////////////////////////////////////////////////////
This component allows you to:
Show images and PDF files, you can navigate through it;
You can load URL images, Base64 images and pdf;
Rotate each image as you wish;
Download images and PDF files (no additional configuration required);
Zoom in and out;
Fullscreen your files;
Fully responsive design
----------------------------
https://www.npmjs.com/package/ng2-image-viewer
$ npm install iv-viewer --save
$ npm install ng2-image-viewer --save
npm install iv-viewer --save
npm WARN bootstrap@4.5.0 requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ iv-viewer@2.0.1
added 1 package from 1 contributor and audited 1453 packages in 68.277s
42 packages are looking for funding
run `npm fund` for details
found 3 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
---------------------
npm install ng2-image-viewer --save
npm WARN bootstrap@4.5.0 requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng2-image-viewer@3.0.5 requires a peer of @angular/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng2-image-viewer@3.0.5 requires a peer of rxjs@^5.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng2-image-viewer@3.0.5 requires a peer of zone.js@^0.8.4 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ ng2-image-viewer@3.0.5
added 1 package from 1 contributor in 21.238s
42 packages are looking for funding
run `npm fund` for details
############################## End ###################################
npm install bootstrap --save
npm install jquery --save
npm install --save bootstrap
npm i jquery@3.4.1
npm install --save @types/jquery
npm install popper.js --save
--------------------------------------------------------------
C:\xampp\htdocs\angular\AngularDemo>ng g c product/product-add --skipTests=true
CREATE src/app/product/product-add/product-add.component.html (26 bytes)
CREATE src/app/product/product-add/product-add.component.ts (294 bytes)
CREATE src/app/product/product-add/product-add.component.css (0 bytes)
UPDATE src/app/app.module.ts (1092 bytes)
C:\xampp\htdocs\angular\AngularDemo>ng g c product/product-view --skipTests=true
CREATE src/app/product/product-view/product-view.component.html (27 bytes)
CREATE src/app/product/product-view/product-view.component.ts (298 bytes)
CREATE src/app/product/product-view/product-view.component.css (0 bytes)
UPDATE src/app/app.module.ts (1204 bytes)
C:\xampp\htdocs\angular\AngularDemo>ng g c product/product-edit --skipTests=true
CREATE src/app/product/product-edit/product-edit.component.html (27 bytes)
CREATE src/app/product/product-edit/product-edit.component.ts (298 bytes)
CREATE src/app/product/product-edit/product-edit.component.css (0 bytes)
UPDATE src/app/app.module.ts (1316 bytes)
C:\xampp\htdocs\angular\AngularDemo>ng g service product/product-service --skipTests=true
CREATE src/app/product/product-service.service.ts (143 bytes)
C:\xampp\htdocs\angular\AngularDemo>ng g class product/product-class --skipTests=true
CREATE src/app/product/product-class.ts (30 bytes)