JavaScriptServices | This repository | Frontend Framework library

In the directory of my component, I've put an image. It's a good, old, plain PNG with a logotyp. So there are four files in there:

• blobb.png
• blobb.comp.ts
• blobb.comp.html
• blobb.comp.scss

In the HTML file, I used a static source link in a default IMG tag like this.

I need to return 404 on wrong api call so I can create proper response to user on client side (Angular 5). Currently backend returns status code 200 and index.html, and that results in json parse error on frontend.

I created new web project with ASP.NET Core 2.1 and Angular template project. Here's the link to published version of that template. I didn't change template code at all, I just published that on azure as it is. (In dev mode I get 404 error as expected).

As mentioned here default behaviour should be 404.

Here is the Startup.cs, and here SampleDataController.cs.

I thought of using something like this in Startup.cs:

I am running asp.net core 2.2 with Aurelia front end - a SPA.

I have had this running in core 3.0 however I had to derate to run OData (they havent put it into that version yet).

I have opened a CMD and typed npm run webpack:watch and fails so I looked up the first line of the error in SO and got this, but alas this is not a syntax issue - I have the right syntax.

(webpack is installed and its version is 4.38.0)

The error in detail:

I have pulled an existing ASP.NET Core application that previously worked on a different computer.

When I run the application on this computer, I get the following error:

I am very new to Webpack and the .NET Core 2 Angular SPA Template. I'm trying to create a global stylesheet for the entire site. I could reference that style in the Layout view to render it in the main view, but then I lose the benefits of the pre-render engine and bundling with WebPack (as well as minification).

The Webpack documentation says that in order to include static CSS that you need to add a require(../filepath) to your module, but I don't see a way to do this in the boot.browser.ts.

I'm still just getting started with .NET core so my site is basically just the OOB .Net Core 2 template with Angular. I'm keeping my global styles sheet in ClientApp/Styles/Global.css at the moment. Thanks for your time.

I am using Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-rc1-final which internally uses Create-react-app and AspnetCore.ReactDevelopmentServer

My Dev. Environment is using IIS for hosting multiple api's say api1 as http://localhost/api1 and api2 as http://localhost/api2

Problem is if I host my React app from Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-rc1-final template to http://localhost/myApp - it expects the files are always served with PublicPath "/" and hence does not work.

I know Create-react-app's Prod setup uses PublicPath from PUBLIC_URL or Homepage from package.json.

Is it possible to modify create-react-app setup to use a custom publicpath in Dev. environment?

I'm trying to understand the usage and limitations of server side rendering with vuejs when using aspnet core.

I used this starter kit for aspnet core and vuejs to setup a simple vue site, which is running based on the code here: https://github.com/selaromdotnet/aspnet-vue-ssr-test/tree/master

I then modified the project to update the aspnet-prerendering and added vue-server-renderer, compiling a hodgepodge of sources to cobble together this update: https://github.com/selaromdotnet/aspnet-vue-ssr-test/tree/ssr

If I run this project, the site appears to load fine, and if I turn off the javascript in the browser, I can see that it does appear that the server-side rendering executed and populated the html result:

however, because JavaScript is disabled, the content isn't moved into the dom as it looks like it is trying to...

My understanding of server-side rendering is that it would populate the html entirely and serve a completed page to the user, so that even if JS was disabled, they'd at least be able to see the page (specifically for SEO purposes). Am I incorrect?

Now I believe modern search engines will execute simple scripts like this to get the content, but I still don't want a blank page rendered if js is disabled...

Is this a limitation of server-side rendering, or perhaps specifically ssr with vue and/or aspnet core?

or am I just missing a step somewhere?

Edit: more information

I looked at the source code for what I believe is the method that prerenders the section here: https://github.com/aspnet/JavaScriptServices/blob/dev/src/Microsoft.AspNetCore.SpaServices/Prerendering/PrerenderTagHelper.cs

The line

I want to set access_token in header of axios as shown in following.

https://github.com/axios/axios#global-axios-defaults

Now I am getting access_token using razor syntax which is only available in CSHTML file.

https://github.com/IdentityServer/IdentityServer4.Samples/blob/release/Clients/src/MvcHybrid/Views/Home/Secure.cshtml

I am using typescript with vue.js using JavascriptServices

How can I set(pass) this await Context.GetTokenAsync("access_token") in my typescript file (lets say boot.ts) to set to axios default.

I'm trying to upgrade an ASP.NET Core + Angular 4 SPA project from .NET Core 2.0.0/Angular4 to .NET Core 2.0.3/Angular5. I managed to get everything working properly except for the server-side rendering in a production environment, i/e when I publish the app:

An unhandled exception has occurred: No NgModule metadata found for 'AppModule'.
Error: No NgModule metadata found for 'AppModule'.

The issue only happens when both of these two conditions are met:

• Webpack builds the packages using the --env.prod switch

• The Index.cshtml view file contains the asp-prerender-module parameter, just like in the following example:

  Loading...

If I remove the switch and/or the parameter, the problem disappears (together with SSR).

There's a bunch of other info I can give:

• It's not something related to IIS, it happens at Kestrel-level.
• It's not related to the web server machine because I can even reproduce it with locally by manually launching Webpack with the --end.prod switch right before a Debug or Release run.
• It doesn't seem to have anything to do with the source code, as I can reproduce it even with a single-component sample app with very basic AppModule files and trivial code.
• The project was running perfectly fine with .NET Core 2.0.0 and Angular 4.3.x.
• The only major thing I changed in the webpack.config.js file is replacing the AotPlugin with the new, Angular5-specific AngularCompilerPlugin provided by the @ngtools/webpack package: I think that might as well be the cause, as the --env.prod switch makes use of that AOT compiler instead of the JIT one. That, or something related to the .NET SpaServices package - maybe not on-par with the new Angular5 and/or the new AoT compiler?

Sadly, I can't revert to the former AotPlugin because it throws errors as well - which is perfectly understandable, as it's not meant to be used with Angular5.

Software Versions

• .NET Core 2.0.3
• Angular 5.0.2
• @ngtools/webpack 1.8.2 (also tried with 1.8.1 - same outcome)
• WebPack 2.6.1 (also tried with 2.5.6 - same outcome)

webpack.config.js