Can't Load Browser Dependencies Webpack - node.js

Question

I am trying to scaffold an Angular 6 app by hand (ie not using the CLI). I was doing OK until I ran into the following error when running webpack:
ERROR in window is not defined
Now from googling around it looks like I'm missing some polyfills since webpack uses node in order to generate it's output. I've reviewed the examples on Angular's site and added the polyfills.ts file to my application but I still can't get rid of the error.
Here is my webpack.confg.js:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtPlugin = require('script-ext-html-webpack-plugin');
const { AngularCompilerPlugin } = require('#ngtools/webpack');
module.exports = function() {
return {
entry: {
index: "./src/client/client.ts",
polyfills: "./src/client/polyfills.ts"
},
output: {
path: __dirname + "/client-dist",
filename: "[name].client.js"
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loader: '#ngtools/webpack'
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.css$/,
loader: ["style-loader", "css-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/src/client/index.html',
output: __dirname + '/client-dist',
inject: 'head'
}),
new ScriptExtPlugin({
defaultAttribute: 'defer'
}),
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: './src/client/app/app.module#AppModule'
})
]
}
}
My polyfills.ts file:
import 'core-js/es6';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
And my client.ts file (entry point of my application):
import './polyfills'
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
I'm sure I'm just doing something stupid but any help would be appreciated. Thanks!
EDIT 1:
After reading the article posted by #SureshKumarAriya I tried changing the following in my webpack.config:
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: './src/client/app/app.module#AppModule',
skipCodeGeneration: true // This is new
})
And I get a different error: ERROR in Resolution of relative paths requires a containing file.
I'm guessing this means it can't resolve one of the typescript files I reference in client.ts? I'm not sure this has gotten me any closer but still interesting.
As always thanks for the help!

Answer 1

Inside output cofiguration. please add globalObject: "this".
output: {
// ...
globalObject: "this"
}
https://github.com/markdalgleish/static-site-generator-webpack-plugin/issues/130

Answer 2

Seems like your dependencies still rely on the window object.
Do validate
typeof window !== 'undefined'
Please refer to the following link.