Abrupt break of hot reload

[nayfin]

EDITED I've been working my way through the course, starting with the first folder of a section and building it out along with the lessons, everything working as expected. Then about halfway through lesson 47-router-tracing, I started getting the following error after the hot-reload triggered after a save:

client?11a9:119 Cannot determine the module for class AppComponent in C:\Users\Allende\Desktop\Dev\tutorials\angular-pro-src\47-route-tracing\app\app.component.ts! Add AppComponent to the NgModule to fix it.

Everything works until the first hot-reload then I get the same error, regardless of what I change, even just adding a word to an HTML template. If I stop the server and restart, it works again until the next hot-reload.

This only happens in folders after 46-async-custom-validators, I have retested and can confirm this.

Notes:

• Setup: yarn add node-sass -D yarn install yarn start
• From the beginning I have had to yarn install node-sass -D separately, I get build errors if I don't. Until lesson 47 this wasn't an issue.
• After a few hot-reloads the terminal running the server freezes
• Tried upgrading dependencies to latest and got compiler._compileSrcFile is not a function error
• Reforked the repository, no change
• I forked the angular-pro-app-seed and I don't have the same issues.
• Environment:
  • Windows 10
  • node 8.2.1,
  • yarn 0.27.5 initially and then upgraded to 1.1 locally and globally
  • VS Code 1.16.1

Thank you for this great course I've learned a lot and am anxious to finish. Any help would be much appreciated.

[ndovgaluk]

Yeh, I do confirm the same issue happening to me as well. 56-Lazy-Loading module after you change source code doen't hot reload correctly in browser untill you recompile everything again. For instance if you change a bit template in mail-view.component.ts (add any text there), the portion of code will be recompiled automatically and in browser you'll get: "client?59d4:119 Cannot determine the module for class MailViewComponent in 56-lazy-loading\app\mail\components\mail-view\mail-view.component.ts! Add MailViewComponent to the NgModule to fix it." Basically this approach doesn't work for AOT with webpack and seed that you provided. Better to use alternative AngularCLI. Just remove this lines in webpack.config.js (or copy from working sub folder, for instance from 36-formbuilder (had to remove @ symbol here): var aot = require('ultimate/aot-loader');

loader: 'ultimate/aot-loader'

new aot.AotPlugin({ tsConfig: './tsconfig.json' }),

[iambateman]

I ran into this issue as well.

The error I got was Cannot find module './ngfactory/app/app.module.ngfactory'

I'm an epic n00b but I was able to change webpack.config.js to the code below and it appears to run. These changes were based on @ndovgaluk's suggestions...thanks!

var path = require('path');
var fs = require('fs');

var webpack = require('webpack');
var server = require('webpack-dev-server');
var chalk = require('chalk');
var ts = require('awesome-typescript-loader'); // not in use right now I think.
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
var jsonServer = require('json-server');
// var aot = require('@ultimate/aot-loader'); // had to remove b/c breaking.
var cwd = process.cwd();

// also removed
  /*
    FROM PLUGIN
    new aot.AotPlugin({
      tsConfig: './tsconfig.json'
    }),

    FROM LOADER for .ts
    loader: '@ultimate/aot-loader'
  */

module.exports = {
  cache: true,
  context: cwd,
  performance: {
    hints: false
  },
  devServer: {
    contentBase: cwd,
    compress: true,
    inline: true,
    hot: true,
    port: 4000,
    publicPath: '/build/',
    quiet: true,
    historyApiFallback: true,
    setup: function (app) {
      app.use('/api', jsonServer.router('db.json'));
    },
    stats: {
      chunks: false,
      chunkModules: false
    }
  },
  devtool: 'sourcemap',
  entry: {
    app: [
      'reflect-metadata',
      'ts-helpers',
      'zone.js',
      'main'
    ]
  },
  output: {
    chunkFilename: '[name].chunk.js',
    filename: '[name].js',
    path: path.resolve(cwd, 'build'),
    publicPath: '/build/',
    sourceMapFilename: '[name].map'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'awesome-typescript-loader'
          },
          {
            loader: 'angular2-template-loader'
          }
        ]
      },
      {
        test: /\.html/,
        loader: 'raw-loader'
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'raw-loader'
          },
          {
            loader: 'resolve-url-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  },
  node: {
    fs: 'empty',
    global: true,
    crypto: 'empty'
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: './',
      manifest: require(path.resolve(cwd, 'vendor/vendor-manifest.json'))
    }),
    new webpack.NamedModulesPlugin(),
    new ProgressBarPlugin({
      format: chalk.magenta.bold('build') + ' [' + chalk.green(':bar')+ '] ' + chalk.green.bold(':percent') + ' ' + chalk.yellow.bold(':elapsed seconds') + ' ' + chalk.white(':msg'),
      clear: false
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  resolve: {
    extensions: ['.ts', '.js'],
    modules: ['node_modules', cwd]
  }
};

[iambateman]

Update: my approach broke in lesson 56.

[casvil]

Same https://github.com/UltimateAngular/angular-pro-src/issues/5

His approach using rm -rf node_modules, then yarn install + yarn start works.