Changes in Angular component are not transpiled to js - visual-studio

I am developing my first ASP.NET Core application with Angular 2.
The application must have individual user access. Since there is no template in Visual Studio 2017 for Angular applications I generated an Angular project in Powershell with Yoman, opened it in another Visual Studio and copied all the Angular files and folders into my normal Visual Studio project which has the individual user access template generated.
I was able to make Angular work in my project. The three default pages generated by Yoman appear and work. The second one is a page with an increment button and variable. The problem is that if I change the increment in the "counter.component.ts" from this.currentCount++; to this.currentCount+=3; for example, the change is not reflected in the main-client.js file in the dist folder.
I have added the Target lines in the .csproj file and I do not know how to proceed.
What other options are there?
This is what I have https://1drv.ms/u/s!AvPiv6aM2fzRepKV9J_F0-387Zc
I have added "compileOnSave": true and it still doesn't work
Thank you very much for your help!

This is really dumb, but for anyone else that might come to this step, what I was missing was to build the Angular packages in "Startup.cs" (of course)
In Configure method, in the
if (env.IsDevelopment())
these lines:
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true
});
and in
app.UseMvc(routes =>
these lines
routes.MapSpaFallbackRoute(
name: "spa-fallback",
defaults: new { controller = "Home", action = "Index" });

Related

Blazor components - namespace move

I am experiencing problem in VS 2022 in Blazor complex project. After moving Blazor components to different namespace/folder the components are not functional any more. My component does not 'recognize' other Blazor components anymore. For example custom component MudTable from MudBlazor namespace:
I would like to be able move Blazor components easily as simple classes.
Sometimes it helps to specify the same namespace in razor file to match namespace in partial code behind class, but sometimes I end up creating component (razor and cs files) with different name (copying the same code). This is very time consuming. I am not able to reproduce the described bug in Simple Projects. I have tried to reproduce the issue but it works fine (with minor VS bug) as described below. I will keep trying to reproduce the issue on Sample project.
Please find below scenarios working fine:
Simple scenario working fine
Steps to reproduce the issue:
Create Blazor Server App
Create folders
Components
Components\Sub1
Components\Sub2
Add new Razor component e.g. MyComponent1.razor to folder Components\Sub1
Verify that <MyComponent1\> works on some page. Eg. add lines to Index.razor:
#using BlazorApp1.Components.Sub1
<MyComponent1 />
Move MyComponent1.razor to folder Components\Sub2
Update Index.razor:
#using BlazorApp1.Components.Sub2
<MyComponent1 />
It works fine
More complex scenario with minor bug
Create Blazor Server App
Create folders
Components
Components\Sub1
Components\Sub2
Add new Razor component e.g. MyComponent1.razor to folder Components\Sub1
Add behind the class to 'MyComponent1.razor.cs' to folder Components\Sub1:
using Microsoft.AspNetCore.Components;
namespace BlazorApp1.Components.Sub1
{
public partial class MyComponent1:ComponentBase
{
}
}
Verify that <MyComponent1\> works on some page. Eg. add lines to Index.razor:
#using BlazorApp1.Components.Sub1
<MyComponent1 />
Rename folder Components\Sub1 to Components\Sub1Renamed.
Visual studio does not display any error and project can be compiled/started. Code behind is even displayed 'linked' to razor file:
This seems as a VS bug to me.
When project is started Component1 is invisible on Index page, because component 'BlazorApp1.Components.Sub1.Component1has no visual code defined, because it has only non-visual definition 'behind the code'. The file 'Component1.razor' with visual is not used at all because it is in unused namespaceBlazorApp1.Components.Sub1Renamed`
Update Index.razor:
#using BlazorApp1.Components.Sub1Renamed
<MyComponent1 />
When project is started, Component1 is visible on Index page (but I assume that no code behind is processed)
Do you have any hint, how to make it work for blazor components ?

Blazor Interopt Js in separate project doesn't refresh, even by removing cache, bin/obj

This is a cache issue I guess. Let me explain,
I have a .net6 blazor project (client server and shared project) which as a referenced project call ReactorBlazorMapbox (Razor library), which is in charge with JsInterop to play with mapbox js.
Code in progress, but works great yet. Display a map, display popup...
The ReactorBlazorMapbox project has its own JS file, called MapboxInterop.js. This file is loaded in ./_content/ReactorBlazorMapbox/MapboxInterop.js
This way, no need to reference the file in the client projet. It's embeded. Great.
My problem is, when I modify this file, nothing happend. Clear cache CTRL-F5, manualy clearing cache using inpector/Application/Cache/Delete (or local/session storage). I also removed bin/obj, clean solution, re generate projects on C# side.
My MapboxInterop.js in the browser does not refresh. (using inspector/Source)
I had to rename it MapboxInterop2.js and change my link in the import, this way it works. At least one time. But add a new file each time modification is done in this file will be time killer...
I found a work around, instead of using a embeded js interopt file from the side project, I put this one in the Blazor Client /wwwwroot/js path and add this line :
//load js from client projet path
_Module = await _JsRuntime.InvokeAsync<IJSObjectReference>("import", "./js/MapboxInterop.js");
instead of
//load js from this project
_Module = await _JsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/ReactorBlazorMapbox/MapboxInterop2.js");
this way, when re running the site with VS2022, the file in cache is refreshed.
If someone has an idea so the same thing happen for a embed project js...
FCK me :)
I forgot to check "disable cache" checkbox in the browser inspector.
But, there is a cache difference between those two files. (client vs project)...

How to change default view creation logic in visual studio?

I've looked here and here to try to answer this question as well as a billion Google searches, but have yet to come up with a solution.
My directory structure is a multi-tenant MVC site with an overridden view engine that uses Areas to serve content for different hosts that share a lot of common logic served globally from the base controllers and views folders. We have taken this a step further and broken out different global site sections into a new folder called SiteSections. Inside of this folder we have more Areas.
The issue I am having, is whenever I try to use the visual studio context menu from inside a controller that is inside the SiteSections folder, it always adds it to the global Views folder.
What I am assuming is happening is that since these are Areas held within a different directory, Visual Studio is searching the Areas folder for an Area with the name of which I am working in. Since this is kept in a different directory, it is just defaulting to the global one. I've looked into all the different T4 templates and do not see anything specifying the directory where the view will be created.
I have just one question, that I'm hoping is possible.
How can I override Visual Studio to look in a second directory for the Area in question?
Thanks in advance!
I experienced something like that, not with Areas, but with Folders.
Have you tried to add custom view engine on ViewEngines?
The steps that i followed:
1 - I put this line at Global.asax.cs on method Application_Start:
ViewsEngines.Engines.Add(new MyCustomViewEngine());
2 - I created the file named as MyCustomViewEngine inheriting from RazorViewEngine, for example:
public class MyCustomViewEngine : RazorViewEngine
{
public MyCustomViewEngine()
{
base.ViewLocationFormats = MyViewLocationFormats;
}
private static string[] MyViewLocationFormats = new[]
{
"~/Views/Folder/{0}.cshtml",
"~/Views/Folder_1/Folder_2/{0}.cshtml"
}
}
I think that you can use in this way: "~/Areas/Views/Folder/{0}.cshtml",
Hope this helps!

Global.asax.cs is not visible at the server

Running under Server08 | IIS7. I have a website project and am in the habit of hand editing the Global.asax.cs at the deployed site many times in the past. Recently I've found that only the Global.asax is present and has only:
<%# Application Codebehind="Global.asax.cs" Inherits="myDomain.MvcApplication" Language="C#" %>
There are simply no Global.asax.cs files present/visible for any of my active, functioning websites anymore.
I've checked here Global.asax can't find code-behind class and here where is the codes in Global.asax in mvc3? without getting anywhere. The second link contains the comment: 'That's because it's a compiled web application. You'll have to view it in Visual Studio as a project.'
But since my project has always been a website - and I've not converted it (intentionally) I'm puzzled by the changed behavior.
But when i step into VS12 and look at the context menu for the solution's WebProject it presents 'Convert to Web Application'. The sites' folder structures do not contain App_Data or App_Start. To my mind, these 2 fact establish at VS is treating the project as a website, why then, is the Global.cs compiled down to the /bin?
I'll close by repeating - I've hand edited these things in the past - I'm not positive but it's probably accurate to say that this is the first time I've tried to do so after installing VS12. And, coming to think on it harder - it's only recently that I've implemented the 'One Click Publishing' service so that could be coming into play.
verify? I'd like I need to edit a simple update without full re-deployment.
thx
I think the 'One Click Publishing' is most likely the culprit here. I created a sample Web Site project to experiment, and when I use the publish feature in Visual Studio, the files generated are indeed missing the Global.asax.cs file. Instead, a bin folder is created with a compilation called "App_global.asax.dll" even though it is a Web Site and not a Web Application. I am guessing this might be similar to what is happening for you as well.
If not, I found a link which might be useful to you in order to once again be able to edit a class on the server. Particularly, have a look at the second answer (the one not accepted as the best answer) to recreate a class file for the global code: Where is the Global.asax.cs file?
I tried this solution, and verified that the class file is editable on the server, and that it is dynamically compiled at run time (the modifications I made to the file worked immediately).
Hope this helps!
After editing the global.asax you need to rebuild and upload the DLL to the bin folder. Otherwise, your changes will not take effect.
You might be able to upload an web version of the global.asax that includes the code in that one file, which obviously does not require a .cs code behind. I used to do it with aspx files in an application but I have never tried it in the GLobal.asax file.

ASP.NET MVC3 project does not always publish all views/content

This is crazy, but I can't seem to get all my views/content/scripts published when I publish the site. This seems to happen, I believe, when the view or content is not directly referenced by my project, but used by another assembly in my project. So I might have:
ExternalAssembly.dll referenced (it gets published)
I'll need ExternalLogin.cshtml in my main project, under my views folder
ExternalLogin.cshtml doesn't get published
Right now I have a script that copies everything in the Views folder and dumps it to where I want it deployed, but VS should do this for me. What am I doing wrong?
When you click on one if these files what is the build action for it on the properties? Content....or? Set to content.
So your views files are in another project or folder outside your current project? Normally the files have to exist in the web site project, in it's views folder, not externally, and the build action should be set to Content and not to copy to the output folder. But there are some workarounds:
Duplicate them in to your site views folder and make sure they are marked content (as stated in another answer). One thing to note though is that you can add them as "Linked Files" in visual studio which actually allows them to exist in two places in the hierarchy without having to exist in two places on disk: http://support.microsoft.com/kb/306234
If you have control over the external library, you can compile them in as embedded resources or use Razor Generator or something similar and use a custom view engine to return them: How can I make ASP.NET MVC 3 use views (aspx, ascx) files from an external assembly in my website?
Manually put the copies in the .csproj build XML using the Copy task: http://msdn.microsoft.com/en-us/library/3e54c37h.aspx (Note that this will make it work in visual studio doing essentially what you are doing now, as it will then be part of the Visual Studio build if you add it to the AfterBuild target or something)

Resources