At this put stuff in "Post-build event command line:" maybe? The commands you would run from a shell?
Addendum 2/5/2020: The following ends up in the .csproj file:
<Target Name="PostBuild" AfterTargets="PostBuildEvent">
<Exec Command="cd ClientApp
npm run build" />
</Target>
The cheatsheet here (by "admin") starts out with some of what I suggest here, namely running commands (from a command prompt navigated to the root of your application as "Administrator") like so:
The last of these commands behaves differently than just npm install insofar as it will make a dist folder which the rest of the app will read from when sucking Angular 8 into a view. Also, you will need to run this last command every time you make a change in the Angular stuff to update the rest of the application. Other challenges along the way you may face include this, this, and this as well. This needs to be shoved into a view where you loop in Angular.
<app-root></app-root>
<script src="/ClientApp/dist/portal/runtime-es2015.js" type="module"></script>
<script src="/ClientApp/dist/portal/runtime-es5.js" nomodule defer></script>
<script src="/ClientApp/dist/portal/polyfills-es5.js" nomodule defer></script>
<script src="/ClientApp/dist/portal/polyfills-es2015.js" type="module"></script>
<script src="/ClientApp/dist/portal/styles-es2015.js" type="module"></script>
<script src="/ClientApp/dist/portal/styles-es5.js" nomodule defer></script>
<script src="/ClientApp/dist/portal/vendor-es2015.js" type="module"></script>
<script src="/ClientApp/dist/portal/vendor-es5.js" nomodule defer></script>
<script src="/ClientApp/dist/portal/main-es2015.js" type="module"></script>
<script src="/ClientApp/dist/portal/main-es5.js" nomodule defer></script>
The way the blog posting in the very first link I give in this blog posting undertakes to summon in the markup here out of /ClientApp/dist/portal/index.html is overkill. Do your own thing. Jam this stuff into a partial.
The inputs, be they password or checkbox, just become regular fill-in-the-blank inputs.
This will have you making something like this:
using System;
using System.IO;
using System.Linq;
using System.Text;
using HtmlAgilityPack;
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Razor.TagHelpers;
namespace Portal.Web.TagHelpers
{
[HtmlTargetElement("angular-app")]
public class AngularAppTagHelper : TagHelper
{
public AngularAppTagHelper()
{
}
public string App { get; set; }
public override void Process(TagHelperContext context, TagHelperOutput output)
{
//throw new Exception("yikes");
using (var sr = new StreamReader(AppDomain.CurrentDomain.BaseDirectory +
@"\ClientApp\dist" + App + @"\index.html"))
{
string htmlRaw = sr.ReadToEnd();
var htmlDoc = new HtmlDocument();
htmlDoc.LoadHtml(htmlRaw);
var body =
htmlDoc.DocumentNode.ChildNodes.FindFirst("body").ChildNodes.Where(x
=> x.Name == "script");
StringBuilder sb = new StringBuilder("");
foreach (var item in body)
{
string scriptTag = String.Format("$<script src=\"/ClientApp/dist/{0}/{1}\">
</script>", App, item.Attributes["src"].Value);
sb.AppendLine(scriptTag);
}
output.Content.AppendHtml(new HtmlString(sb.ToString()));
}
}
}
}
In the name of injecting Angular 2+ gunk into Razor views like so:
<app-root></app-root>
@section Scripts{
<angular-app app="portal"></angular-app>
}
\Views\_ViewImports.cshtml gets this in it:
@using Portal.Web.TagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
I cannot for the life of me get any of this to work. I cannot set a breakpoint inside of the Process method and land in there. Lame!
Fix this in Angular by putting this in head:
<base href="/">
Andrea Edstrom, who runs a CodePen meetup herself, was not the first speaker nor the last, but gave the talk with the most meat. Only a Terry Schubring, pictured at left with Brandon Johnson who namedropped Flutter, was scheduled to speak with Ms. Edstrom, pictured immediately below, and he spoke first and then after Andrea spoke three other peeps in the crowd piped up with impromptu ideas for talks and, yep, gave little talks. Terry's talk gave an exposition of a virtual synthesizer he made (um, with JavaScript) that really can just run on a laptop and be a real synthesizer and cost thousands of dollars less than a traditional synthesizer. This esoteric flavoring was not lost in Andrea's presentation either. She referenced WeCo Accessibility Services, a Minneapolis-based accessibility testing company that actually employs handicapped individuals as testers, but there was also some meat on the plate with the parsley while the other speakers just served parsley. Four things to communicate in creative mockups include, firstly, a delineation between what is a hyperlink from what is a button, as sometimes you might want a hyperlink that looks like a button, etc., and, third on the list, a tab order. Items two and four were sort of sisters. The second item was an accessibility name, communicating to the user and telling the user what an HTML element is, while the fourth was a role jammed inline in a tag like roles="rolename" to tell the reader semantically what a thing is and, yes, items two and four could be wildly different. You could have pseudolinks that behave like buttons. I was making one of these at work just this week and then found myself lying awake at night wondering if that stunk. I guess it doesn't have to smell so bad if I follow Andrea's suggestions. She referred to what I would think of as a carousel as a slider, told us to be wary of text overlaying images, and emphasized using semantic HTML tags such as header, nav, footer, and aside. The aside tag is for a sidebar callout. webaim.org and learnui.design help you make color palettes for mockups in a handoff from creative to coders. Storybook, a11y, Lighthouse, and Deque Axe ("The Axe") were all mentioned in the talk as well.
Jason Webb gave a talk on "space colonization" which showed off lines growing outwards at random in something like fractals if you can imagine that randomness too. There were both 2D and 3D treatments to show off. I guess the underlying algorithms were in JavaScript.
Luke Penna showed us paralex images which are made of many 2D images overlaying each other in such a way that a 3D effect occurs as the foreground and background items move differently when someone scrolls a scrollbar. The images themselves are just kept in a series of div tags.
Harrison Nguyen showed us an application he wrote wherein you punch in a zip code and the app recommends clothes for you to wear based upon the weather at that zip code which is gleamed via an API call. PerSuede is the name of his application. He hopes to eventually link recommended clothes to sites that sell the clothes.
The pizza was an hour late and so a huge line formed for the pizza when it did show up. We broke from the other proceedings midstream for pizza.
It was Domino's I know. Andrea mentioned the Domino's lawsuit due to a lack of accessibility. I think a blind person successfully sued due to an inability to use the website.
The line was kind of random like Jason Webb's lines. It bent back on itself in a U shape I suppose.
