Aurelia/.NetCore 404 error on app.bundle.js

Help Requests
1

I have to admit, while I love Aurelia, trying to get it to work with .NetCore has proved extremely frustrating. Here are the steps I just took on a new project that results in the Loading … page and a 404 error loading app.bundle.js. (Also an error stating that says it was loaded even though the MIME type of ("") is not a valid JavaScript MIME type.)

  1. I had an existing .NetCore MVC shell that I’m using.
  2. I delete the Home Controller and Home/Index View.
  3. In the project directory, I run au new --here
  4. I use WebPack, (tried both Babel and TypeScript), Sass, HTML2, No Editor Config, No Test Harness
  5. When it completes, I ensure the necessary changes are made via instructions.txt

Now when I run the project, I get the Loading … page and that’s it. The console windows shows the notifications that I listed above.

Thinking that maybe this had something to do with my .NetCore shell project, I started from scratch and did au new NewTest and let the CLI create everything. Same result!

I’m using Visual Studio 2017, Aurelia CLI v. 1.0.0-beta.14, npm v. 6.1.0 and nodejs v. 10.3.0

Any thoughts on what is going on?

2

Try this:

Also, this may be of interest (if you use Visual Studio):

3

Thanks, that partially helped. (And I’m a bit embarrassed because the answer you referenced was from you helping me on one of my previous posts – I didn’t even remember that bit of code.)

Anyhow, that definitely got the site to load. However, if I run the app and change the message property in app.ts, you can see the site reload (I’m guessing WebPack is kicking in there), but the changes made do not appear. Even if I hit the refresh button, the changes do not appear.

I actually have to stop the app and re-run it for the changes I made in app.ts to show up. I’m guessing this is some sort of webpack config thing but wouldn’t have the faintest as to where to look.

4

Rebuild then refresh, or use:

au build --watch

Then your changes should force a rebuild automatically (not strictly true but in effect) and a refresh should show them.

5

Hmm, I guess I was under the impression that the WebpackMiddleware in startup was somehow supposed to be watching for changes. Is that not the case?

6

Oh, I do not use that. I found it simpler to use my own config rather than not knowing where or when things will break using the default templates. There is a whole lot of posts that I made showing my experience with the default templates and how they did not work, that led to a whole load of experiments, templates then a Visual Studio extension.

7

Something still doesn’t seem to be working right. When I make the change to app.ts in VS and save it, I can see some activity in the Output window that would indicate something (maybe the MiddleWare) saw the changes and is updating something.

However, the changes are definitely not being “re-built” because even if I open a different browser or a Private window, I’m getting the old code until I restart the app. This is true even if I have au build --watch running.

8

Any idea when that VS template will be production ready?

9

If you open your \wwwroot\dist folder and make a change to a file and save, you should see (I do) the newly generated vendor~{hash}.chunk.js files appear.

Also you could use BrowserLink:

I am working on it when I get the time. I update every few days. There is still quite a lot to do and can not say when it could be called production ready. I use it along side the CLI now, but that is just me.

10

**(You can ignore these two paragraphs – I just re-read your previous message and understand that you weren’t suggesting to edit a file in wwwroot\dist but rather open that dir so that I can see the file changes.)
Do you not keep your code in src and have it build into \wwwroot\dist? I thought that was how templates were set up to build.

I did try editing \wwwroot\dist\app~....chunk.js while au build --watch was running – but still nothing?
**

This is all curious because the project I’m playing in at this point was all created by the CLI – this wasn’t me creating partial code and adding Aurelia to it. So it seems like the --watch tag should be working.

Do you use TypeScript or Babel – just curious if the webpack scripts could be working differently or something.

11

Yes of course. I was just making the point that you can see the files being generated after a saved change by looking at the \wwwroot\dist folder.

Good point. I use TypeScript.

12

So, what I’m seeing is that app~A...chunk.js gets built.

If I make a change in my \src\app.js file and save the file, I can see all the files in \wwwroot\dist\ get updated (date modified changes). app~A...chunk.js still exists with the old code and a new app~B...chunk.js file now exists (and contains my changed code).

However, if I hit reload on the webpage (even though when I saved the file the browser window automatically refreshed on its own), and look at what is being loaded, it is still loading the first app~A...chunk.js file. If I delete that file and only leave the app~B file, I get an error on the refresh that says it can’t find app~A.

Any thoughts as to why it isn’t trying to load the new .js?

13

If you can post an example project to GitHub I could answer. It is almost impossible to understand what is going on without any code to view really.

14

Okay, so I got it to work by comparing to an older project that I had. I don’t believe this has to do with Typescript/Babel differences. I could post this on GitHub but its probably easier to just post this. (Essentially, I’m working with nothing more than the CLI .NetCore template code)

  1. au new MyTestProject
  2. Select Custom >> Webpack >> Http/1.1 >> Asp.Net Core >> Bable/Typescript (shouldn’t matter) >> Maximum minification >> Sass >> No Test Runner >> No Integration Testing >> No default code editor >> No scaffolded features
  3. I delete the .editorconfig file as it has cause me issues in the past
  4. Open the project in VS 2017
    At this point, if you run the project, you will hit my original issue
  5. Edit the View Home\Index.cshtml and make the changes you noted above for Development.
    At this point if you run the project, you will encounter my current issue – refresh with no real update.
  6. Once again edit Home\Index.cshtml and replace:

<script type="text/javascript" asp-src-include="~/dist/*.bundle.js" asp-append-version="true"></script>

with

<script type="text/javascript" src="~/dist/app.bundle.js" asp-append-version="true"></script>

  1. Edit webpack.config.js and remove the entire optimization section.

Now if you run the project, you will see that code automatically gets updated (with no need for au build --watch)

Again, not being a webpack expert, I’m not sure what I’m losing by removing the optimization, but that is definitely playing a part in keeping the refresh from working.

15

The approach I use is different. In short, I use an embedded JavaScript template file and the HtmlWebpackPlugin to generate an MVC partial view which injects all the correct script files, and I include that partial where I want my Aurelia app to appear in my MVC project. It is just a modification of the approach that us used by the ‘index.ejs’ originally.

16

Let me just say, first, thanks so much for all the time and help! I really do appreciate it.

I’m trying to follow what you’re saying. Looking at what the Aurelia CLI generates, I’m trying to figure out how what you’re doing is different.

In the webpack.config.js file generated by the CLI, I can see that they also are using the HtmlWebpackPlugin. They are also using an MVC partial view to inject scripts and add the aurelia-app="main" script where they want the app to appear.

I’m curious where the CLI generated code differs from what you do? Also, is the VS template that you’re working on following the approach that you use?

17

The simplest way to understand, I think, would be to:

Create folders:

Comparison
> Site1
> Site2

Then create a your site in folder ‘Site1’.
In folder ‘Site2’ create a site with the VS extension.
Then compare both sites with something similar to WinMerge (or manually if you wish). The differences are not that many.

Check the webpack.config; a new entry for ‘HtmlWebpackPlugin’ to generate a partial view via the file Views.Shared._AppPartial.cshtml.ejs.

18

We have a .net core template available that will do everything for you

dotnet new -i aurelia.dotnet.templates

dotnet new aurelia (default settings)

1 Like
19

This has all CLI options available to scaffold as well. Plus --secure option will scaffold out an enterprise ready SPA with the following options

Security
API versioning
SignalR
Swagger
EF core
Auditing
Logging

2 Likes
20

Is there a way to target .netcoreapp2.1? (I don’t typically use the dotnet command so I’m a bit unfamiliar). The documentation here states that it targets 2.1, but when I try to run dotnet restore, I get an error stating that The current .NET SDK does not support targeting .NET Core 2.2

2 Likes