sd4-github commented 1 year ago

angular update

prerequisite: latest LTS of nodejs and npm

48

npm install -g @angular/cli

soumikd4@soumik-inspiron3542:~/code/mycart$ sudo npm install -g @angular/cli
[sudo] password for soumikd4: 
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs

added 239 packages in 38s

30 packages are looking for funding
  run `npm fund` for details

soumikd4@soumik-inspiron3542:~/code/mycart$ ng version
? Would you like to enable autocompletion? This will set up your terminal 
so pressing TAB while typing Angular CLI commands will show possible 
options and autocomplete arguments. (Enabling autocompletion will modify 
configuration files in your home directory.) Yes
Appended `source <(ng completion script)` to `/home/soumikd4/.bashrc`. Restart your terminal or run the following to autocomplete `ng` commands:

    source <(ng completion script)
? Would you like to share pseudonymous usage data about this project with 
the Angular Team
at Google under Google's Privacy Policy at 
https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. 
Yes

Thank you for sharing pseudonymous usage data. Should you change your mind, the following
command will disable this feature entirely:

    ng analytics disable --global

Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 15.2.6
Node: 18.16.0
Package Manager: npm 9.5.1
OS: linux x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1502.6 (cli-only)
@angular-devkit/core         15.2.6 (cli-only)
@angular-devkit/schematics   15.2.6 (cli-only)
@schematics/angular          15.2.6 (cli-only)

sd4-github commented 1 year ago

outdated dependencies

soumikd4@soumik-inspiron3542:~/code/mycart/mycart_project$ ng update
Using package manager: npm
Collecting installed dependencies...
Found 0 dependencies.
    We analyzed your package.json, there are some packages to update:

      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cdk                       8.2.3 -> 9.2.4           ng update @angular/cdk@9
      @angular/cli                       8.3.29 -> 9.1.9          ng update @angular/cli@9
      @angular/core                      8.2.14 -> 9.1.9          ng update @angular/core@9
      @angular/material                  8.2.3 -> 9.2.4           ng update @angular/material@9

    There might be additional packages which don't provide 'ng update' capabilities that are outdated.
    You can update the additional packages by running the update command of your package manager.
soumikd4@soumik-inspiron3542:~/code/mycart/mycart_project$ npm outdated
Package                            Current  Wanted  Latest  Location  Depended by                                                     
@angular/animations                MISSING  8.2.14  15.2.7  -         mycart_project                                                  
@angular/cdk                       MISSING   8.2.3  15.2.7  -         mycart_project                                                  
@angular/common                    MISSING  8.2.14  15.2.7  -         mycart_project                                                  
@angular/compiler                  MISSING  8.2.14  15.2.7  -         mycart_project                                                  
@angular/core                      MISSING  11.0.9  15.2.7  -         mycart_project                                                  
@angular/forms                     MISSING  8.2.14  15.2.7  -         mycart_project                                                  
@angular/material                  MISSING   8.2.3  15.2.7  -         mycart_project                                                  
@angular/platform-browser          MISSING  8.2.14  15.2.7  -         mycart_project                                                  
@angular/platform-browser-dynamic  MISSING  8.2.14  15.2.7  -         mycart_project                                                  
@angular/router                    MISSING  8.2.14  15.2.7  -         mycart_project                                                  
angular-cli-ghpages                MISSING   0.6.2   1.0.5  -         mycart_project                                                  
bootstrap                          MISSING   4.6.2   5.2.3  -         mycart_project                                                  
hammerjs                           MISSING   2.0.8   2.0.8  -         mycart_project                                                  
ng2-search-filter                  MISSING   0.5.1   0.5.1  -         mycart_project
ngx-pagination                     MISSING   5.1.1   6.0.3  -         mycart_project
path                               MISSING  0.12.7  0.12.7  -         mycart_project
rxjs                               MISSING   6.4.0   7.8.0  -         mycart_project
tslib                              MISSING  1.14.1   2.5.0  -         mycart_project
zone.js                            MISSING   0.9.1  0.13.0  -         mycart_project

sd4-github commented 1 year ago

ncu -u

soumikd4@soumik-inspiron3542:~/code/mycart/mycart_project$ ncu -u
Upgrading /home/soumikd4/code/mycart/mycart_project/package.json
[====================] 38/38 100%

 @angular-devkit/build-angular      ~0.803.23  →    ~15.2.6
 @angular/animations                  ~8.2.14  →    ~15.2.7
 @angular/cdk                          ~8.2.3  →    ~15.2.7
 @angular/cli                         ~8.3.23  →    ~15.2.6
 @angular/common                      ~8.2.14  →    ~15.2.7
 @angular/compiler                    ~8.2.14  →    ~15.2.7
 @angular/compiler-cli                ~8.2.14  →    ~15.2.7
 @angular/core                        ~11.0.5  →    ~15.2.7
 @angular/forms                       ~8.2.14  →    ~15.2.7
 @angular/language-service            ~8.2.14  →    ~15.2.7
 @angular/material                     ^8.2.3  →    ^15.2.7
 @angular/platform-browser            ~8.2.14  →    ~15.2.7
 @angular/platform-browser-dynamic    ~8.2.14  →    ~15.2.7
 @angular/router                      ~8.2.14  →    ~15.2.7
 @types/jasmine                        ~3.3.8  →     ~4.3.1
 @types/jasminewd2                     ~2.0.3  →    ~2.0.10
 @types/node                           ~8.9.4  →  ~18.15.11
 angular-cli-ghpages                   ^0.6.2  →     ^1.0.5
 bootstrap                             ^4.4.1  →     ^5.2.3
 codelyzer                             ^5.0.0  →     ^6.0.2
 jasmine-core                          ~3.4.0  →     ~4.6.0
 jasmine-spec-reporter                 ~4.2.1  →     ~7.0.0
 karma                                ~6.3.16  →     ~6.4.1
 karma-chrome-launcher                 ~2.2.0  →     ~3.1.1
 karma-coverage-istanbul-reporter      ~2.0.1  →     ~3.0.3
 karma-jasmine                         ~2.0.1  →     ~5.1.0
 karma-jasmine-html-reporter           ^1.4.0  →     ^2.0.0
 ngx-pagination                        ^5.0.0  →     ^6.0.3
 rxjs                                  ~6.4.0  →     ~7.8.0
 ts-node                               ~7.0.0  →    ~10.9.1
 tslib                                ^1.10.0  →     ^2.5.0
 tslint                               ~5.15.0  →    ~5.20.1
 typescript                            ~3.5.3  →     ~5.0.4
 zone.js                               ~0.9.1  →    ~0.13.0

Run npm install to install new versions.

sd4-github commented 1 year ago

ng serve

sd4-github commented 1 year ago

package.json update

{
  "name": "mycart",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~15.2.7",
    "@angular/cdk": "~15.2.7",
    "@angular/common": "~15.2.7",
    "@angular/compiler": "~15.2.7",
    "@angular/core": "~15.2.7",
    "@angular/forms": "~15.2.7",
    "@angular/material": "^15.2.7",
    "@angular/platform-browser": "~15.2.7",
    "@angular/platform-browser-dynamic": "~15.2.7",
    "@angular/router": "~15.2.7",
    "angular-cli-ghpages": "^1.0.5",
    "bootstrap": "^5.2.3",
    "hammerjs": "^2.0.8",
    "ng2-search-filter": "^0.5.1",
    "ngx-pagination": "^6.0.3",
    "path": "^0.12.7",
    "rxjs": "~7.8.0",
    "tslib": "^2.5.0",
    "typescript": "~4.8.2",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~15.2.6",
    "@angular/cli": "~15.2.6",
    "@angular/compiler-cli": "~15.2.7",
    "@angular/language-service": "~15.2.7",
    "@types/node": "~18.15.11",
    "@types/jasmine": "~4.3.1",
    "@types/jasminewd2": "~2.0.10",
    "codelyzer": "^6.0.2",
    "jasmine-core": "~4.6.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
    "protractor": "^7.0.0",
    "ts-node": "~10.9.1",
    "tslint": "~5.20.1",
    "typescript": "~4.8.2"
  }
}

potractor

sd4-github commented 1 year ago

An unhandled exception occurred: The 'buildOptimizer' option cannot be used without 'aot'

https://stackoverflow.com/questions/68774226/an-unhandled-exception-occurred-the-buildoptimizer-option-cannot-be-used-with

aot

sd4-github commented 1 year ago

Type 'string' is not assignable to type 'LoadChildrenCallback'

https://stackoverflow.com/questions/70313032/type-string-is-not-assignable-to-type-loadchildrencallback

from this:

{ path: 'Supplier', loadChildren: '../Supplier/CustomerApp.SupplierModule#CustomerAppSupplierModule' },

to this:

{ 
   path: 'Supplier',
   loadChildren: () => import('../Supplier/CustomerApp.SupplierModule').then(x => x.CustomerAppSupplierModule)
},

lazy loading modern style

lazy-loading

sd4-github commented 1 year ago

error:

soumikd4@soumik-inspiron3542:~/code/mycart/mycart_project$ ng serve
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************
One or more browsers which are configured in the project's Browserslist configuration will be ignored as ES5 output is not supported by the Angular CLI.
Ignored browsers: kaios 2.5, op_mini all
⠋ Generating browser application bundles (phase: setup)...    TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility              
    NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.                                                    
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names                                                                   |  Raw Size | Estimated Transfer Size
main.js               | main                                                                    | 831.09 kB |               189.76 kB
styles.css, styles.js | styles                                                                  | 225.21 kB |                38.53 kB
polyfills.js          | polyfills                                                               | 164.81 kB |                42.79 kB
runtime.js            | runtime                                                                 |   2.73 kB |                 1.28 kB

                      | Initial Total                                                           |   1.20 MB |               272.36 kB

Lazy Chunk Files      | Names                                                                   |  Raw Size | Estimated Transfer Size
528.js                | components-dashboard-dashboard-dashboard-module                         |  14.21 kB |                 3.94 kB
common.js             | common                                                                  |   4.94 kB |               982 bytes
614.js                | components-response-reset-response-reset-response-reset-module          |   4.53 kB |                 1.49 kB
936.js                | components-home-home-home-module                                        |   4.11 kB |                 1.37 kB
538.js                | components-product-details-details-details-module                       |   4.10 kB |                 1.40 kB
117.js                | components-admin-admin-admin-module                                     |   3.61 kB |                 1.22 kB
593.js                | components-preorder-preorder-preorder-module                            |   3.53 kB |                 1.20 kB
242.js                | components-sign-up-signup-signup-module                                 |   3.20 kB |                 1.09 kB
12.js                 | components-order-details-order-details-order-details-module             |   2.87 kB |                 1.04 kB
697.js                | components-request-reset-request-reset-request-reset-module             |   2.80 kB |                 1.12 kB
467.js                | components-login-login-login-module                                     |   2.77 kB |                 1.09 kB
748.js                | components-cart-cart-cart-module                                        |   2.52 kB |                 1.00 kB
314.js                | components-admin-delete-user-admin-delete-user-admin-delete-user-module |   2.50 kB |              1016 bytes
308.js                | components-admin-product-admin-product-admin-product-module             |   2.45 kB |               989 bytes
588.js                | components-profile-profile-profile-module                               |   1.26 kB |               678 bytes
162.js                | components-admin-update-admin-update-admin-update-module                | 679 bytes |               388 bytes

Build at: 2023-04-15T20:18:48.428Z - Hash: 58cf5eaa93cff810 - Time: 77938ms

Error: src/app/app.module.ts:42:5 - error NG6002: 'Ng2SearchPipeModule' does not appear to be an NgModule class.

42     Ng2SearchPipeModule
       ~~~~~~~~~~~~~~~~~~~

  node_modules/ng2-search-filter/src/ng2-filter.module.d.ts:1:22
    1 export declare class Ng2SearchPipeModule {
                           ~~~~~~~~~~~~~~~~~~~
    This likely means that the library (ng2-search-filter) which declares Ng2SearchPipeModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.             

Error: src/app/components/cart/cart.component.html:28:50 - error TS2554: Expected 1 arguments, but got 0.

28     <button type="button" class="button" (click)=goCheckout()>Proceed To Chekout</button>
                                                    ~~~~~~~~~~

  src/app/components/cart/cart.component.ts:7:16
    7   templateUrl: './cart.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CartComponent.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

✖ Failed to compile.

sd4-github / mycart_project

upgrade project dependencies #41

angular update

prerequisite: latest LTS of nodejs and npm

48

npm install -g @angular/cli

outdated dependencies

ncu -u

ng serve

package.json update

An unhandled exception occurred: The 'buildOptimizer' option cannot be used without 'aot'

Type 'string' is not assignable to type 'LoadChildrenCallback'

from this:

to this:

lazy loading modern style

error: