Skip to content
This repository was archived by the owner on Aug 7, 2021. It is now read-only.

Commit 6a9db32

Browse files
authored
fix(Angular): add hot loader for lazy loaded NgModules (#747)
## What is the current behavior? In NativeScript Angular the hot updates are only accepted in the entry file (`main.ts`). The lazy loaded NgModules are not directly imported anywhere in the dependency graph with root `main.ts`. That's why the hot updates in lazy modules don't bubble up to the accept in `main.ts` and HMR doesn't work in lazy modules. ## What is the new behavior? Every lazy loaded NgModule is augmented with HMR self-accept during build by the `lazy-ngmodule-hot-loader`. fixes NativeScript/nativescript-angular#1564 BREAKING CHANGES: The `lazy-ngmodule-hot-loader` should be added to the webpack configuration. **BEFORE** ``` js // webpack.config.js { test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, use: [ "nativescript-dev-webpack/moduleid-compat-loader", "@ngtools/webpack", ] }, // ... ``` **AFTER** ``` js // webpack.config.js { test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, use: [ "nativescript-dev-webpack/moduleid-compat-loader", "nativescript-dev-webpack/lazy-ngmodule-hot-loader", "@ngtools/webpack", ] }, // ... ```
1 parent 7f67198 commit 6a9db32

File tree

4 files changed

+43
-2
lines changed

4 files changed

+43
-2
lines changed

Diff for: lazy-ngmodule-hot-loader.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const { safeGet } = require("./projectHelpers");
2+
3+
const LAZY_RESOURCE_CONTEXT = "$$_lazy_route_resource";
4+
const HOT_SELF_ACCEPT = "module.hot && module.hot.accept()";
5+
6+
const isLazyLoadedNgModule = resource => {
7+
const issuer = safeGet(resource, "issuer");
8+
const issuerContext = safeGet(issuer, "context");
9+
10+
return issuerContext && issuerContext.endsWith(LAZY_RESOURCE_CONTEXT);
11+
};
12+
13+
module.exports = function (source) {
14+
return isLazyLoadedNgModule(this._module) ?
15+
`${source};${HOT_SELF_ACCEPT}`:
16+
source;
17+
};

Diff for: projectHelpers.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -110,5 +110,6 @@ module.exports = {
110110
isTypeScript,
111111
writePackageJson,
112112
convertSlashesInPath,
113-
getIndentationCharacter
113+
getIndentationCharacter,
114+
safeGet,
114115
};

Diff for: projectHelpers.spec.js

+23-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { getIndentationCharacter, writePackageJson } = require("./projectHelpers");
1+
const { getIndentationCharacter, writePackageJson, safeGet } = require("./projectHelpers");
22
const fs = require("fs");
33

44
describe('projectHelpers', () => {
@@ -57,6 +57,28 @@ describe('projectHelpers', () => {
5757
});
5858
});
5959

60+
describe('safeGet', () => {
61+
it('should return the correct value of existing properties', () => {
62+
const obj = { a: 15 };
63+
expect(safeGet(obj, 'a')).toBe(15);
64+
});
65+
66+
it('should return undefined for unexisting properties', () => {
67+
const obj = { a: 15 };
68+
expect(safeGet(obj, 'random')).toBeUndefined();
69+
});
70+
71+
it('should return undefined when the first argument is undefined', () => {
72+
let obj;
73+
expect(safeGet(obj, 'random')).toBeUndefined();
74+
});
75+
76+
it('should return undefined when the first argument is not an object and does not have inherited property with the queried name', () => {
77+
const num = 15;
78+
expect(safeGet(num, 'random')).toBeUndefined();
79+
});
80+
});
81+
6082
describe('writePackageJson', () => {
6183
const mockFileSystemApi = () => {
6284
const data = {

Diff for: templates/webpack.angular.js

+1
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,7 @@ module.exports = env => {
192192
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
193193
use: [
194194
"nativescript-dev-webpack/moduleid-compat-loader",
195+
"nativescript-dev-webpack/lazy-ngmodule-hot-loader",
195196
"@ngtools/webpack",
196197
]
197198
},

0 commit comments

Comments
 (0)