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

6 Answer(s)

• 

  0

  Anjali_Musmade created 7 months ago

  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" />
  

  Save Cancel
• 

  0

  theChrisMarsh created 7 months ago

  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?

  Save Cancel
• 

  0

  Anjali_Musmade created 7 months ago

  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

  Save Cancel
• 

  0

  theChrisMarsh created 7 months ago

  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).

  Save Cancel
• 

  0

  theChrisMarsh created 7 months ago

  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)
  

  Save Cancel
• 

  0

  Anjali_Musmade created 7 months ago

  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

  Save Cancel