Javascriptservices: Question: Remove server side rendering packages and code

[Vx2gas]

I've seen a few people ask and few people respond in different issues.... However, is there some specific steps I can take to remove server-side rendering? I would like to have just client only.

Any help/advice would help greatly than me trying to debug this.

Thanks!

[AmrineA]

I'll do my best and if I miss something and it doesn't work for you, let me know and I'll check the project I've got working.

webpack.config.vendor.js
Remove angular2-universal from vendor section
Remove angular2-universal-polyfills from vendor section
Remove serverBundleConfig
Replace:
new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')),

with:
new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')),

webpack.config.js
Remove serverBundleConfig

package.json
Added angular/animation, core-js, es6-promise
Upgraded angular packages to ^4.0.0
Removed angular2-universal, angular2-universal-patch, angular2-universal-polyfills, isomorphic-fetch
Upgraded other packages to the latest versions at the time

Views/Home/Index.cshtml
Removed _asp-prerender-module="ClientApp/dist/main-server"_

ClientApp/polyfills/polyfills.ts
Added this file with the following:

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

import 'zone.js';

ClientApp/boot-server.ts
Deleted this file

ClientApp/boot-client.ts
Changed the file to the following:

import './polyfills/polyfills.ts';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const rootElemTagName = 'app'; // Update this if you change your root component selector

// Enable either Hot Module Reloading or production mode
if (module['hot']) {
    module['hot'].accept();
    module['hot'].dispose(() => {
        // Before restarting the app, we create a new root element and dispose the old one
        const oldRootElem = document.querySelector(rootElemTagName);
        const newRootElem = document.createElement(rootElemTagName);
        oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem);
        platform.destroy();
    });
} else {
    enableProdMode();
}

// Boot the application, either now or when the DOM content is loaded
const platform = platformBrowserDynamic();

const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
    bootApplication();
} else {
    document.addEventListener('DOMContentLoaded', bootApplication);
}

ClientApp/app/app.module.ts
Replaced UniversalModule in the import at the top with:

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

Replaced UniversalModule in the imports area with:

BrowserModule,
HttpModule,

When this is all done, I run the following commands:

npm prune
npm install
webpack --config webpack.config.vendor.js

[Vx2gas]

Thank you! I can confirm this works to remove the server side rendering. Working on getting angular4 next.

[SteveSandersonMS]

Thanks @AmrineA!

Also, anyone who just wants to disable server-side prerendering temporarily for testing can do so quickly just by removing the asp-prerender-module attribute from the <app> element in Index.cshtml.

[Vx2gas]

Okay, I upgraded everything to angular 4, and now I get this when I compile with webpack.

WARNING in ./~/@angular/core/@angular/core.es5.js
    5877:15-36 Critical dependency: the request of a dependency is an expression

Any suggestions?

[AmrineA]

I also get the same thing, but it hasn't stopped anything from working so I honestly haven't dived further into it yet. I'll take a little time and see if I can figure out what causes it and let you know.

[AmrineA]

@Vx2gas The solution is to replace:

new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')),

with:

new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')),

in the webpack.config.vendor.js. I'll update the original steps to include this in there.

[Vx2gas]

@AmrineA : Awesome. I can confirm the webpack changes makes it work with no errors.

[Arminea]

@Vx2gas Hi, I think you meant @AmrineA :)

[Vx2gas]

Lol... Sorry.. Fat fingers! Fixed my comment!

[ranouf]

Hello,

I have this error after have done the modifications (included @AmrineA modifications):
in startup.cs, I have the comment this part, HMR is not found
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
//app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
//{
// HotModuleReplacement = true
//});
}
Then, when I launch the app:
ReferenceError: vendor_0b4ec65c6b59f0a87c6a is not defined

My vendor is generated with warning: webpack --config webpack.config.vendor.js
Hash: 9dff2ab2c3fced1fc1e019dba808b9e1483b8522
Version: webpack 2.6.1
Child
Hash: 9dff2ab2c3fced1fc1e0
Time: 20185ms
Asset Size Chunks Chunk Names
vendor.js 9.02 MB 0 [emitted] [big] vendor

WARNING in ./~/@covalent/core/~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
71:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@covalent/core/~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
87:15-102 Critical dependency: the request of a dependency is an expression

Child
Hash: 19dba808b9e1483b8522
Time: 20165ms
Asset Size Chunks Chunk Names
vendor.js 8.31 MB 0 [emitted] [big] vendor

WARNING in ./~/@angular/core/bundles/core.umd.js
5906:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@angular/core/bundles/core.umd.js
5922:15-102 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@covalent/core/~/@angular/core/bundles/core.umd.js
8793:19-40 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@covalent/core/~/@angular/core/bundles/core.umd.js
8809:19-106 Critical dependency: the request of a dependency is an expression

Can you help me?

[AmrineA]

@ranouf Can you post your package.json? Your vendor.js file seems quite large compared to the standard one that I get, but that could be because you've added additional packages, which should be fine, but could also be the root of the problem.

[joelprees]

On "dotnet watch run" I was getting:

WARNING in ./~/@angular/core/@angular/core.es5.js
5704:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@angular/core/@angular/core.es5.js
5720:15-102 Critical dependency: the request of a dependency is an expression

Resolved by "plugins" in webpack.config.vendor.js looking like this:

        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
        new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
        // new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898

        new webpack.ContextReplacementPlugin(
            // if you have anymore problems tweet me at @gdi2290
            // The (\\|\/) piece accounts for path separators for Windows and MacOS
            /(.+)?angular(\\|\/)core(.+)?/,
            path.join(__dirname, './ClientApp'), // location of your src
            {} // a map of your routes 
          ), //https://github.com/angular/angular/issues/11580#issuecomment-282705332 gdi2290 6 Sep

        new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100