Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Abrupt break of hot reload #3

Open
nayfin opened this issue Oct 1, 2017 · 4 comments
Open

Abrupt break of hot reload #3

nayfin opened this issue Oct 1, 2017 · 4 comments

Comments

@nayfin
Copy link

nayfin commented Oct 1, 2017

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
Copy link

ndovgaluk commented Nov 26, 2017

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
Copy link

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
Copy link

Update: my approach broke in lesson 56.

@casvil
Copy link

casvil commented Jan 3, 2018

Same #5

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants