Base solution for your next web application
Open Closed

Upgrade Angular from 8 to 9 #9932


User avatar
0
affern2 created

Prerequisites

Please answer the following questions before submitting an issue. YOU MAY DELETE THE PREREQUISITES SECTION.

  • What is your product version? 5.000
  • What is your product type (Angular or MVC)? Angular
  • What is product framework type (.net framework or .net core)? .net core 2.2

If issue related with ABP Framework

  • What is ABP Framework version? ABP: 3.8.2 and "abp-ng2-module": "3.2.4",

What do I have to do to upgrade Angular to v9?

I have just upgraded from Angular 7 to Angular 8 and that went smooth. But when I try to upgrade from 8 to 9 (https://update.angular.io/?v=8.2-9.0) , I get errors. From the log:

0 info it worked if it ends with ok 1 verbose cli [ 1 verbose cli 'C:\Program Files\nodejs\node.exe', 1 verbose cli 'C:\Users\bruker\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js', 1 verbose cli 'start' 1 verbose cli ] 2 info using [email protected] 3 info using [email protected] 4 verbose run-script [ 'prestart', 'start', 'poststart' ] 5 info lifecycle [email protected]~prestart: [email protected] 6 info lifecycle [email protected]~start: [email protected] 7 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true 8 verbose lifecycle [email protected]~start: PATH: C:\Users\bruker\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;####\angular\node_modules.bin;C:\Users\bruker\AppData\Roaming\npm;C:\Program Files\nodejs;C:\Python38\Scripts;C:\Python38;C:\Program Files (x86)\Intel\iCLS Client;C:\Program Files (x86)\Razer Chroma SDK\bin;C:\Program Files\Razer Chroma SDK\bin;C:\Program Files\Intel\iCLS Client;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\Common Files\lenovo\easyplussdk\bin;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Program Files\dotnet;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn;C:\Program Files\Microsoft SQL Server\130\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\130\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn\ManagementStudio;C:\Program Files\Git\cmd;C:\Program Files (x86)\Yarn\bin;C:\WINDOWS\system32\config\systemprofile\AppData\Local\Microsoft\WindowsApps;;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\WINDOWS\System32\OpenSSH;c:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;c:\Program Files\Intel\Intel(R) Management Engine Components\DAL;c:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;c:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\nodejs;C:\ProgramData\chocolatey\bin;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn;C:\Program Files (x86)\dotnet;C:\Users\bruker\AppData\Local\Microsoft\WindowsApps;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\bruker\AppData\Local\Yarn\bin;C:\Users\bruker.dotnet\tools;C:\Users\bruker\AppData\Roaming\npm;C:\Users\bruker\AppData\Local\GitHubDesktop\bin;C:\Users\bruker\AppData\Local\Microsoft\WindowsApps 9 verbose lifecycle [email protected]~start: CWD: #######\angular 10 silly lifecycle [email protected]~start: Args: [ '/d /s /c', 'ng serve --host 0.0.0.0 --port 4200' ] 11 info lifecycle [email protected]~start: Failed to exec start script 12 verbose stack Error: [email protected] start: ng serve --host 0.0.0.0 --port 4200 12 verbose stack spawn ENOENT 12 verbose stack at ChildProcess.<anonymous> (C:\Users\bruker\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:48:18) 12 verbose stack at ChildProcess.emit (events.js:310:20) 12 verbose stack at maybeClose (internal/child_process.js:1021:16) 12 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5) 13 verbose pkgid [email protected] 14 verbose cwd #######\angular 15 verbose Windows_NT 10.0.19041 16 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\bruker\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "start" 17 verbose node v12.16.3 18 verbose npm v6.14.5 19 error code ELIFECYCLE 20 error syscall spawn 21 error file C:\WINDOWS\system32\cmd.exe 22 error errno ENOENT 23 error [email protected] start: ng serve --host 0.0.0.0 --port 4200 23 error spawn ENOENT 24 error Failed at the [email protected] start script. 24 error This is probably not a problem with npm. There is likely additional logging output above. 25 verbose exit [ 1, true ]

Do I have to upgrade backend and then upgrade abp-ng2-module to get this to work?


7 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    First, you should use abp-ng2-mdoule's v6.0 version. But, I'm not sure if the problem is related to abp-ng2-module or not. The error message is not very clear.

    You can direcly try to execute ng serve command instead of running npm start command. This might show you a better error message.

  • User Avatar
    0
    affern2 created

    hi @ismcagdas

    I updated these packages: "@swimlane/ngx-charts": "13.0.0", "abp-ng2-module": "6.0.0", "ngx-bootstrap": "5.2.0", "primeng": "9.1.0", "ts-node": "8.3.0", "tslib": "1.10.0",

    and added these primeng dependencies:
    "chart.js": "^2.9.3",
    "@fullcalendar/core": "^5.1.0",
    
    I also removed import of AbpModule in the account module (I read your post here https://github.com/aspnetboilerplate/aspnetboilerplate/issues/5272#issuecomment-583874813)
    

    Now the error disappeared. But now I got other errors: WARNING in Conflict: Multiple assets emit different content to the same filename 32px.png

    WARNING in Conflict: Multiple assets emit different content to the same filename loading.gif

    ERROR in Error: Internal Error: The name i is already defined in scope to be [object Object] at error (C:\MyProject\angular\node_modules@angular\compiler\bundles\compiler.umd.js:2842:15) at BindingScope.set (C:\MyProject\angular\node_modules@angular\compiler\bundles\compiler.umd.js:19023:17) at TemplateDefinitionBuilder.registerContextVariables (C:\MyProject\angular\node_modules@angular\compiler\bundles\compiler.umd.js:17901:32) at C:\MyProject\angular\node_modules@angular\compiler\bundles\compiler.umd.js:17812:59 at Array.forEach (<anonymous>) at TemplateDefinitionBuilder.buildTemplateFunction (C:\MyProject\angular\node_modules@angular\compiler\bundles\compiler.umd.js:17812:23) at C:\MyProject\angular\node_modules@angular\compiler\bundles\compiler.umd.js:18401:60 at C:\MyProject\angular\node_modules@angular\compiler\bundles\compiler.umd.js:17838:81 at Array.forEach (<anonymous>) at TemplateDefinitionBuilder.buildTemplateFunction (C:\MyProject\angular\node_modules@angular\compiler\bundles\compiler.umd.js:17838:37) at C:\MyProject\angular\node_modules@angular\compiler\bundles\compiler.umd.js:18401:60 at C:\MyProject\angular\node_modules@angular\compiler\bundles\compiler.umd.js:17838:81 at Array.forEach (<anonymous>) at TemplateDefinitionBuilder.buildTemplateFunction (C:\MyProject\angular\node_modules@angular\compiler\bundles\compiler.umd.js:17838:37) at Object.compileComponentFromMetadata (C:\MyProject\angular\node_modules@angular\compiler\bundles\compiler.umd.js:19523:58) at ComponentDecoratorHandler.compile (C:\MyProject\angular\node_modules@angular\compiler-cli\src\ngtsc\annotations\src\component.js:535:34)

    ERROR in multi ./node_modules/simple-line-icons/css/simple-line-icons.css ./node_modules/font-awesome/css/font-awesome.css ./node_modules/famfamfam-flags/dist/sprite/famfamfam-flags.css ./node_modules/bootstrap-select/dist/css/bootstrap-select.css ./node_modules/jquery.uniform/dist/css/default.css ./node_modules/toastr/build/toastr.css ./node_modules/jstree/dist/themes/default/style.min.css ./node_modules/jtable/lib/themes/metro/blue/jtable.min.css ./node_modules/morris.js/morris.css ./src/assets/Jcrop/css/Jcrop.css ./node_modules/bootstrap-daterangepicker/daterangepicker.css ./node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css ./src/app/shared/core.less ./src/app/shared/layout/layout.less ./src/assets/bootstrap-datepicker/css/bootstrap-datepicker.min.css ./node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css ./src/assets/metronic/frontend/layout/css/blog.min.css ./src/assets/metronic/frontend/layout/css/profile.css ./src/assets/Jango/assets/plugins/animate/animate.min.css ./src/assets/Jango/assets/base/css/components.css ./src/assets/Jango/assets/base/css/plugins.css ./src/assets/Jango/assets/base/css/themes/default.css ./src/assets/Jango/assets/plugins/revo-slider/css/settings.css ./src/assets/Jango/assets/plugins/revo-slider/css/layers.css ./src/assets/Jango/assets/plugins/revo-slider/css/navigation.css ./src/assets/Jango/assets/plugins/cubeportfolio/css/cubeportfolio.min.css ./src/assets/Jango/assets/plugins/fancybox/jquery.fancybox.css ./src/assets/Jango/assets/plugins/slider-for-bootstrap/css/slider.css ./src/assets/Jango/assets/demos/index/css/custom.css ./node_modules/quill/dist/quill.core.css ./node_modules/quill/dist/quill.snow.css ./node_modules/primeng/resources/themes/omega/theme.css ./node_modules/primeng/resources/primeng.min.css ./node_modules/flag-icon-css/css/flag-icon.css ./node_modules/owl.carousel/dist/assets/owl.carousel.min.css ./node_modules/owl.carousel/dist/assets/owl.theme.default.css ./src/styles.css Module not found: Error: Can't resolve '#MyProject\angular\node_modules\primeng\resources\themes\omega\theme.css' in '#MyProject\angular'

    ERROR in node_modules/ng2modules-easypiechart/easypiechart.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of MainModule, but could not be resolved to an NgModule class.
    
    This likely means that the library (ng2modules-easypiechart) which declares EasyPieChartModule 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.
    
    1 export declare class EasyPieChartModule {
                           ~~~~~~~~~~~~~~~~~~
    src/account/account.module.ts:41:14 - error NG1010: Value at position 4 in the NgModule.imports of AccountModule is not a reference: [object Object]
    
     41     imports: [
                     ~
     42         ngCommon.CommonModule,
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ...
     53         FooterModule
        ~~~~~~~~~~~~~~~~~~~~
     54     ],
        ~~~~~
        
        Maybe i can't use EasyPieChartModule in Angular9? 
    
  • User Avatar
    0
    affern2 created

    I disabled Ivy and fixed all the bugs. Then it will run if I disable AOT. But when I enable Ivy, it shows a lot of new bugs. Many of them are in the Account templates. I will try to fix them.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @affern2

    Thank you for the update. Yes, with Ivy, there were a few braking changes. You can check this pull request https://github.com/aspnetzero/aspnet-zero-core/pull/3097/files, it might help you.

  • User Avatar
    0
    affern2 created

    Thank you @ismcagdas It helped me a lot. Now it's just this package (ng2modules-easypiechart) left that obviously does not work with Ivy.

    *ERROR in node_modules/ng2modules-easypiechart/easypiechart.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of MainModule, but could not be resolved to an NgModule class.

    This likely means that the library (ng2modules-easypiechart) which declares EasyPieChartModule 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.*

    Do you know of a similar pie chart that I can use instead?

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    We are using https://github.com/swimlane/ngx-charts#readme in AspNet Zero and it also has a pie chart and supports Ivy.

  • User Avatar
    0
    affern2 created

    Thank you @ismcagdas. Now everything works great!