Open Closed

Using CLI to add-package --with-source-code for LeptonX theme to Angular site #5916


User avatar
0
theChrisMarsh created
  • ABP Framework version: v7.3.3
  • UI Type: Angular
  • Database System: EF Core

I have a commercial Business license with access to source code. How do I install the LeptonX theme source code into my angular site as a project using the CLI? I have tried:

 > abp add-package @volosoft/abp.ng.theme.lepton-x --with-source-code 
 ABP CLI 7.3.3
 '@volosoft/abp.ng.theme.lepton-x' npm package could not be found!

This does work for the Basic theme, but I need the LeptonX theme:

 > abp add-package @abp/ng.theme.basic --with-source-code 
 ABP CLI 7.3.3
 '@volosoft/abp.ng.theme.lepton-x' npm package could not be found!

6 Answer(s)
  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello theChrisMarsh abp get-source Volo.Abp.LeptonXTheme.Pro -o LeptonX You need to download the source, add it to your project and remove the references to the Nuget and replace it with the project reference.

    So, you can change the package reference to the project reference and specify the path as the downloaded source code path.

    For example:

    -    <PackageReference Include="Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX" Version="2.3.*-*" />
    +    <ProjectReference Include="..\..\..\LeptonX\src\Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX" />
    
  • User Avatar
    0
    theChrisMarsh created

    Your instructions appear to be for MVC. I have done that, but there is way more in that source than needs to go into the angular project.

    Can you tell me what subfolders (I think some may be in the source-scss/ng.zip file) are needed for Angular ONLY?

    Also, why does the add-package --with-source-code work for the Basic theme, but not the LeptonX theme?

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello theChrisMarsh,

    Yes correct source-scss/ng.zip is needed for Angular.

    To add LeptonX code as a project on angular side please try to hit below command at cmd of Angular project or terminal

    abp get-source Volo.Abp.LeptonXTheme.Pro --version 2.3.3

    you may change version as per your requirement.

    please do let me know if it helps you

    Thank you, Anjali

  • User Avatar
    0
    theChrisMarsh created

    That is not really that helpful. I already know how to get the source code. I am only trying to modify the Theme and Layout for Angular. My questions are:

    1. What files and folders from the Volo.Abp.LeptonXTheme.Pro source code download are needed for Angular only?
    2. Is it only the files and folders in ng.zip?
    3. What about the files and folders in the /angular/projects folder (which has subfolders lepton-x, lepton-x-abp-core, lepton-x-core, volo-lepton-x folder)
      • Where is the documentation on what each of those projects are for (the README.md file is just marketing stuff and not at all useful).
  • User Avatar
    0
    theChrisMarsh created

    Also, it seems there is a defect in the build of the files in the ng.zip source code for version 2.3.3, these are the related files, below that the error.

    postcss.config.js
    autoprefixer: {
        cascade: false,
    },
    
    package.json
      "dependencies": {
        "sass": "^1.57.1",
        "bootstrap": "5.2.1",
        "perfect-scrollbar": "^1.5.5",
        "execa": "~5.1.1",
        "postcss": "^8.4.14",
        "postcss-cli": "^10.0.0",
        "rtlcss": "^3.5.0"
      }
    

    After running yarn build

    Error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'
    Require stack:
    - C:\Development\lepton-x\source-scss\ng\postcss.config.js
    
    (@C:\Development\lepton-x\source-scss\ng\postcss.config.js)
        at load (C:\Development\lepton-x\source-scss\ng\node_modules\postcss-load-config\src\plugins.js:28:11)
        at C:\Development\lepton-x\source-scss\ng\node_modules\postcss-load-config\src\plugins.js:53:16
        at Array.map (<anonymous>)
        at plugins (C:\Development\lepton-x\source-scss\ng\node_modules\postcss-load-config\src\plugins.js:52:8)
        at processResult (C:\Development\lepton-x\source-scss\ng\node_modules\postcss-load-config\src\index.js:38:14)
        at C:\Development\lepton-x\source-scss\ng\node_modules\postcss-load-config\src\index.js:162:14
        at async Promise.all (index 0)
    
  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello theChrisMarsh,

    for your error - Loading PostCSS Plugin failed: Cannot find module 'autoprefixer' you may refer this link https://github.com/webpack-contrib/postcss-loader/issues/187

    And as you are trying to modify the Theme and Layout for Angular please have look to this video link from 21.00 minutes onward https://www.youtube.com/watch?v=R9CqTtn6Wcg

    I hope this will clear all your queries.

    regards, Anjali

Made with ❤️ on ABP v9.1.0-preview. Updated on November 01, 2024, 05:35