V13.4:
Dear ASP.NET Zero Support Team,
I hope this message finds you well. We are currently using the ASP.NET Zero framework with Angular as our front-end and ASP.NET Core for our backend.
We are looking to implement a feature in our application that allows users to access specific components through the menu and directly via URL, while toggling the visibility of the menu. Here’s a brief overview of our requirements, including examples:
Menu Navigation: When a user navigates to https://<myApp>/app/area1/dispositions, the component is displayed with the menu visible.
Direct Access Without Menu: We want to allow users to access the same component directly via https://<myApp>/dispositions, where the menu is hidden, providing a cleaner view of the component.
Expand/Collapse Functionality:
Each menu item should have an expand icon (using Font Awesome) that, when clicked, takes the user to the component's URL without the menu.
Inside the component, there should be a collapse icon that, when clicked, navigates back to the original URL with the menu displayed.
We would greatly appreciate any guidance, best practices, or examples you could provide to help us set up this functionality effectively. Your support is invaluable to us as we continue to develop our application.
Dear ASPZero Support Team,
I hope this message finds you well.
We are currently working on our ASP.NET Core application and have identified the following NuGet packages that are in use:
System.Runtime.Caching - Version 6.0.0
System.Drawing.Common - Version 4.7.0
System.Data.SqlClient - Version 4.8.6
These versions have been flagged as violations against our internal Toolchain Policy, and we are looking to upgrade them to the latest versions to ensure compliance and enhance security:
System.Runtime.Caching to 8.0.1
System.Drawing.Common to 8.0.10
System.Data.SqlClient to 4.8.6 (or the latest available version)
We would like to inquire if upgrading these packages could potentially cause any issues or if you foresee any compatibility problems with our existing framework or application functionality.
Additionally, if there are specific guidelines or considerations we should keep in mind while performing these upgrades, please let us know.
Thank you for your assistance. We look forward to your prompt response.
Best regards, Oliver
Dear Support Team,
We have set up a CI/CD pipeline in DevOps for direct deployment of both the API and the Angular application. Based on version 12, everything worked smoothly.
We recently copied the pipeline and adjusted it to build with the .NET 8 framework for version 13.4. The API continues to run without issues, but the Angular app no longer builds or is not copied over correctly. The "dist" folder in wwwroot is missing.
Do you have any suggestions or insights into what might be causing this problem?
Below are excerpts from the package.json and the pipeline definition.
package.json { "name": "abp-zero-template", "version": "13.4.0", "license": "MIT", "angular-cli": {}, "scripts": { "ng": "ng", "publish": "gulp build && ng build --configuration production", "lint": "eslint -c .eslintrc.js --ext .ts src", "post-publish": "shx mv ./wwwroot/dist/* ./wwwroot/", "publish-k8s": "gulp build && ng build --configuration k8s --verbose", "start": "ng serve --host 0.0.0.0 --port 4200", "hmr": "gulp buildDev && ng serve --host 0.0.0.0 --port 4200 --hmr", "test": "gulp buildDev && ng test", "create-dynamic-bundles": "gulp buildDev", "nswag": "cd nswag/ && refresh.bat", "build": "ng build --configuration production" },
trigger: branches: include: - refs/heads/master batch: True name: $(date:yyyyMMdd)$(rev:.r) resources: repositories:
checkout: self
task: mspremier.PostBuildCleanup.PostBuildCleanup-task.PostBuildCleanup@3 displayName: Clean Agent Directories
task: UseDotNet@2 displayName: Use .NET Core sdk 8.0.x inputs: version: 8.0.x vsVersion: 17.8.3 includePreviewVersions: true performMultiLevelLookup: true
task: NodeTool@0 displayName: Use Node 20.x inputs: versionSpec: 20.x
task: CmdLine@2 displayName: Command Line Script inputs: script: >+ rmdir /s /q node_modules
npm cache clean --force
task: DotNetCoreCLI@2 displayName: Restore inputs: command: restore projects: '**/MyApp.Web.Host.csproj' custom: restore arguments: --force feedRestore: 61e6cd5a-e31d-46dd-973a-caeced7a75fd/a94ff0e1-806f-4475-a711-137a0f2b1dde nugetConfigPath: Saml package/nuget.exe noCache: true verbosityRestore: Diagnostic verbosityPack: Detailed
task: DotNetCoreCLI@2 displayName: Build inputs: projects: '**/MyApp.Web.Host.csproj' arguments: --configuration $(BuildConfiguration) verbosityRestore: Detailed verbosityPack: Detailed
task: CmdLine@2 displayName: Command Line Script continueOnError: True inputs: script: >- npm install gulp-sass -ES --unsafe-perm=true
npm update node-sass@latest
workingDirectory: src/MyApp.Web.Host
task: geeklearningio.gl-vsts-tasks-yarn.yarn-task.Yarn@3 displayName: 'Yarn ' continueOnError: True inputs: projectDirectory: src/MyApp.Web.Host productionMode: true customFeed: c3c4c89e-67c6-4c90-8cda-19db656fbb9d
task: CmdLine@2 displayName: Command Line Script gulp continueOnError: True inputs: script: >2-
sudo npm install -g gulp
yarn add gulp
npm run build
workingDirectory: src/MyApp.Web.Host
task: DotNetCoreCLI@2 displayName: Publish inputs: command: publish publishWebProjects: false projects: '**/MyApp.Web.Host.csproj' arguments: --configuration $(BuildConfiguration) --output $(build.artifactstagingdirectory) zipAfterPublish: True verbosityRestore: Detailed verbosityPack: Detailed
task: DotNetCoreCLI@2 displayName: dotnet publish inputs: command: publish publishWebProjects: false projects: '**/MyApp.Migrator.csproj' arguments: --configuration $(BuildConfiguration) --output $(build.artifactstagingdirectory) zipAfterPublish: false verbosityRestore: Detailed verbosityPack: Detailed
task: PublishBuildArtifacts@1 displayName: Publish Artifact condition: succeededOrFailed() inputs: PathtoPublish: $(build.artifactstagingdirectory) TargetPath: '\my\share$(Build.DefinitionName)$(Build.BuildNumber)'
task: mspremier.PostBuildCleanup.PostBuildCleanup-task.PostBuildCleanup@3 displayName: Clean Agent Directories copy ...
Best regards, Oliver
Hi,
When there is a new release deployed the users always have to press CTRL + F5 to clear the cache and reload the Javascript and CSS files correctly.
I wonder if there is a way to automatically reload or clear the cache when there is a new version deployed.
Is that the Maianentane feature ? How dsoes it work if so?
Kind regards, Oliver
Hi,
we updated from V 12 to 13.4 - when we deploy the Angular app on Azure as Web App in App Service - we get following error -
could you help us out wsith that?
ERROR SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data onreadystatechange https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 X https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 invokeTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 onInvokeTask https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 invokeTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 runTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 invokeTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 Ct https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 Ft https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 Ht https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 Xt https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 scheduleTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 onScheduleTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 scheduleTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 scheduleTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 scheduleEventTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 H https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 set https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 ajax https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 getServerStatus https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 run https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 getApplicationConfig https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 onreadystatechange https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 X https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 invokeTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 onInvokeTask https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 invokeTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 runTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 invokeTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 Ct https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 Ft https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 Ht https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 Xt https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 scheduleTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 onScheduleTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 scheduleTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 scheduleTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 scheduleEventTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 H https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 set https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 ajax https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 getApplicationConfig https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 run https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 ot https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 Mt https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 ot https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 runInitializers https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 kD https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 Wx https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 kD https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 invoke https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 onInvoke https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 invoke https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 run https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 run https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 ED https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 bootstrapModuleFactory https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 kD https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 invoke https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 run https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 D https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 invokeTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 runTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 tr https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 promise callback*Ft https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 Ht https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 scheduleTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 scheduleTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 scheduleMicroTask https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 D https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 then https://pliapp.pliwfm.one/polyfills.ce1ab5650c81c793.js:1 setDriver https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 oi https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 40119/qi.exports<[4]< https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 X https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 s https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 40119 https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 e https://pliapp.pliwfm.one/runtime.467daad61cfa9a73.js:1 47674 https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 e https://pliapp.pliwfm.one/runtime.467daad61cfa9a73.js:1 89440 https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 e https://pliapp.pliwfm.one/runtime.467daad61cfa9a73.js:1 14675 https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 e https://pliapp.pliwfm.one/runtime.467daad61cfa9a73.js:1 <anonymous> https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1 c https://pliapp.pliwfm.one/runtime.467daad61cfa9a73.js:1 <anonymous> https://pliapp.pliwfm.one/main.9542f11b88ad6a71.js:1
Hi,
I'm trying to run the "ASP.NET CORE & Angular" version of the project within Docker for testing on localhost.
this is for ex. my ASPNET core api project
Dockerfile
FROM mcr.microsoft.com/dotnet/aspnet:8.0.0-windowsservercore-ltsc2022 AS final
WORKDIR /app
COPY ./Release/. .
EXPOSE 80 EXPOSE 443
ENTRYPOINT ["dotnet", "WFMOne.Web.Host.dll"]
and my docker-compose.yml version: '3.8' services: pli02: build: context: C:/PLI_Deployments/wfmone_api # Path to your project directory dockerfile: Dockerfile # Name of your Dockerfile image: pli02:latest container_name: pli02_container ports: - "44302:443" # Host-Port 44302 to Container-Port 443 (HTTPS) - "62671:80" # Host-Port 62671 to Container-Port 80 (HTTP) environment: - ASPNETCORE_ENVIRONMENT=Production - ASPNETCORE_URLS=http://+:80;https://+:443
Issue is - I can not start on http://localhost:62671 or https://localhost:44302
project is starting on port 5000 now instead of 80/443.
Here container log: 2024-10-10 12:18:18 Hosting environment: Production 2024-10-10 12:18:18 Content root path: C:\app 2024-10-10 12:18:18 Now listening on: http://localhost:5000 2024-10-10 12:18:18 Application started. Press Ctrl+C to shut down.
Any hint how can I fix it to test on localhost / machine?
Hello,
I'm following this guide - with fresh version V13.4 - but I get "Error: This command is not available when running the Angular CLI outside a workspace." - how to fix?
https://docs.aspnetzero.com/aspnet-core-angular/latest/Deployment-Angular-Docker
#################### PUBLISH ANGULAR UI PROJECT #################### yarn install v1.22.19 [1/4] Resolving packages... success Already up-to-date. Done in 0.05s. Error: This command is not available when running the Angular CLI outside a workspace. #################### COPY YML AND PFX FILES ANGULAR #################### #################### CREATE DOCKER IMAGES ####################
Dear ASPZERO Support,
We are encountering an issue with our Azure deployment - we use Angular + ASPNET Core ASPZERO V12:
In our application, we are using an Angular app with an ASP.NET Core API, along with the ABP Boilerplate and custom user-based settings stored in the AbpSettings table. In our on-premise environment, when we change settings via the UI, the updates are applied immediately.
However, in the Azure environment, where the Angular app and the ASP.NET Core Web API are deployed as separate App Services, changes to the AbpSettings table via the UI do not take effect immediately. We need to confirm the changes multiple times before they are actually reflected in the application.
Both environments are connected to SQL Server — one running locally, and the other using an Azure SQL Managed Instance.
Could this be due to caching, or do you have any insight into why the settings changes in the Azure environment are not immediately applied?
Thank you in advance for your support.
Dear ASP.NET Zero Support Team,
I hope this message finds you well.
I am currently working on our ASP.NET Core & Angular project and have a couple of questions regarding the configuration of our appsettings.json files for container deployments.
Dynamic Configuration Loading: How can we configure our ASP.NET Core application to load settings from a specific subfolder when the environment variable IsContainer is set to true? We want to ensure that the application correctly uses this configuration in a containerized environment.
New Folder for Configuration Files: For both the ASP.NET Core backend and the Angular frontend, we would like to create a new, dedicated folder solely for appsettings*.json files. Instead of loading these configurations from the /assets folder in the Angular project, we want a separate clean folder. What steps should we follow to implement this structure in both projects?
Thank you for your assistance!
Usage of Angular & ASP:NET CORE - V12:
As part of a client project, we need to deliver our solution in containers. Specifically, we have two containers: one containing the Angular application and the other likely containing the ASP.NET Core component.
Our client has requested that we manage environment variables and configuration files outside of the Docker images to enhance security and flexibility. We would like to know if you have any recommendations or best practices for achieving this with ASP Zero-based solutions. Here are some specific points we are considering:
Creating a Dockerfile without including configuration files. Avoiding hard-coded configuration values in the Dockerfile. Building the Docker image.