Skip to content

Commit a2caf64

Browse files
committed
fix(@angular/cli): redirect Angular schematic dependency requests to known versions
This change adds logic to redirect module resolution requests for Angular schematics to ensure that the correct versions of core schematic related packages are used. This also ensures that the runtime version of the schematics package matches the version used inside the schematic and that object instances passed into the schematic are compatible. The current set of core schematic related packages are `@angular-devkit/*` and `@schematics/angular`. Only first-party Angular schematics are currently affected by this change.
1 parent 003380c commit a2caf64

File tree

5 files changed

+218
-26
lines changed

5 files changed

+218
-26
lines changed

packages/angular/cli/commands/update-impl.ts

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import * as semver from 'semver';
1414
import { PackageManager } from '../lib/config/schema';
1515
import { Command } from '../models/command';
1616
import { Arguments } from '../models/interface';
17+
import { SchematicEngineHost } from '../models/schematic-engine-host';
1718
import { colors } from '../utilities/color';
1819
import { runTempPackageBin } from '../utilities/install-package';
1920
import { writeErrorToLogFile } from '../utilities/log-file';
@@ -71,6 +72,7 @@ export class UpdateCommand extends Command<UpdateCommandSchema> {
7172
// Otherwise, use packages from the active workspace (migrations)
7273
resolvePaths: [__dirname, this.context.root],
7374
schemaValidation: true,
75+
engineHostCreator: (options) => new SchematicEngineHost(options.resolvePaths),
7476
},
7577
);
7678
}
@@ -265,28 +267,6 @@ export class UpdateCommand extends Command<UpdateCommandSchema> {
265267

266268
// tslint:disable-next-line:no-big-function
267269
async run(options: UpdateCommandSchema & Arguments) {
268-
// Check if the @angular-devkit/schematics package can be resolved from the workspace root
269-
// This works around issues with packages containing migrations that cannot directly depend on the package
270-
// This check can be removed once the schematic runtime handles this situation
271-
try {
272-
require.resolve('@angular-devkit/schematics', { paths: [this.context.root] });
273-
} catch (e) {
274-
if (e.code === 'MODULE_NOT_FOUND') {
275-
this.logger.fatal(
276-
'The "@angular-devkit/schematics" package cannot be resolved from the workspace root directory. ' +
277-
'This may be due to an unsupported node modules structure.\n' +
278-
'Please remove both the "node_modules" directory and the package lock file; and then reinstall.\n' +
279-
'If this does not correct the problem, ' +
280-
'please temporarily install the "@angular-devkit/schematics" package within the workspace. ' +
281-
'It can be removed once the update is complete.',
282-
);
283-
284-
return 1;
285-
}
286-
287-
throw e;
288-
}
289-
290270
// Check if the current installed CLI version is older than the latest version.
291271
if (!disableVersionCheck && await this.checkCLILatestVersion(options.verbose, options.next)) {
292272
this.logger.warn(

packages/angular/cli/models/schematic-command.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import {
2323
FileSystemCollection,
2424
FileSystemEngine,
2525
FileSystemSchematic,
26-
FileSystemSchematicDescription,
2726
NodeWorkflow,
2827
} from '@angular-devkit/schematics/tools';
2928
import * as inquirer from 'inquirer';
@@ -37,6 +36,7 @@ import { isPackageNameSafeForAnalytics } from './analytics';
3736
import { BaseCommandOptions, Command } from './command';
3837
import { Arguments, CommandContext, CommandDescription, Option } from './interface';
3938
import { parseArguments, parseFreeFormArguments } from './parser';
39+
import { SchematicEngineHost } from './schematic-engine-host';
4040

4141
export interface BaseSchematicSchema {
4242
debug?: boolean;
@@ -258,6 +258,7 @@ export abstract class SchematicCommand<
258258
...current,
259259
}),
260260
],
261+
engineHostCreator: (options) => new SchematicEngineHost(options.resolvePaths),
261262
});
262263

263264
const getProjectName = () => {
Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
/**
2+
* @license
3+
* Copyright Google Inc. All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
import { RuleFactory, SchematicsException, Tree } from '@angular-devkit/schematics';
9+
import { NodeModulesEngineHost } from '@angular-devkit/schematics/tools';
10+
import { readFileSync } from 'fs';
11+
import { parse as parseJson } from 'jsonc-parser';
12+
import { dirname, resolve } from 'path';
13+
import { Script } from 'vm';
14+
15+
/**
16+
* Environment variable to control schematic package redirection
17+
* Default: Angular schematics only
18+
*/
19+
const schematicRedirectVariable = process.env['NG_SCHEMATIC_REDIRECT']?.toLowerCase();
20+
21+
function shouldWrapSchematic(schematicFile: string): boolean {
22+
// Check environment variable if present
23+
if (schematicRedirectVariable !== undefined) {
24+
switch (schematicRedirectVariable) {
25+
case '0':
26+
case 'false':
27+
case 'off':
28+
case 'none':
29+
return false;
30+
case 'all':
31+
return true;
32+
}
33+
}
34+
35+
// Never wrap `@schematics/update` when executed directly
36+
// It communicates with the update command via `global`
37+
if (/[\/\\]node_modules[\/\\]@schematics[\/\\]update[\/\\]/.test(schematicFile)) {
38+
return false;
39+
}
40+
41+
// Default is only first-party Angular schematic packages
42+
// Angular schematics are safe to use in the wrapped VM context
43+
return /[\/\\]node_modules[\/\\]@(?:angular|schematics|nguniversal)[\/\\]/.test(schematicFile);
44+
}
45+
46+
export class SchematicEngineHost extends NodeModulesEngineHost {
47+
protected _resolveReferenceString(refString: string, parentPath: string) {
48+
const [path, name] = refString.split('#', 2);
49+
// Mimic behavior of ExportStringRef class used in default behavior
50+
const fullPath = path[0] === '.' ? resolve(parentPath ?? process.cwd(), path) : path;
51+
52+
const schematicFile = require.resolve(fullPath, { paths: [parentPath] });
53+
54+
if (shouldWrapSchematic(schematicFile)) {
55+
const schematicPath = dirname(schematicFile);
56+
57+
const moduleCache = new Map<string, unknown>();
58+
const factoryInitializer = wrap(
59+
schematicFile,
60+
schematicPath,
61+
moduleCache,
62+
name || 'default',
63+
) as () => RuleFactory<{}>;
64+
65+
const factory = factoryInitializer();
66+
if (!factory || typeof factory !== 'function') {
67+
return null;
68+
}
69+
70+
return { ref: factory, path: schematicPath };
71+
}
72+
73+
// All other schematics use default behavior
74+
return super._resolveReferenceString(refString, parentPath);
75+
}
76+
}
77+
78+
/**
79+
* Minimal shim modules for legacy deep imports of `@schematics/angular`
80+
*/
81+
const legacyModules: Record<string, unknown> = {
82+
'@schematics/angular/utility/config': {
83+
getWorkspace(host: Tree) {
84+
const path = '/.angular.json';
85+
const data = host.read(path);
86+
if (!data) {
87+
throw new SchematicsException(`Could not find (${path})`);
88+
}
89+
90+
return parseJson(data.toString(), [], { allowTrailingComma: true });
91+
},
92+
},
93+
'@schematics/angular/utility/project': {
94+
buildDefaultPath(project: { sourceRoot?: string; root: string; projectType: string }): string {
95+
const root = project.sourceRoot ? `/${project.sourceRoot}/` : `/${project.root}/src/`;
96+
97+
return `${root}${project.projectType === 'application' ? 'app' : 'lib'}`;
98+
},
99+
},
100+
};
101+
102+
/**
103+
* Wrap a JavaScript file in a VM context to allow specific Angular dependencies to be redirected.
104+
* This VM setup is ONLY intended to redirect dependencies.
105+
*
106+
* @param schematicFile A JavaScript schematic file path that should be wrapped.
107+
* @param schematicDirectory A directory that will be used as the location of the JavaScript file.
108+
* @param moduleCache A map to use for caching repeat module usage and proper `instanceof` support.
109+
* @param exportName An optional name of a specific export to return. Otherwise, return all exports.
110+
*/
111+
function wrap(
112+
schematicFile: string,
113+
schematicDirectory: string,
114+
moduleCache: Map<string, unknown>,
115+
exportName?: string,
116+
): () => unknown {
117+
const { createRequire, createRequireFromPath } = require('module');
118+
// Node.js 10.x does not support `createRequire` so fallback to `createRequireFromPath`
119+
// `createRequireFromPath` is deprecated in 12+ and can be removed once 10.x support is removed
120+
const scopedRequire = createRequire?.(schematicFile) || createRequireFromPath(schematicFile);
121+
122+
const customRequire = function (id: string) {
123+
if (legacyModules[id]) {
124+
// Provide compatibility modules for older versions of @angular/cdk
125+
return legacyModules[id];
126+
} else if (id.startsWith('@angular-devkit/') || id.startsWith('@schematics/')) {
127+
// Resolve from inside the `@angular/cli` project
128+
const packagePath = require.resolve(id);
129+
130+
return require(packagePath);
131+
} else if (id.startsWith('.') || id.startsWith('@angular/cdk')) {
132+
// Wrap relative files inside the schematic collection
133+
// Also wrap `@angular/cdk`, it contains helper utilities that import core schematic packages
134+
135+
// Resolve from the original file
136+
const modulePath = scopedRequire.resolve(id);
137+
138+
// Use cached module if available
139+
const cachedModule = moduleCache.get(modulePath);
140+
if (cachedModule) {
141+
return cachedModule;
142+
}
143+
144+
// Do not wrap vendored third-party packages or JSON files
145+
if (
146+
!/[\/\\]node_modules[\/\\]@schematics[\/\\]angular[\/\\]third_party[\/\\]/.test(
147+
modulePath,
148+
) &&
149+
!modulePath.endsWith('.json')
150+
) {
151+
// Wrap module and save in cache
152+
const wrappedModule = wrap(modulePath, dirname(modulePath), moduleCache)();
153+
moduleCache.set(modulePath, wrappedModule);
154+
155+
return wrappedModule;
156+
}
157+
}
158+
159+
// All others are required directly from the original file
160+
return scopedRequire(id);
161+
};
162+
163+
// Setup a wrapper function to capture the module's exports
164+
const schematicCode = readFileSync(schematicFile, 'utf8');
165+
// `module` is required due to @angular/localize ng-add being in UMD format
166+
const headerCode = '(function() {\nvar exports = {};\nvar module = { exports };\n';
167+
const footerCode = exportName ? `\nreturn exports['${exportName}'];});` : '\nreturn exports;});';
168+
169+
const script = new Script(headerCode + schematicCode + footerCode, {
170+
filename: schematicFile,
171+
lineOffset: 3,
172+
});
173+
174+
const context = {
175+
__dirname: schematicDirectory,
176+
__filename: schematicFile,
177+
Buffer,
178+
console,
179+
process,
180+
get global() {
181+
return this;
182+
},
183+
require: customRequire,
184+
};
185+
186+
const exportsFactory = script.runInNewContext(context);
187+
188+
return exportsFactory;
189+
}
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { join } from 'path';
2+
import { expectFileToMatch } from '../../utils/fs';
3+
import { ng } from '../../utils/process';
4+
import { installPackage, uninstallPackage } from '../../utils/packages';
5+
import { isPrereleaseCli } from '../../utils/project';
6+
7+
export default async function () {
8+
const componentDir = join('src', 'app', 'test-component');
9+
10+
// Install old and incompatible version
11+
// Must directly use npm registry since old versions are not hosted locally
12+
await installPackage('@schematics/angular@7', 'https://registry.npmjs.org')
13+
14+
const tag = await isPrereleaseCli() ? '@next' : '';
15+
await ng('add', `@angular/material${tag}`);
16+
await expectFileToMatch('package.json', /@angular\/material/);
17+
18+
// Clean up existing cdk package
19+
// Not doing so can cause adding material to fail if an incompatible cdk is present
20+
await uninstallPackage('@angular/cdk');
21+
}

tests/legacy-cli/e2e/utils/packages.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,13 @@ export async function installWorkspacePackages(updateWebdriver = true): Promise<
2727
}
2828
}
2929

30-
export async function installPackage(specifier: string): Promise<ProcessOutput> {
30+
export async function installPackage(specifier: string, registry?: string): Promise<ProcessOutput> {
31+
const registryOption = registry ? [`--registry=${registry}`] : [];
3132
switch (getActivePackageManager()) {
3233
case 'npm':
33-
return silentNpm('install', specifier);
34+
return silentNpm('install', specifier, ...registryOption);
3435
case 'yarn':
35-
return silentYarn('add', specifier);
36+
return silentYarn('add', specifier, ...registryOption);
3637
}
3738
}
3839

0 commit comments

Comments
 (0)