Comments (4)
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'
}),
from angular-pro-src.
Same #5
His approach using rm -rf node_modules
, then yarn install + yarn start
works.
from angular-pro-src.
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]
}
};
from angular-pro-src.
Update: my approach broke in lesson 56.
from angular-pro-src.
Related Issues (12)
- store solution - exposing the subject value HOT 1
- error D:\Source\Courses\angular-pro-routing\node_modules\node-sass: Command failed. HOT 1
- How does one get started with the pro course in 2023? HOT 1
- Can not see shadow-root HOT 1
- Project fails after Build complete HOT 6
- Description and URL out of date?
- Missing Instructions for Windows Users HOT 2
- npm install Error: `make` failed with exit code: 2 HOT 1
- ZoneAwareError: Error: Cannot find module "./ngfactory/app/app.module.ngfactory" HOT 9
- 31-componentizing-formgroups not able to start yarn
- Can't bind to 'ngTemplateOutletContext' since it isn't a known property of 'ng-container'. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-pro-src.