Angular: Prerendering does not work when app is published

[danielpalme]

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:
angular/angular-cli#8333 (comment)
angular/angular#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

[chamikasandamal]

I did the same for Angular 5.0.2 and experiencing same issue. please provide a solution or workaround for this.

[juanchojbarroso]

me too, I don't know why that is doing.

[ofaruk09]

+1

[justin-ruffin]

At the top of your webpack.js file do you have referenced?

Angular 5
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;

or

Angular 4
const AotPlugin = require('@ngtools/webpack').AotPlugin;

Also make sure you have upgraded to "ngtools/webpack@1.8.3".

Then update webpack.config.vendor.js with an additional plugin
new webpack.ContextReplacementPlugin(/@angular(\|/)core(\|/)esm5/, path.join(__dirname, './ClientApp')), // Workaround for angular/angular#20357 Angular 5.0.1 issue

However, then you will have a new issue.

NodeInvocationException: No NgModule metadata found for 'AppModule'. Error: No NgModule metadata found for 'AppModule'. at NgModuleResolver.module.exports.NgModuleResolver.resolve

[danielpalme]

@justin-ruffin
I'm using const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
and ngtools/webpack@1.8.0

Thanks for the hint for the additional plugin, but replacing one issue with another issue does not help in the end ;-)

[justin-ruffin]

@danielpalme

It's possible my secondary issue is being caused by a custom configuration.

Does adding "new webpack.ContextReplacementPlugin(/@angular(|/)core(|/)esm5/, path.join(__dirname, './ClientApp')),"
webpack.vendor.config.js resolve "No ResourceLoader implementation has been provided"?

[danielpalme]

@justin-ruffin
I will check that tomorrow!

[danielpalme]

Just tried it myself. I also get the error No NgModule metadata found for 'AppModule'.

[SteveSandersonMS]

Angular 5 includes breaking changes (versus Angular 4) meaning that the code for server-side rendering has to be very different. As such the existing template can't be upgraded to Angular 5 as simply as that, except if you turn off server-side rendering. We're working on an Angular 5 template here: #1288 (comment)

[MMilan19]

Angular: Prerendering does not work when app is published on server, does not display dynamic data HTML tags on ViewSource page. On Local host It is working fine. I've tried lot but didn't find anything.
you can check issue in below link.
https://github.com/aspnet/JavaScriptServices/issues/1710