webpack-angular | organize codes when integrating AngularJS | Frontend Framework library

I have an Angular 5 project that works with Webpack 3. When I upgrade it to Webpack 4 (and doing the required changes), the typescript source files are presented after being compiled to Javascript (but not minified).

For example, I've used Angular CLI 1.7.4 to create a new project, and I ejected the Webpack config:

yarn global add @angular/cli@1.7.4

ng set --global packageManager=yarn

ng new project1

ng eject

Then I've updated Webpack and all of the required packages

yarn add --dev @ngtools/webpack angular-named-lazy-chunks-webpack-plugin html-webpack-plugin url-loader webpack webpack-cli webpack-dev-server

And finally, I did the required changes in webpack.config.js:

• Add "mode": "development"
• Remove NoEmitOnErrorsPlugin and NamedModulesPlugin
• Replace NamedLazyChunksWebpackPlugin with AngularNamedLazyChunksWebpackPlugin
• Delete CommonsChunkPlugin and add optimization->splitChunks

When I'm running the project (with "yarn start", which calls "webpack-dev-server"), I'm seeing the typescript source files, but they're compiled to Javascript.

app.component.ts - with Webpack 3 (webpack:///./src/app/app.component.ts):

I recently started the move from a custom gulp script that used to take care of all sorts of stuff to webpack. I have it working to a point where transpiling, bundling and serving the client app in the browser works great.

Now, when I was using gulp to run my karma tests against the bundled app.js file, the gulp script would first bundle the app.js file and then spit it into the dist folder. This file would then be used by karma to run the tests against it. My gulp test task would also watch for any test file changes or for the bundle file change, and re-run the tests based on that.

With webpack, I understand this dist/app.js resides in-memory, rather than being written to the disk (at least that's how I set it up). The problem with that is that it seems that my bundled app (which gets served fine with webpack-dev-server --open) does not get loaded by karma for some reason and I can't figure out what the missing piece of the puzzle is.

This is how my folder structure looks like (I left just the most basic stuff that could be relevant to the issue):

I have problems with the tutorial webpack-angular from egghead.io. I'm in the step 3 "ES6 with Babel".

I need your help because I would like to resolve it.

I'm following your tutorial and I'm freezing in this step:

This is the message Chrome devTool where I got an error

...........