feat(ivy): detect cycles and use remote scoping of components if needed (#28169)

By its nature, Ivy alters the import graph of a TS program, adding imports
where template dependencies exist. For example, if ComponentA uses PipeB
in its template, Ivy will insert an import of PipeB into the file in which
ComponentA is declared.

Any insertion of an import into a program has the potential to introduce a
cycle into the import graph. If for some reason the file in which PipeB is
declared imports the file in which ComponentA is declared (maybe it makes
use of a service or utility function that happens to be in the same file as
ComponentA) then this could create an import cycle. This turns out to
happen quite regularly in larger Angular codebases.

TypeScript and the Ivy runtime have no issues with such cycles. However,
other tools are not so accepting. In particular the Closure Compiler is
very anti-cycle.

To mitigate this problem, it's necessary to detect when the insertion of
an import would create a cycle. ngtsc can then use a different strategy,
known as "remote scoping", instead of directly writing a reference from
one component to another. Under remote scoping, a function
'setComponentScope' is called after the declaration of the component's
module, which does not require the addition of new imports.

FW-647 #resolve

PR Close #28169
This commit is contained in:
Alex Rickabaugh 2019-01-15 12:32:10 -08:00 committed by Jason Aden
parent cac9199d7c
commit 7d954dffd0
27 changed files with 1049 additions and 23 deletions

View File

@ -24,6 +24,7 @@ ts_library(
deps = [
"//packages/compiler",
"//packages/compiler-cli/src/ngtsc/annotations",
"//packages/compiler-cli/src/ngtsc/cycles",
"//packages/compiler-cli/src/ngtsc/diagnostics",
"//packages/compiler-cli/src/ngtsc/entry_point",
"//packages/compiler-cli/src/ngtsc/imports",

View File

@ -12,6 +12,7 @@ ts_library(
"//packages:types",
"//packages/compiler",
"//packages/compiler-cli/src/ngtsc/annotations",
"//packages/compiler-cli/src/ngtsc/cycles",
"//packages/compiler-cli/src/ngtsc/imports",
"//packages/compiler-cli/src/ngtsc/partial_evaluator",
"//packages/compiler-cli/src/ngtsc/reflection",

View File

@ -11,7 +11,8 @@ import * as fs from 'fs';
import * as ts from 'typescript';
import {BaseDefDecoratorHandler, ComponentDecoratorHandler, DirectiveDecoratorHandler, InjectableDecoratorHandler, NgModuleDecoratorHandler, PipeDecoratorHandler, ReferencesRegistry, ResourceLoader, SelectorScopeRegistry} from '../../../ngtsc/annotations';
import {TsReferenceResolver} from '../../../ngtsc/imports';
import {CycleAnalyzer, ImportGraph} from '../../../ngtsc/cycles';
import {ModuleResolver, TsReferenceResolver} from '../../../ngtsc/imports';
import {PartialEvaluator} from '../../../ngtsc/partial_evaluator';
import {CompileResult, DecoratorHandler} from '../../../ngtsc/transform';
import {DecoratedClass} from '../host/decorated_class';
@ -65,12 +66,15 @@ export class DecorationAnalyzer {
resolver = new TsReferenceResolver(this.program, this.typeChecker, this.options, this.host);
scopeRegistry = new SelectorScopeRegistry(this.typeChecker, this.reflectionHost, this.resolver);
evaluator = new PartialEvaluator(this.reflectionHost, this.typeChecker, this.resolver);
moduleResolver = new ModuleResolver(this.program, this.options, this.host);
importGraph = new ImportGraph(this.moduleResolver);
cycleAnalyzer = new CycleAnalyzer(this.importGraph);
handlers: DecoratorHandler<any, any>[] = [
new BaseDefDecoratorHandler(this.reflectionHost, this.evaluator),
new ComponentDecoratorHandler(
this.reflectionHost, this.evaluator, this.scopeRegistry, this.isCore, this.resourceManager,
this.rootDirs, /* defaultPreserveWhitespaces */ false,
/* i18nUseExternalIds */ true),
this.rootDirs, /* defaultPreserveWhitespaces */ false, /* i18nUseExternalIds */ true,
this.moduleResolver, this.cycleAnalyzer),
new DirectiveDecoratorHandler(
this.reflectionHost, this.evaluator, this.scopeRegistry, this.isCore),
new InjectableDecoratorHandler(this.reflectionHost, this.isCore),

View File

@ -10,6 +10,7 @@ ts_library(
]),
deps = [
"//packages/compiler",
"//packages/compiler-cli/src/ngtsc/cycles",
"//packages/compiler-cli/src/ngtsc/diagnostics",
"//packages/compiler-cli/src/ngtsc/imports",
"//packages/compiler-cli/src/ngtsc/partial_evaluator",

View File

@ -6,12 +6,13 @@
* found in the LICENSE file at https://angular.io/license
*/
import {ConstantPool, CssSelector, DEFAULT_INTERPOLATION_CONFIG, DomElementSchemaRegistry, ElementSchemaRegistry, Expression, InterpolationConfig, R3ComponentMetadata, R3DirectiveMetadata, SelectorMatcher, Statement, TmplAstNode, WrappedNodeExpr, compileComponentFromMetadata, makeBindingParser, parseTemplate} from '@angular/compiler';
import {ConstantPool, CssSelector, DEFAULT_INTERPOLATION_CONFIG, DomElementSchemaRegistry, ElementSchemaRegistry, Expression, ExternalExpr, InterpolationConfig, R3ComponentMetadata, R3DirectiveMetadata, SelectorMatcher, Statement, TmplAstNode, WrappedNodeExpr, compileComponentFromMetadata, makeBindingParser, parseTemplate} from '@angular/compiler';
import * as path from 'path';
import * as ts from 'typescript';
import {CycleAnalyzer} from '../../cycles';
import {ErrorCode, FatalDiagnosticError} from '../../diagnostics';
import {ResolvedReference} from '../../imports';
import {ModuleResolver, Reference, ResolvedReference} from '../../imports';
import {EnumValue, PartialEvaluator} from '../../partial_evaluator';
import {Decorator, ReflectionHost, filterToMembersWithDecorator, reflectObjectLiteral} from '../../reflection';
import {AnalysisOutput, CompileResult, DecoratorHandler} from '../../transform';
@ -41,7 +42,8 @@ export class ComponentDecoratorHandler implements
private reflector: ReflectionHost, private evaluator: PartialEvaluator,
private scopeRegistry: SelectorScopeRegistry, private isCore: boolean,
private resourceLoader: ResourceLoader, private rootDirs: string[],
private defaultPreserveWhitespaces: boolean, private i18nUseExternalIds: boolean) {}
private defaultPreserveWhitespaces: boolean, private i18nUseExternalIds: boolean,
private moduleResolver: ModuleResolver, private cycleAnalyzer: CycleAnalyzer) {}
private literalCache = new Map<Decorator, ts.ObjectLiteralExpression>();
private elementSchemaRegistry = new DomElementSchemaRegistry();
@ -289,28 +291,39 @@ export class ComponentDecoratorHandler implements
}
}
compile(node: ts.ClassDeclaration, analysis: ComponentHandlerData, pool: ConstantPool):
CompileResult {
resolve(node: ts.ClassDeclaration, analysis: ComponentHandlerData): void {
// Check whether this component was registered with an NgModule. If so, it should be compiled
// under that module's compilation scope.
const scope = this.scopeRegistry.lookupCompilationScope(node);
let metadata = analysis.meta;
if (scope !== null) {
// Replace the empty components and directives from the analyze() step with a fully expanded
// scope. This is possible now because during compile() the whole compilation unit has been
// scope. This is possible now because during resolve() the whole compilation unit has been
// fully analyzed.
const {pipes, containsForwardDecls} = scope;
const directives: {selector: string, expression: Expression}[] = [];
const directives =
scope.directives.map(dir => ({selector: dir.selector, expression: dir.directive}));
for (const meta of scope.directives) {
directives.push({selector: meta.selector, expression: meta.directive});
}
// Scan through the references of the `scope.directives` array and check whether
// any import which needs to be generated for the directive would create a cycle.
const origin = node.getSourceFile();
const cycleDetected =
scope.directives.some(meta => this._isCyclicImport(meta.directive, origin)) ||
Array.from(scope.pipes.values()).some(pipe => this._isCyclicImport(pipe, origin));
if (!cycleDetected) {
const wrapDirectivesAndPipesInClosure: boolean = !!containsForwardDecls;
metadata = {...metadata, directives, pipes, wrapDirectivesAndPipesInClosure};
metadata.directives = directives;
metadata.pipes = pipes;
metadata.wrapDirectivesAndPipesInClosure = wrapDirectivesAndPipesInClosure;
} else {
this.scopeRegistry.setComponentAsRequiringRemoteScoping(node);
}
}
}
const res =
compileComponentFromMetadata(metadata, pool, makeBindingParser(metadata.interpolation));
compile(node: ts.ClassDeclaration, analysis: ComponentHandlerData, pool: ConstantPool):
CompileResult {
const res = compileComponentFromMetadata(analysis.meta, pool, makeBindingParser());
const statements = res.statements;
if (analysis.metadataStmt !== null) {
@ -373,4 +386,19 @@ export class ComponentDecoratorHandler implements
}
return styleUrls as string[];
}
private _isCyclicImport(expr: Expression, origin: ts.SourceFile): boolean {
if (!(expr instanceof ExternalExpr)) {
return false;
}
// Figure out what file is being imported.
const imported = this.moduleResolver.resolveModuleName(expr.value.moduleName !, origin);
if (imported === null) {
return false;
}
// Check whether the import is legal.
return this.cycleAnalyzer.wouldCreateCycle(origin, imported);
}
}

View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Expression, LiteralArrayExpr, R3InjectorMetadata, R3NgModuleMetadata, R3Reference, Statement, WrappedNodeExpr, compileInjector, compileNgModule} from '@angular/compiler';
import {Expression, ExternalExpr, InvokeFunctionExpr, LiteralArrayExpr, R3Identifiers, R3InjectorMetadata, R3NgModuleMetadata, R3Reference, Statement, WrappedNodeExpr, compileInjector, compileNgModule} from '@angular/compiler';
import * as ts from 'typescript';
import {ErrorCode, FatalDiagnosticError} from '../../diagnostics';
@ -25,6 +25,7 @@ export interface NgModuleAnalysis {
ngModuleDef: R3NgModuleMetadata;
ngInjectorDef: R3InjectorMetadata;
metadataStmt: Statement|null;
declarations: Reference<ts.Declaration>[];
}
/**
@ -152,6 +153,7 @@ export class NgModuleDecoratorHandler implements DecoratorHandler<NgModuleAnalys
analysis: {
ngModuleDef,
ngInjectorDef,
declarations,
metadataStmt: generateSetClassMetadataCall(node, this.reflector, this.isCore),
},
factorySymbolName: node.name !== undefined ? node.name.text : undefined,
@ -165,6 +167,28 @@ export class NgModuleDecoratorHandler implements DecoratorHandler<NgModuleAnalys
if (analysis.metadataStmt !== null) {
ngModuleStatements.push(analysis.metadataStmt);
}
const context = node.getSourceFile();
for (const decl of analysis.declarations) {
if (this.scopeRegistry.requiresRemoteScope(decl.node)) {
const scope = this.scopeRegistry.lookupCompilationScopeAsRefs(decl.node);
if (scope === null) {
continue;
}
const directives: Expression[] = [];
const pipes: Expression[] = [];
scope.directives.forEach(
(directive, _) => { directives.push(directive.ref.toExpression(context) !); });
scope.pipes.forEach(pipe => pipes.push(pipe.toExpression(context) !));
const directiveArray = new LiteralArrayExpr(directives);
const pipesArray = new LiteralArrayExpr(pipes);
const declExpr = decl.toExpression(context) !;
const setComponentScope = new ExternalExpr(R3Identifiers.setComponentScope);
const callExpr =
new InvokeFunctionExpr(setComponentScope, [declExpr, directiveArray, pipesArray]);
ngModuleStatements.push(callExpr.toStmt());
}
}
return [
{
name: 'ngModuleDef',

View File

@ -84,6 +84,11 @@ export class SelectorScopeRegistry {
*/
private _pipeToName = new Map<ts.Declaration, string>();
/**
* Components that require remote scoping.
*/
private _requiresRemoteScope = new Set<ts.Declaration>();
/**
* Map of components/directives/pipes to their module.
*/
@ -132,6 +137,21 @@ export class SelectorScopeRegistry {
this._pipeToName.set(node, name);
}
/**
* Mark a component (identified by its `ts.Declaration`) as requiring its `directives` scope to be
* set remotely, from the file of the @NgModule which declares the component.
*/
setComponentAsRequiringRemoteScoping(component: ts.Declaration): void {
this._requiresRemoteScope.add(component);
}
/**
* Check whether the given component requires its `directives` scope to be set remotely.
*/
requiresRemoteScope(component: ts.Declaration): boolean {
return this._requiresRemoteScope.has(ts.getOriginalNode(component) as ts.Declaration);
}
lookupCompilationScopeAsRefs(node: ts.Declaration): CompilationScope<Reference>|null {
node = ts.getOriginalNode(node) as ts.Declaration;

View File

@ -12,6 +12,7 @@ ts_library(
"//packages:types",
"//packages/compiler",
"//packages/compiler-cli/src/ngtsc/annotations",
"//packages/compiler-cli/src/ngtsc/cycles",
"//packages/compiler-cli/src/ngtsc/diagnostics",
"//packages/compiler-cli/src/ngtsc/imports",
"//packages/compiler-cli/src/ngtsc/partial_evaluator",

View File

@ -8,8 +8,9 @@
import * as ts from 'typescript';
import {CycleAnalyzer, ImportGraph} from '../../cycles';
import {ErrorCode, FatalDiagnosticError} from '../../diagnostics';
import {TsReferenceResolver} from '../../imports';
import {ModuleResolver, TsReferenceResolver} from '../../imports';
import {PartialEvaluator} from '../../partial_evaluator';
import {TypeScriptReflectionHost} from '../../reflection';
import {getDeclaration, makeProgram} from '../../testing/in_memory_typescript';
@ -45,9 +46,13 @@ describe('ComponentDecoratorHandler', () => {
const reflectionHost = new TypeScriptReflectionHost(checker);
const resolver = new TsReferenceResolver(program, checker, options, host);
const evaluator = new PartialEvaluator(reflectionHost, checker, resolver);
const moduleResolver = new ModuleResolver(program, options, host);
const importGraph = new ImportGraph(moduleResolver);
const cycleAnalyzer = new CycleAnalyzer(importGraph);
const handler = new ComponentDecoratorHandler(
reflectionHost, evaluator, new SelectorScopeRegistry(checker, reflectionHost, resolver),
false, new NoopResourceLoader(), [''], false, true);
false, new NoopResourceLoader(), [''], false, true, moduleResolver, cycleAnalyzer);
const TestCmp = getDeclaration(program, 'entry.ts', 'TestCmp', ts.isClassDeclaration);
const detected = handler.detect(TestCmp, reflectionHost.getDecoratorsOfDeclaration(TestCmp));
if (detected === undefined) {

View File

@ -14,6 +14,7 @@ import {nocollapseHack} from '../transformers/nocollapse_hack';
import {ComponentDecoratorHandler, DirectiveDecoratorHandler, InjectableDecoratorHandler, NgModuleDecoratorHandler, NoopReferencesRegistry, PipeDecoratorHandler, ReferencesRegistry, SelectorScopeRegistry} from './annotations';
import {BaseDefDecoratorHandler} from './annotations/src/base_def';
import {CycleAnalyzer, ImportGraph} from './cycles';
import {ErrorCode, ngErrorCode} from './diagnostics';
import {FlatIndexGenerator, ReferenceGraph, checkForPrivateExports, findFlatIndexEntryPoint} from './entry_point';
import {ImportRewriter, ModuleResolver, NoopImportRewriter, R3SymbolsImportRewriter, Reference, TsReferenceResolver} from './imports';
@ -48,6 +49,7 @@ export class NgtscProgram implements api.Program {
private constructionDiagnostics: ts.Diagnostic[] = [];
private moduleResolver: ModuleResolver;
private cycleAnalyzer: CycleAnalyzer;
constructor(
@ -128,6 +130,7 @@ export class NgtscProgram implements api.Program {
this.entryPoint = entryPoint !== null ? this.tsProgram.getSourceFile(entryPoint) || null : null;
this.moduleResolver = new ModuleResolver(this.tsProgram, options, this.host);
this.cycleAnalyzer = new CycleAnalyzer(new ImportGraph(this.moduleResolver));
}
getTsProgram(): ts.Program { return this.tsProgram; }
@ -184,6 +187,7 @@ export class NgtscProgram implements api.Program {
.filter(file => !file.fileName.endsWith('.d.ts'))
.map(file => this.compilation !.analyzeAsync(file))
.filter((result): result is Promise<void> => result !== undefined));
this.compilation.resolve();
}
listLazyRoutes(entryRoute?: string|undefined): api.LazyRoute[] {
@ -213,6 +217,7 @@ export class NgtscProgram implements api.Program {
this.tsProgram.getSourceFiles()
.filter(file => !file.fileName.endsWith('.d.ts'))
.forEach(file => this.compilation !.analyzeSync(file));
this.compilation.resolve();
}
return this.compilation;
}
@ -307,7 +312,7 @@ export class NgtscProgram implements api.Program {
new ComponentDecoratorHandler(
this.reflector, evaluator, scopeRegistry, this.isCore, this.resourceManager,
this.rootDirs, this.options.preserveWhitespaces || false,
this.options.i18nUseExternalIds !== false),
this.options.i18nUseExternalIds !== false, this.moduleResolver, this.cycleAnalyzer),
new DirectiveDecoratorHandler(this.reflector, evaluator, scopeRegistry, this.isCore),
new InjectableDecoratorHandler(this.reflector, this.isCore),
new NgModuleDecoratorHandler(

View File

@ -44,6 +44,15 @@ export interface DecoratorHandler<A, M> {
*/
analyze(node: ts.Declaration, metadata: M): AnalysisOutput<A>;
/**
* Perform resolution on the given decorator along with the result of analysis.
*
* The resolution phase happens after the entire `ts.Program` has been analyzed, and gives the
* `DecoratorHandler` a chance to leverage information from the whole compilation unit to enhance
* the `analysis` before the emit phase.
*/
resolve?(node: ts.Declaration, analysis: A): void;
typeCheck?(ctx: TypeCheckContext, node: ts.Declaration, metadata: A): void;
/**

View File

@ -163,6 +163,14 @@ export class IvyCompilation {
}
}
resolve(): void {
this.analysis.forEach((op, decl) => {
if (op.adapter.resolve !== undefined) {
op.adapter.resolve(decl, op.analysis);
}
});
}
typeCheck(context: TypeCheckContext): void {
this.typeCheckMap.forEach((handler, node) => {
if (handler.typeCheck !== undefined) {

View File

@ -1409,6 +1409,44 @@ describe('ngtsc behavioral tests', () => {
expect(jsContents).toMatch(/directives: \[DirA,\s+DirB\]/);
});
describe('cycle detection', () => {
it('should detect a simple cycle and use remote component scoping', () => {
env.tsconfig();
env.write('test.ts', `
import {Component, NgModule} from '@angular/core';
import {NormalComponent} from './cyclic';
@Component({
selector: 'cyclic-component',
template: 'Importing this causes a cycle',
})
export class CyclicComponent {}
@NgModule({
declarations: [NormalComponent, CyclicComponent],
})
export class Module {}
`);
env.write('cyclic.ts', `
import {Component} from '@angular/core';
@Component({
selector: 'normal-component',
template: '<cyclic-component></cyclic-component>',
})
export class NormalComponent {}
`);
env.driveMain();
const jsContents = env.getContents('test.js');
expect(jsContents)
.toContain(
'i0.ɵsetComponentScope(NormalComponent, [i1.NormalComponent, CyclicComponent], [])');
expect(jsContents).not.toContain('/*__PURE__*/ i0.ɵsetComponentScope');
});
});
describe('duplicate local refs', () => {
const getComponentScript = (template: string): string => `
import {Component, Directive, NgModule} from '@angular/core';

View File

@ -91,6 +91,7 @@ export * from './render3/view/api';
export {BoundAttribute as TmplAstBoundAttribute, BoundEvent as TmplAstBoundEvent, BoundText as TmplAstBoundText, Content as TmplAstContent, Element as TmplAstElement, Node as TmplAstNode, Reference as TmplAstReference, Template as TmplAstTemplate, Text as TmplAstText, TextAttribute as TmplAstTextAttribute, Variable as TmplAstVariable,} from './render3/r3_ast';
export * from './render3/view/t2_api';
export * from './render3/view/t2_binder';
export {Identifiers as R3Identifiers} from './render3/r3_identifiers';
export {jitExpression} from './render3/r3_jit';
export {R3DependencyMetadata, R3FactoryMetadata, R3ResolvedDependencyType} from './render3/r3_factory';
export {compileInjector, compileNgModule, R3InjectorMetadata, R3NgModuleMetadata} from './render3/r3_module_compiler';

View File

@ -147,6 +147,8 @@ export class Identifiers {
static defineComponent: o.ExternalReference = {name: 'ɵdefineComponent', moduleName: CORE};
static setComponentScope: o.ExternalReference = {name: 'ɵsetComponentScope', moduleName: CORE};
static ComponentDefWithMeta: o.ExternalReference = {
name: 'ɵComponentDefWithMeta',
moduleName: CORE,

View File

@ -25,6 +25,7 @@ export {
injectAttribute as ɵinjectAttribute,
getFactoryOf as ɵgetFactoryOf,
getInheritedFactory as ɵgetInheritedFactory,
setComponentScope as ɵsetComponentScope,
templateRefExtractor as ɵtemplateRefExtractor,
ProvidersFeature as ɵProvidersFeature,
InheritDefinitionFeature as ɵInheritDefinitionFeature,

View File

@ -298,6 +298,13 @@ export function defineComponent<T>(componentDefinition: {
return def as never;
}
export function setComponentScope(
type: ComponentType<any>, directives: Type<any>[], pipes: Type<any>[]): void {
const def = (type.ngComponentDef as ComponentDef<any>);
def.directiveDefs = () => directives.map(extractDirectiveDef);
def.pipeDefs = () => pipes.map(extractPipeDef);
}
export function extractDirectiveDef(type: DirectiveType<any>& ComponentType<any>):
DirectiveDef<any>|ComponentDef<any> {
const def = getComponentDef(type) || getDirectiveDef(type);

View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {LifecycleHooksFeature, renderComponent, whenRendered} from './component';
import {defineBase, defineComponent, defineDirective, defineNgModule, definePipe} from './definition';
import {defineBase, defineComponent, defineDirective, defineNgModule, definePipe, setComponentScope} from './definition';
import {getComponent, getDirectives, getHostElement, getRenderedText} from './discovery_utils';
import {InheritDefinitionFeature} from './features/inherit_definition_feature';
import {NgOnChangesFeature} from './features/ng_onchanges_feature';
@ -177,6 +177,7 @@ export {
getDirectives,
getRenderedText,
renderComponent,
setComponentScope,
whenRendered,
};

View File

@ -113,6 +113,7 @@ export const angularCoreEnv: {[name: string]: Function} = {
'ɵresolveWindow': r3.resolveWindow,
'ɵresolveDocument': r3.resolveDocument,
'ɵresolveBody': r3.resolveBody,
'ɵsetComponentScope': r3.setComponentScope,
'ɵsanitizeHtml': sanitization.sanitizeHtml,
'ɵsanitizeStyle': sanitization.sanitizeStyle,

View File

@ -0,0 +1,88 @@
package(default_visibility = ["//visibility:public"])
load("//tools:defaults.bzl", "jasmine_node_test", "ng_module", "ng_rollup_bundle", "ts_library")
load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")
load("//tools/http-server:http_server.bzl", "http_server")
ng_module(
name = "cyclic_import",
srcs = [
"index.ts",
"trigger.ts",
],
tags = [
"ivy-only",
],
deps = [
"//packages/core",
],
)
ng_rollup_bundle(
name = "bundle",
# TODO(alexeagle): This is inconsistent.
# We try to teach users to always have their workspace at the start of a
# path, to disambiguate from other workspaces.
# Here, the rule implementation is looking in an execroot where the layout
# has an "external" directory for external dependencies.
# This should probably start with "angular/" and let the rule deal with it.
entry_point = "packages/core/test/bundling/cyclic_import/index.js",
tags = [
"ivy-only",
],
deps = [
":cyclic_import",
"//packages/core",
],
)
ts_library(
name = "test_lib",
testonly = True,
srcs = glob(["*_spec.ts"]),
tags = [
"ivy-only",
],
deps = [
"//packages:types",
"//packages/compiler",
"//packages/core/testing",
"//packages/private/testing",
],
)
jasmine_node_test(
name = "test",
data = [
":bundle",
":bundle.js",
":bundle.min.js.br",
":bundle.min_debug.js",
],
tags = [
"ivy-only",
],
deps = [":test_lib"],
)
js_expected_symbol_test(
name = "symbol_test",
src = ":bundle.min_debug.js",
golden = ":bundle.golden_symbols.json",
tags = [
"ivy-aot",
"ivy-only",
],
)
http_server(
name = "devserver",
data = [
"index.html",
":bundle.min.js",
":bundle.min_debug.js",
],
tags = [
"ivy-only",
],
)

View File

@ -0,0 +1,22 @@
# Purpose
This test exists to validate that ngtsc, when compiling an application where Ivy would otherwise
require a circular dependency, uses "remote scoping" via the `setComponentScope` function instead.
# How it works
There are two files, `index.ts` and `trigger.ts`. `index.ts` contains the NgModule and a simple
component (`<dep>`).
`trigger.ts` contains a component `TriggerComponent` that uses `<dep>` in its template. Normally,
Ivy would want `DepComponent` to be listed in `TriggerComponent`'s definition. However, this
requires adding an import from `trigger.ts` -> `index.ts`, and there's already an import from
`index.ts` to `trigger.ts` (for the NgModule).
In this case, ngtsc decides to set the directives in `TriggerComponent`'s definition via a different
mechanism: remote scoping. Alongside the NgModule (in `index.ts`) a call to `setComponentScope` is
generated which sets up `TriggerComponent`'s definition correctly, without introducing any imports.
This call is not tree-shakeable, but does not create a cycle.
The symbol test here verifies that `setComponentScope` is used, and the e2e spec verifies that the
application works correctly.

View File

@ -0,0 +1,644 @@
[
{
"name": "ACTIVE_INDEX"
},
{
"name": "ANIMATION_PROP_PREFIX"
},
{
"name": "BINDING_INDEX"
},
{
"name": "BLOOM_MASK"
},
{
"name": "CLEAN_PROMISE"
},
{
"name": "CONTAINER_INDEX"
},
{
"name": "CONTEXT"
},
{
"name": "ChangeDetectionStrategy"
},
{
"name": "DECLARATION_VIEW"
},
{
"name": "DepComponent"
},
{
"name": "EMPTY_ARRAY"
},
{
"name": "EMPTY_OBJ"
},
{
"name": "EmptyErrorImpl"
},
{
"name": "FLAGS"
},
{
"name": "FactoryPrototype"
},
{
"name": "HEADER_OFFSET"
},
{
"name": "HOST"
},
{
"name": "HOST_NODE"
},
{
"name": "INJECTOR"
},
{
"name": "INJECTOR_BLOOM_PARENT_SIZE"
},
{
"name": "LCONTAINER_LENGTH"
},
{
"name": "MONKEY_PATCH_KEY_NAME"
},
{
"name": "Module"
},
{
"name": "NATIVE"
},
{
"name": "NEXT"
},
{
"name": "NG_COMPONENT_DEF"
},
{
"name": "NG_DIRECTIVE_DEF"
},
{
"name": "NG_ELEMENT_ID"
},
{
"name": "NG_PIPE_DEF"
},
{
"name": "NG_PROJECT_AS_ATTR_NAME"
},
{
"name": "NG_TEMPLATE_SELECTOR"
},
{
"name": "NO_CHANGE"
},
{
"name": "NO_PARENT_INJECTOR"
},
{
"name": "NodeInjectorFactory"
},
{
"name": "ObjectUnsubscribedErrorImpl"
},
{
"name": "PARENT"
},
{
"name": "PARENT_INJECTOR"
},
{
"name": "QUERIES"
},
{
"name": "RENDERER"
},
{
"name": "RENDERER_FACTORY"
},
{
"name": "RendererStyleFlags3"
},
{
"name": "SANITIZER"
},
{
"name": "TAIL"
},
{
"name": "TVIEW"
},
{
"name": "TriggerComponent"
},
{
"name": "UnsubscriptionErrorImpl"
},
{
"name": "VIEWS"
},
{
"name": "ViewEncapsulation"
},
{
"name": "__self"
},
{
"name": "__values"
},
{
"name": "__window"
},
{
"name": "_currentNamespace"
},
{
"name": "_global"
},
{
"name": "_renderCompCount"
},
{
"name": "addComponentLogic"
},
{
"name": "addToViewTree"
},
{
"name": "allocStylingContext"
},
{
"name": "appendChild"
},
{
"name": "attachPatchData"
},
{
"name": "baseResolveDirective"
},
{
"name": "bloomAdd"
},
{
"name": "cacheMatchingLocalNames"
},
{
"name": "callHooks"
},
{
"name": "checkNoChangesMode"
},
{
"name": "checkView"
},
{
"name": "componentRefresh"
},
{
"name": "createDirectivesAndLocals"
},
{
"name": "createEmptyStylingContext"
},
{
"name": "createLView"
},
{
"name": "createNodeAtIndex"
},
{
"name": "createRootComponent"
},
{
"name": "createRootComponentView"
},
{
"name": "createRootContext"
},
{
"name": "createTNode"
},
{
"name": "createTView"
},
{
"name": "createTextNode"
},
{
"name": "createViewBlueprint"
},
{
"name": "decreaseElementDepthCount"
},
{
"name": "defaultScheduler"
},
{
"name": "defineComponent"
},
{
"name": "defineInjector"
},
{
"name": "defineNgModule"
},
{
"name": "diPublicInInjector"
},
{
"name": "domRendererFactory3"
},
{
"name": "element"
},
{
"name": "elementCreate"
},
{
"name": "elementEnd"
},
{
"name": "elementStart"
},
{
"name": "enterView"
},
{
"name": "executeHooks"
},
{
"name": "executeInitHooks"
},
{
"name": "executeViewQueryFn"
},
{
"name": "extractDirectiveDef"
},
{
"name": "extractPipeDef"
},
{
"name": "findAttrIndexInNode"
},
{
"name": "findDirectiveMatches"
},
{
"name": "firstTemplatePass"
},
{
"name": "generateExpandoInstructionBlock"
},
{
"name": "generateInitialInputs"
},
{
"name": "generatePropertyAliases"
},
{
"name": "getBeforeNodeForView"
},
{
"name": "getBindingsEnabled"
},
{
"name": "getCheckNoChangesMode"
},
{
"name": "getClosureSafeProperty"
},
{
"name": "getComponentDef"
},
{
"name": "getComponentViewByIndex"
},
{
"name": "getContainerRenderParent"
},
{
"name": "getDirectiveDef"
},
{
"name": "getElementDepthCount"
},
{
"name": "getFirstTemplatePass"
},
{
"name": "getHighestElementOrICUContainer"
},
{
"name": "getHostNative"
},
{
"name": "getInitialClassNameValue"
},
{
"name": "getInjectorIndex"
},
{
"name": "getIsParent"
},
{
"name": "getLContainer"
},
{
"name": "getLView"
},
{
"name": "getLViewChild"
},
{
"name": "getNativeAnchorNode"
},
{
"name": "getNativeByTNode"
},
{
"name": "getNodeInjectable"
},
{
"name": "getOrCreateNodeInjectorForNode"
},
{
"name": "getOrCreateTView"
},
{
"name": "getParentInjectorIndex"
},
{
"name": "getParentInjectorLocation"
},
{
"name": "getParentInjectorView"
},
{
"name": "getParentInjectorViewOffset"
},
{
"name": "getPipeDef"
},
{
"name": "getPreviousOrParentTNode"
},
{
"name": "getRenderFlags"
},
{
"name": "getRenderParent"
},
{
"name": "getRootContext"
},
{
"name": "getRootView"
},
{
"name": "getStylingContext"
},
{
"name": "getTNode"
},
{
"name": "hasClassInput"
},
{
"name": "hasParentInjector"
},
{
"name": "hasStyling"
},
{
"name": "hasTagAndTypeMatch"
},
{
"name": "includeViewProviders"
},
{
"name": "increaseElementDepthCount"
},
{
"name": "initNodeFlags"
},
{
"name": "initializeStaticContext"
},
{
"name": "initializeTNodeInputs"
},
{
"name": "insertBloom"
},
{
"name": "instantiateAllDirectives"
},
{
"name": "instantiateRootComponent"
},
{
"name": "invertObject"
},
{
"name": "invokeDirectivesHostBindings"
},
{
"name": "isAnimationProp"
},
{
"name": "isComponentDef"
},
{
"name": "isContentQueryHost"
},
{
"name": "isCreationMode"
},
{
"name": "isCssClassMatching"
},
{
"name": "isFactory"
},
{
"name": "isNodeMatchingSelector"
},
{
"name": "isNodeMatchingSelectorList"
},
{
"name": "isPositive"
},
{
"name": "isProceduralRenderer"
},
{
"name": "isRootView"
},
{
"name": "isStylingContext"
},
{
"name": "leaveView"
},
{
"name": "locateHostElement"
},
{
"name": "namespaceHTML"
},
{
"name": "nativeAppendChild"
},
{
"name": "nativeAppendOrInsertBefore"
},
{
"name": "nativeInsertBefore"
},
{
"name": "nativeParentNode"
},
{
"name": "nextNgElementId"
},
{
"name": "noSideEffects"
},
{
"name": "postProcessBaseDirective"
},
{
"name": "postProcessDirective"
},
{
"name": "queueComponentIndexForCheck"
},
{
"name": "readClassValueFromTNode"
},
{
"name": "readElementValue"
},
{
"name": "readPatchedData"
},
{
"name": "readPatchedLView"
},
{
"name": "refreshChildComponents"
},
{
"name": "refreshContentQueries"
},
{
"name": "refreshDescendantViews"
},
{
"name": "refreshDynamicEmbeddedViews"
},
{
"name": "registerPostOrderHooks"
},
{
"name": "registerPreOrderHooks"
},
{
"name": "renderComponent"
},
{
"name": "renderComponentOrTemplate"
},
{
"name": "renderEmbeddedTemplate"
},
{
"name": "renderInitialStylesAndClasses"
},
{
"name": "renderInitialStylingValues"
},
{
"name": "renderStringify"
},
{
"name": "resetComponentState"
},
{
"name": "resolveDirectives"
},
{
"name": "saveNameToExportMap"
},
{
"name": "saveResolvedLocalsInData"
},
{
"name": "setBindingRoot"
},
{
"name": "setClass"
},
{
"name": "setComponentScope"
},
{
"name": "setCurrentDirectiveDef"
},
{
"name": "setCurrentViewQueryIndex"
},
{
"name": "setFirstTemplatePass"
},
{
"name": "setHostBindings"
},
{
"name": "setIncludeViewProviders"
},
{
"name": "setInjectImplementation"
},
{
"name": "setInputsForProperty"
},
{
"name": "setInputsFromAttrs"
},
{
"name": "setIsParent"
},
{
"name": "setPreviousOrParentTNode"
},
{
"name": "setStyle"
},
{
"name": "setTNodeAndViewData"
},
{
"name": "setUpAttributes"
},
{
"name": "syncViewWithBlueprint"
},
{
"name": "text"
},
{
"name": "throwMultipleComponentError"
},
{
"name": "tickRootContext"
},
{
"name": "viewAttached"
}
]

View File

@ -0,0 +1,31 @@
<!doctype html>
<html>
<head>
<title>Angular Cyclic Import Example</title>
</head>
<body>
<!-- The Angular application will be bootstrapped into this element. -->
<trigger></trigger>
<!--
Script tag which bootstraps the application. Use `?debug` in URL to select
the debug version of the script.
There are two scripts sources: `bundle.min.js` and `bundle.min_debug.js` You can
switch between which bundle the browser loads to experiment with the application.
- `bundle.min.js`: Is what the site would serve to their users. It has gone
through rollup, build-optimizer, and uglify with tree shaking.
- `bundle.min_debug.js`: Is what the developer would like to see when debugging
the application. It has also done through full pipeline of rollup, build-optimizer,
and uglify, however special flags were passed to uglify to prevent inlining and
property renaming.
-->
<script>
document.write('<script src="' +
(document.location.search.endsWith('debug') ? '/bundle.min_debug.js' : '/bundle.min.js') +
'"></' + 'script>');
</script>
</body>
</html>

View File

@ -0,0 +1,26 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {Component, NgModule, ɵrenderComponent as renderComponent} from '@angular/core';
import {TriggerComponent} from './trigger';
@Component({
selector: 'dep',
template: 'dep',
})
export class DepComponent {
}
@NgModule({
declarations: [DepComponent, TriggerComponent],
})
export class Module {
}
renderComponent(TriggerComponent);

View File

@ -0,0 +1,41 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import '@angular/compiler';
import {withBody} from '@angular/private/testing';
import * as fs from 'fs';
import * as path from 'path';
const UTF8 = {
encoding: 'utf-8'
};
const PACKAGE = 'angular/packages/core/test/bundling/cyclic_import';
describe('treeshaking with uglify', () => {
let content: string;
const contentPath = require.resolve(path.join(PACKAGE, 'bundle.min_debug.js'));
beforeAll(() => { content = fs.readFileSync(contentPath, UTF8); });
describe('functional test in domino', () => {
it('should render hello world when not minified', withBody('<trigger></trigger>', () => {
require(path.join(PACKAGE, 'bundle.js'));
expect(document.body.textContent).toEqual('dep');
}));
it('should render hello world when debug minified', withBody('<trigger></trigger>', () => {
require(path.join(PACKAGE, 'bundle.min_debug.js'));
expect(document.body.textContent).toEqual('dep');
}));
it('should render hello world when fully minified', withBody('<trigger></trigger>', () => {
require(path.join(PACKAGE, 'bundle.min.js'));
expect(document.body.textContent).toEqual('dep');
}));
});
});

View File

@ -0,0 +1,16 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {Component} from '@angular/core';
@Component({
selector: 'trigger',
template: '<dep></dep>',
})
export class TriggerComponent {
}

View File

@ -7,7 +7,7 @@
*/
import 'reflect-metadata';
import {ElementRef, QueryList} from '@angular/core';
import {ElementRef, QueryList, ɵsetComponentScope as setComponentScope} from '@angular/core';
import {Injectable} from '@angular/core/src/di/injectable';
import {inject, setCurrentInjector} from '@angular/core/src/di/injector_compatibility';
import {InjectorDef, defineInjectable} from '@angular/core/src/di/interface/defs';