Abrupt break of hot reload #3

Activity

1. ndovgaluk commented on Nov 26, 2017

   

   ndovgaluk

   on Nov 26, 2017

   Last edited by ndovgaluk

   More actions

   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'
   }),

   👍React with 👍1Reacted by dw-0
2. iambateman commented on Dec 1, 2017

   

   iambateman

   on Dec 1, 2017

   More actions

   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]
     }
   };
   
3. iambateman commented on Dec 2, 2017

   

   iambateman

   on Dec 2, 2017

   More actions

   Update: my approach broke in lesson 56.
4. casvil commented on Jan 3, 2018

   

   casvil

   on Jan 3, 2018

   More actions

   Same #5

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

   👍React with 👍1Reacted by divnych