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

Commit c28c15e

Browse files
committed
fix(AoT): stop using require.context in Angular apps
Calling `require.context` for the app directory adds a `ContextDependency` in webpack for it. That causes every change inside the app/ directory to emit a change event for the whole directory. There's a logic in the TypeScript compiler host (from [@ngtools/webpack](https://github.com/angular/angular-cli/blob/master/packages/ngtools/webpack/src/compiler_host.ts#L235)) that invalidates all files in the changed directory. The invalidation removes all cached information for the virtual files produced by the Angular AoT compilation (ngfactory files, etc.). Since these files are not in the cache anymore, webpack tries to resolve them from the filesystem and fails. The solution is to remove the `ContextDependency` for the `app` dir, which should also make the rebuilds much faster. fixes #566
1 parent c27e0db commit c28c15e

4 files changed

+22
-9
lines changed

Diff for: bundle-config-loader.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,11 @@ module.exports = function(source) {
1616

1717
if (loadCss) {
1818
source = `
19-
require("nativescript-dev-webpack/load-application-css")(${angular});
19+
require("${
20+
angular ?
21+
'nativescript-dev-webpack/load-application-css-angular' :
22+
'nativescript-dev-webpack/load-application-css-regular'
23+
}")();
2024
${source}
2125
`;
2226
}

Diff for: load-application-css-angular.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const loadCss = require("./load-application-css");
2+
3+
module.exports = function() {
4+
loadCss(function() {
5+
global.registerModule("./app.css", () => require("~/app"));
6+
});
7+
}

Diff for: load-application-css-regular.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const loadCss = require("./load-application-css");
2+
3+
module.exports = function() {
4+
loadCss(function() {
5+
const appCssContext = require.context("~/", false, /^\.\/app\.(css|scss|less|sass)$/);
6+
global.registerWebpackModules(appCssContext);
7+
});
8+
}

Diff for: load-application-css.js

+2-8
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
1-
module.exports = function(isAngular) {
1+
module.exports = function (loadModuleFn) {
22
const application = require("tns-core-modules/application");
33
require("tns-core-modules/ui/styling/style-scope");
44

5-
if (isAngular) {
6-
global.registerModule("./app.css", () => require("~/app"));
7-
} else {
8-
const appCssContext = require.context("~/", false, /^\.\/app\.(css|scss|less|sass)$/);
9-
global.registerWebpackModules(appCssContext);
10-
}
5+
loadModuleFn();
116

127
application.loadAppCss();
138
}
14-

0 commit comments

Comments
 (0)