Why does the environment tag helper work on my machine but not on Azure? - asp.net-core

This is a section on our _Layout.cshtml that I'm about to throw out the window.
<!-- CSS Scripts -->
<environment include="Development">
<script src="/ts/CS.js" asp-append-version="true" abp-ignore-src-modification="true"></script>
<script src="/ts/CS.Url.js" asp-append-version="true" abp-ignore-src-modification="true"></script>
<script src="/ts/CS.Settings.js" asp-append-version="true" abp-ignore-src-modification="true"></script>
<script src="/ts/CS.Alert.js" asp-append-version="true" abp-ignore-src-modification="true"></script>
<script src="/ts/CS.Modal.js" asp-append-version="true" abp-ignore-src-modification="true"></script>
</environment>
<environment include="Staging,Production">
<script abp-src="/ts/CS.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Url.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Settings.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Alert.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Modal.js" asp-append-version="true"></script>
</environment>
We use the environment tag helper in some spots to either use .min.js or .js, useful for debugging. I can see that if I personally set the ASPNETCORE_ENVIRONMENT variable from "Development" to "Production" that the tag helper continues to render the right content.
However, when I then push this through to be hosted on Azure - the content is missing completely.
Things I've tried:
Tried changing the value in azure config - no change.
Originally we had names, changed to include - no change. Still works on dev machine.
What is going on here?! Is this not what other people do?

I was having the same issue with asp.net 3.0. It was rendering environment on local properly but when I deployed to Azure it stopped detecting it and rendering both the environment as it is.
Here is the solution. Just add the below line in your _Layout.cshtml file in the beginning.
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
it will fix the issue.
thanks

Staging, production is not understandable to the server. You need to change this as follow.
If You are working in local than our script will work which is inside
<environment include="Development">
</environment>
if You are working on server like azure and others than our script will work which is inside
<environment exclude="Development">
</environment>
You need to change your following code
<environment include="Staging,Production">
<script abp-src="/ts/CS.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Url.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Settings.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Alert.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Modal.js" asp-append-version="true"></script> </environment>
as
<environment exclude="Development">
<script abp-src="/ts/CS.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Url.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Settings.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Alert.js" asp-append-version="true"></script>
<script abp-src="/ts/CS.Modal.js" asp-append-version="true"></script>
</environment>
It will work at any server.

The exclude="Development" works if you want to apply the same settings to all other environment except Development. But I came across a time when I need to have different settings for staging and production. So I had to be specific.
The solution I use in order for the environment tag helper to work on Azure is that you need to create an entry for the ASPNETCORE_ENVIRONMENT under Settings -> Configuration -> Application settings on Azure:
If you don't have that defined on Azure, when you publish, it will default to Production if I remember correctly, which is weird.

Related

aspnetboilerplate issues: asp.NET core template Web app issue

I have downloaded the asp.net core template from the below location but I am missing most of the JS files here-
downloaded location - https://github.com/aspnetboilerplate/aspnet-core-template
When I invoke the Web API swagger and it works fine without any issue but when I run the web app I am missing most of the JS & CS files as shown below-
There is no libs folder...Is there something missing?
<script src="~/libs/jquery/dist/jquery.js" asp-append-version="true"></script>
<script src="~/libs/bootstrap/dist/js/bootstrap.bundle.js" asp-append-version="true"></script>
<script src="~/libs/admin-lte/dist/js/adminlte.js" asp-append-version="true"></script>
<script src="~/libs/jquery-validate/jquery.validate.js" asp-append-version="true"></script>
<script src="~/libs/jquery-validate/jquery.validate.unobtrusive.js" asp-append-version="true"></script>
<script src="~/libs/block-ui/jquery.blockUI.js" asp-append-version="true"></script>
<script src="~/libs/spin/spin.js" asp-append-version="true"></script>
<script src="~/libs-ext/spin/jquery.spin.js" asp-append-version="true"></script>
<script src="~/libs/sweetalert/sweetalert.min.js" asp-append-version="true"></script>
<script src="~/libs/toastr/toastr.min.js" asp-append-version="true"></script>
<script src="~/libs/push.js/push.js" asp-append-version="true"></script>
<script src="~/libs/moment/moment-with-locales.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/abp.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/libs/abp.jquery.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/libs/abp.toastr.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/libs/abp.blockUI.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/libs/abp.spin.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/libs/abp.sweet-alert.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/jquery.dataTables.min.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/dataTables.bootstrap4.min.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/dataTables.responsive.min.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/responsive.bootstrap4.min.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/dataTables.buttons.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/buttons.bootstrap4.js" asp-append-version="true"></script>
<script src="~/js/abp.dataTable.js" asp-append-version="true"></script>
<script src="~/js/main.js" asp-append-version="true"></script>
An old question, but incase someone else needs help.
First install Microsoft.Web.LibraryManager.CLI
dotnet tool install -g Microsoft.Web.LibraryManager.CLI
and run
libman restore
from the Mvc folder

How to inject scripts to index html file in the generated index.html in dist/<appName>?

I have an index html file and i need to inject some configuration based scrips in production/staging environments.
Workspace index.html
<body>
<app-root></app-root>
</body>
Generated index.html in dist/my-app through ng build
<body>
<app-root></app-root>
<script src="runtime-es5.js" nomodule defer></script>
<script src="polyfills-es5.js" nomodule defer></script>
<script src="styles-es5.js" nomodule defer></script>
<script src="vendor-es5.js" nomodule defer></script>
<script src="main-es5.js" nomodule defer></script>
</body>
My Requirement:
<body>
<app-root></app-root>
<script src="script-staging.js"></script>
<script src="runtime-es5.js" nomodule defer></script>
<script src="polyfills-es5.js" nomodule defer></script>
<script src="styles-es5.js" nomodule defer></script>
<script src="vendor-es5.js" nomodule defer></script>
<script src="main-es5.js" nomodule defer></script>
</body>
I am using Angular 8 + Webpack with CLI. I've included custom-webpack.configuration.js pointed from angular.json. I'm trying to achieve this using HTMLWebpackPlugin.
Be informed that dynamic script loading is optional, means I will or will not inject that script.js in generated index.html that would be decided during build time. So injection of script in generated html has to be done during build time which I should happen through plugin of webpack.
Any help would be appreciated, struggling for some days.
You can point full path from ./scr/script-staging.js in angular.json in script array of your app object.
Here shown:-
"styles": [
"styles.scss"
],
// like this
"scripts": [
"./src/script-staging.js"
]
After adding this line of code you should build your app again "ng build"/"ng build --prod" and hopefully if everything gone correct then it should add you file to index.html.

NonFactors.Grid.Mvc6 click not fires

I am attempting to implement paging in my simple ASP.NET Core 2.2 application.
I executed the command Install-Package NonFactors.Grid.Mvc6 to install the package and followed all the installation steps described in this page.
I can see the data displayed in grid but when I click to show the next records the paging in not moving to show the other records.
I am missing any scripts?
I made the test followed the tutorial that you provided , but it worked well. Make sure your styles and scripts are saved as follows:
Then include grid styling sheet and grid scripts to _Layout.cshtml like below:
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link href="~/Content/MvcGrid/mvc-grid.css" rel="stylesheet">
</environment>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/MvcGrid/mvc-grid.js"></script>
<script>
[].forEach.call(document.getElementsByClassName('mvc-grid'), function (element) {
new MvcGrid(element);
});
</script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>

angularjs routing is not working no error found

what seems to be wrong here i dont get any error but at the same time no progress in routing. .
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Angular App</title>
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/style.css">
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
</head>
<body ng-app="myApp">
<h1> this is index.html </h1>
<div ng-view></div>
</body>
</html>
mainpage.js // where my controller is
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ngResource', 'ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'index.html'
})
.when('/home', {
templateUrl : 'homepage.html'
})
.otherwise({
templateUrl : 'index.html'
});
});
when i load '/' in my browser nothins is happening same with /home i dont know where did i get wrong since there is no error in my console
The template for a route should be a partial view. Here index.html is the root of the single page app , this page should never reload (unless you want to destroy and rebootstrap the app). Try changing the templateUrl for / to a file that just has <h2> HELLO WORLD!</h2> and monitor the console (dev tools) for any 404 errors related to fetching the template
I think problem is with your javascript file name. In index you mentioned mainpage.js and in description its homepage.js.
Edit : Okay. Then try arranging files list like
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
As mentioned in the answer by user Priyanka, the filename can be the issue. But that should produce an error on the console and according to you there was no error on the console.
The other possible reason can be the sequence in which you've imported your files. I generally sequence my files this way -
<head>
<!-- 1. External CSS Libraries likes bootstrap, jquery -->
<!-- 2. My Application specific CSS files -->
<!-- 3. External JS libraries like Angular, bootstrap, JQuery -->
<!-- 4. My Application specific JS files like my controllers, services, directives etc.
</head>
Again the sequence in which you import the external JS libraries may also cause problems.

require script files and then compiling them into 1

I have a single HTML file in which I load a bunch of script files, like so:
index.html
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<script src="bower_components/angular-wizard/dist/angular-wizard.min.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-moment/angular-moment.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/raphael/raphael.min.js"></script>
<script src="bower_components/morris.js/morris.min.js"></script>
<script src="bower_components/angular-morris-chart/src/angular-morris-chart.min.js"></script>
<script src="jquery.js"></script>
I was wondering maybe there is a way to "require" all these in one script file like so:
bower_components.js
require('bower_components/angular-ui-router/release/angular-ui-router.min.js');
require('bower_components/angular-local-storage/dist/angular-local-storage.min.js');
etc ...
and later in production, compile bower_components.js to contain the actual scripts so that I could simply just use this:
<script src="bower_components.js"></script>
Please note that I don't wish to run any sort of task in development environment. I don't want to compile my scripts when I work locally.
thanks in advance.