Angular: Prerendering does not work when app is published #315

New Issue

fergalmoran · 2025-08-09T17:15:49Z

fergalmoran commented

2025-08-09 17:15:49 +00:00

Originally created by @danielpalme on 11/17/2017

The problem

Prerendering does not work when a web application (based on the default Angular template) is upgraded to Angular 5.

Disclaimer:

I'm not sure who can fix this problem. Maybe it's a problem of angular-cli.

Steps to reproduce:

Create new project using default Angular template of VS 2017

Create a new "ASP.NET Core Web Application" using the Angular template (Target ".NET Core" with ASP.NET Core 2.0).
I'm using VS 2017 in version 15.4.4

Upgrade to Angular 5

Now I upgraded to Angular 5 and updated all other packages. This results in the following package.json:

{
  "name": "WebApplication",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "devDependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ngtools/webpack": "1.8.0",
    "@types/chai": "4.0.4",
    "@types/jasmine": "2.6.3",
    "@types/webpack-env": "1.13.2",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.3.0",
    "bootstrap": "3.3.7",
    "chai": "4.1.2",
    "css": "2.2.1",
    "css-loader": "0.28.7",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.11",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.5",
    "html-loader": "0.5.1",
    "isomorphic-fetch": "2.2.1",
    "jasmine-core": "2.8.0",
    "jquery": "3.2.1",
    "json-loader": "0.5.7",
    "karma": "1.7.1",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-webpack": "2.0.5",
    "preboot": "5.1.7",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "^5.5.2",
    "style-loader": "0.19.0",
    "to-string-loader": "1.1.5",
    "typescript": "^2.4.2",
    "url-loader": "0.6.2",
    "webpack": "3.8.1",
    "webpack-hot-middleware": "2.20.0",
    "webpack-merge": "4.1.1",
    "zone.js": "0.8.18"
  }
}

Fix Webpack issue

If you publish the application now, you will get the the following error:
Please update @angular/cli. Angular 5+ requires at least Angular CLI 1.5+

This issue is documented here:
https://github.com/angular/angular-cli/issues/8333#issuecomment-341907713
https://github.com/angular/angular/issues/19913

It can be fixed by updating webpack.config.js.
The AotPlugin has to be replaced with the AngularCompilerPlugin.

Now publishing the app is possible without any errors.

Run the application

If you execute the published application with dotnet MyApplication.dll and visit the website you will see the following error in the browser:

The log shows the following error:

Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware[0]
An unhandled exception has occurred: No ResourceLoader implementation has been provided. Can't read the url "app.component.html"
Error: No ResourceLoader implementation has been provided. Can't read the url "app.component.html" at Object.get (bin\Release\PublishOutput\ClientApp\dist\vendor.js:98059:15)

Workaround

The problem can be "hidden" if prerendering is disabled. When Views\Home\Index.cshtml is changed from

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

to

<app>Loading...</app>

you are able to use the published app, but of course without server side prerendering.

Other ideas

If you look at the source code of AngularCompilerPlugin, you can find an option called platform (see angular_compiler_plugin.ts
Setting that option in webpack.config.js did not result in any improvements.

Source code

Here is the full source code of my demo application: Issue_Angular5_Publish.zip

*Originally created by @danielpalme on 11/17/2017* # The problem Prerendering does not work when a web application (based on the default Angular template) is upgraded to Angular 5. ## Disclaimer: I'm not sure who can fix this problem. Maybe it's a problem of [angular-cli](https://github.com/angular/angular-cli). # Steps to reproduce: ## Create new project using default Angular template of VS 2017 Create a new "ASP.NET Core Web Application" using the _Angular_ template (Target ".NET Core" with ASP.NET Core 2.0). I'm using VS 2017 in version 15.4.4 ![image](https://user-images.githubusercontent.com/859606/32951840-a8ee1868-cbab-11e7-904e-dc6f48b44d40.png) ## Upgrade to Angular 5 Now I upgraded to Angular 5 and updated all other packages. This results in the following package.json: ```json { "name": "WebApplication", "private": true, "version": "0.0.0", "scripts": { "test": "karma start ClientApp/test/karma.conf.js" }, "devDependencies": { "@angular/animations": "^5.0.0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/compiler-cli": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/platform-server": "^5.0.0", "@angular/router": "^5.0.0", "@ngtools/webpack": "1.8.0", "@types/chai": "4.0.4", "@types/jasmine": "2.6.3", "@types/webpack-env": "1.13.2", "angular2-router-loader": "0.3.5", "angular2-template-loader": "0.6.2", "aspnet-prerendering": "^3.0.1", "aspnet-webpack": "^2.0.1", "awesome-typescript-loader": "3.3.0", "bootstrap": "3.3.7", "chai": "4.1.2", "css": "2.2.1", "css-loader": "0.28.7", "es6-shim": "0.35.3", "event-source-polyfill": "0.0.11", "expose-loader": "0.7.3", "extract-text-webpack-plugin": "3.0.2", "file-loader": "1.1.5", "html-loader": "0.5.1", "isomorphic-fetch": "2.2.1", "jasmine-core": "2.8.0", "jquery": "3.2.1", "json-loader": "0.5.7", "karma": "1.7.1", "karma-chai": "0.1.0", "karma-chrome-launcher": "2.2.0", "karma-cli": "1.0.1", "karma-jasmine": "1.1.0", "karma-webpack": "2.0.5", "preboot": "5.1.7", "raw-loader": "0.5.1", "reflect-metadata": "0.1.10", "rxjs": "^5.5.2", "style-loader": "0.19.0", "to-string-loader": "1.1.5", "typescript": "^2.4.2", "url-loader": "0.6.2", "webpack": "3.8.1", "webpack-hot-middleware": "2.20.0", "webpack-merge": "4.1.1", "zone.js": "0.8.18" } } ``` ## Fix Webpack issue If you publish the application now, you will get the the following error: `Please update @angular/cli. Angular 5+ requires at least Angular CLI 1.5+` This issue is documented here: https://github.com/angular/angular-cli/issues/8333#issuecomment-341907713 https://github.com/angular/angular/issues/19913 It can be fixed by updating `webpack.config.js`. The `AotPlugin` has to be replaced with the `AngularCompilerPlugin`. Now publishing the app is possible without any errors. ## Run the application If you execute the published application with `dotnet MyApplication.dll` and visit the website you will see the following error in the browser: ![image](https://user-images.githubusercontent.com/859606/32952367-5ce1b14e-cbad-11e7-9431-8387595bb130.png) The log shows the following error: ``` Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware[0] An unhandled exception has occurred: No ResourceLoader implementation has been provided. Can't read the url "app.component.html" Error: No ResourceLoader implementation has been provided. Can't read the url "app.component.html" at Object.get (bin\Release\PublishOutput\ClientApp\dist\vendor.js:98059:15) ``` ## Workaround The problem can be "hidden" if prerendering is disabled. When `Views\Home\Index.cshtml` is changed from `<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>` to `<app>Loading...</app>` you are able to use the published app, but of course without server side prerendering. ## Other ideas If you look at the source code of `AngularCompilerPlugin`, you can find an option called `platform` (see [angular_compiler_plugin.ts](https://github.com/angular/angular-cli/blob/master/packages/%40ngtools/webpack/src/angular_compiler_plugin.ts#L276) Setting that option in `webpack.config.js` did not result in any improvements. ## Source code Here is the full source code of my demo application: [Issue_Angular5_Publish.zip](https://github.com/aspnet/JavaScriptServices/files/1482712/Issue_Angular5_Publish.zip)

fergalmoran closed this issue

2025-08-09 17:15:49 +00:00

fergalmoran referenced this issue

2025-08-09 17:18:33 +00:00

templates/ReactReduxSpa uses ExtractTextPlugin in development mode #1016

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#315