2018-04-06 12:53:10 -04:00
|
|
|
/**
|
|
|
|
* @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
|
|
|
|
*/
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
import {platform} from 'os';
|
2018-12-13 14:52:20 -05:00
|
|
|
import * as ts from 'typescript';
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
import {ErrorCode, ngErrorCode} from '../../src/ngtsc/diagnostics';
|
|
|
|
import {absoluteFrom} from '../../src/ngtsc/file_system';
|
|
|
|
import {runInEachFileSystem} from '../../src/ngtsc/file_system/testing';
|
|
|
|
import {LazyRoute} from '../../src/ngtsc/routing';
|
2019-10-24 14:24:39 -04:00
|
|
|
import {restoreTypeScriptVersionForTesting, setTypeScriptVersionForTesting} from '../../src/typescript_support';
|
2019-06-06 15:22:32 -04:00
|
|
|
import {loadStandardTestFiles} from '../helpers/src/mock_file_loading';
|
|
|
|
|
2018-09-25 18:35:03 -04:00
|
|
|
import {NgtscTestEnvironment} from './env';
|
2018-04-06 12:53:10 -04:00
|
|
|
|
2018-11-20 18:20:19 -05:00
|
|
|
const trim = (input: string): string => input.replace(/\s+/g, ' ').trim();
|
|
|
|
|
2019-01-23 14:54:43 -05:00
|
|
|
const varRegExp = (name: string): RegExp => new RegExp(`var \\w+ = \\[\"${name}\"\\];`);
|
|
|
|
|
|
|
|
const viewQueryRegExp = (descend: boolean, ref?: string): RegExp => {
|
2019-07-20 06:32:29 -04:00
|
|
|
const maybeRef = ref ? `, ${ref}` : ``;
|
|
|
|
return new RegExp(`i0\\.ɵɵviewQuery\\(\\w+, ${descend}${maybeRef}\\)`);
|
2019-01-23 14:54:43 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
const contentQueryRegExp = (predicate: string, descend: boolean, ref?: string): RegExp => {
|
2019-07-20 06:32:29 -04:00
|
|
|
const maybeRef = ref ? `, ${ref}` : ``;
|
|
|
|
return new RegExp(`i0\\.ɵɵcontentQuery\\(dirIndex, ${predicate}, ${descend}${maybeRef}\\)`);
|
2019-01-23 14:54:43 -05:00
|
|
|
};
|
|
|
|
|
2019-02-22 21:06:25 -05:00
|
|
|
const setClassMetadataRegExp = (expectedType: string): RegExp =>
|
|
|
|
new RegExp(`setClassMetadata(.*?${expectedType}.*?)`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const testFiles = loadStandardTestFiles();
|
|
|
|
|
|
|
|
runInEachFileSystem(os => {
|
|
|
|
describe('ngtsc behavioral tests', () => {
|
|
|
|
let env !: NgtscTestEnvironment;
|
2018-04-06 12:53:10 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
beforeEach(() => {
|
|
|
|
env = NgtscTestEnvironment.setup(testFiles);
|
|
|
|
env.tsconfig();
|
|
|
|
});
|
2018-04-06 12:53:10 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile Injectables without errors', () => {
|
|
|
|
env.write('test.ts', `
|
2018-04-06 12:53:10 -04:00
|
|
|
import {Injectable} from '@angular/core';
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
export class Dep {}
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
export class Service {
|
|
|
|
constructor(dep: Dep) {}
|
|
|
|
}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-04-06 12:53:10 -04:00
|
|
|
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
2019-10-15 15:41:30 -04:00
|
|
|
expect(jsContents).toContain('Dep.ɵprov =');
|
|
|
|
expect(jsContents).toContain('Service.ɵprov =');
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents).not.toContain('__decorate');
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
2019-10-15 15:41:30 -04:00
|
|
|
expect(dtsContents).toContain('static ɵprov: i0.ɵɵInjectableDef<Dep>;');
|
|
|
|
expect(dtsContents).toContain('static ɵprov: i0.ɵɵInjectableDef<Service>;');
|
2019-10-11 17:18:45 -04:00
|
|
|
expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<Dep>;');
|
|
|
|
expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<Service>;');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2018-05-31 18:50:02 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile Injectables with a generic service', () => {
|
|
|
|
env.write('test.ts', `
|
2018-11-09 20:58:33 -05:00
|
|
|
import {Injectable} from '@angular/core';
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
export class Store<T> {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-11-09 20:58:33 -05:00
|
|
|
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
2019-10-15 15:41:30 -04:00
|
|
|
expect(jsContents).toContain('Store.ɵprov =');
|
2019-06-06 15:22:32 -04:00
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
2019-10-11 17:18:45 -04:00
|
|
|
expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<Store<any>>;');
|
2019-10-15 15:41:30 -04:00
|
|
|
expect(dtsContents).toContain('static ɵprov: i0.ɵɵInjectableDef<Store<any>>;');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2018-11-09 20:58:33 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile Injectables with providedIn without errors', () => {
|
|
|
|
env.write('test.ts', `
|
2019-01-11 08:50:26 -05:00
|
|
|
import {Injectable} from '@angular/core';
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
export class Dep {}
|
|
|
|
|
|
|
|
@Injectable({ providedIn: 'root' })
|
|
|
|
export class Service {
|
|
|
|
constructor(dep: Dep) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-01-11 08:50:26 -05:00
|
|
|
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
2019-10-15 15:41:30 -04:00
|
|
|
expect(jsContents).toContain('Dep.ɵprov =');
|
|
|
|
expect(jsContents).toContain('Service.ɵprov =');
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents)
|
2019-09-01 06:26:04 -04:00
|
|
|
.toContain(
|
2019-10-11 17:18:45 -04:00
|
|
|
'Service.ɵfac = function Service_Factory(t) { return new (t || Service)(i0.ɵɵinject(Dep)); };');
|
2019-09-01 06:26:04 -04:00
|
|
|
expect(jsContents).toContain('providedIn: \'root\' })');
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents).not.toContain('__decorate');
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
2019-10-15 15:41:30 -04:00
|
|
|
expect(dtsContents).toContain('static ɵprov: i0.ɵɵInjectableDef<Dep>;');
|
|
|
|
expect(dtsContents).toContain('static ɵprov: i0.ɵɵInjectableDef<Service>;');
|
2019-10-11 17:18:45 -04:00
|
|
|
expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<Dep>;');
|
|
|
|
expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<Service>;');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2019-01-11 08:50:26 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile Injectables with providedIn and factory without errors', () => {
|
|
|
|
env.write('test.ts', `
|
2019-01-11 08:50:26 -05:00
|
|
|
import {Injectable} from '@angular/core';
|
|
|
|
|
|
|
|
@Injectable({ providedIn: 'root', useFactory: () => new Service() })
|
|
|
|
export class Service {
|
|
|
|
constructor() {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-01-11 08:50:26 -05:00
|
|
|
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
2019-10-15 15:41:30 -04:00
|
|
|
expect(jsContents).toContain('Service.ɵprov =');
|
2019-09-01 06:26:04 -04:00
|
|
|
expect(jsContents)
|
|
|
|
.toContain('factory: function () { return (function () { return new Service(); })(); }');
|
|
|
|
expect(jsContents).toContain('Service_Factory(t) { return new (t || Service)(); }');
|
|
|
|
expect(jsContents).toContain(', providedIn: \'root\' });');
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents).not.toContain('__decorate');
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
2019-10-15 15:41:30 -04:00
|
|
|
expect(dtsContents).toContain('static ɵprov: i0.ɵɵInjectableDef<Service>;');
|
2019-10-11 17:18:45 -04:00
|
|
|
expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<Service>;');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2019-01-11 08:50:26 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile Injectables with providedIn and factory with deps without errors', () => {
|
|
|
|
env.write('test.ts', `
|
2019-01-11 08:50:26 -05:00
|
|
|
import {Injectable} from '@angular/core';
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
export class Dep {}
|
|
|
|
|
|
|
|
@Injectable({ providedIn: 'root', useFactory: (dep: Dep) => new Service(dep), deps: [Dep] })
|
|
|
|
export class Service {
|
|
|
|
constructor(dep: Dep) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-01-11 08:50:26 -05:00
|
|
|
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
2019-10-15 15:41:30 -04:00
|
|
|
expect(jsContents).toContain('Service.ɵprov =');
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents).toContain('factory: function Service_Factory(t) { var r = null; if (t) {');
|
2019-09-01 06:26:04 -04:00
|
|
|
expect(jsContents).toContain('return new (t || Service)(i0.ɵɵinject(Dep));');
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents)
|
2019-10-30 19:09:38 -04:00
|
|
|
.toContain('r = (function (dep) { return new Service(dep); })(i0.ɵɵinject(Dep));');
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents).toContain('return r; }, providedIn: \'root\' });');
|
|
|
|
expect(jsContents).not.toContain('__decorate');
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
2019-10-15 15:41:30 -04:00
|
|
|
expect(dtsContents).toContain('static ɵprov: i0.ɵɵInjectableDef<Service>;');
|
2019-10-11 17:18:45 -04:00
|
|
|
expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<Service>;');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2019-01-11 08:50:26 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile @Injectable with an @Optional dependency', () => {
|
|
|
|
env.write('test.ts', `
|
2019-03-01 14:40:42 -05:00
|
|
|
import {Injectable, Optional as Opt} from '@angular/core';
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
class Dep {}
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
class Service {
|
|
|
|
constructor(@Opt() dep: Dep) {}
|
|
|
|
}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('inject(Dep, 8)');
|
|
|
|
});
|
2019-03-01 14:40:42 -05:00
|
|
|
|
2019-12-29 03:50:19 -05:00
|
|
|
it('should compile @Injectable with constructor overloads', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Injectable, Optional} from '@angular/core';
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
class Dep {}
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
class OptionalDep {}
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
class Service {
|
|
|
|
constructor(dep: Dep);
|
|
|
|
|
|
|
|
constructor(dep: Dep, @Optional() optionalDep?: OptionalDep) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
|
|
|
`Service.ɵfac = function Service_Factory(t) { ` +
|
|
|
|
`return new (t || Service)(i0.ɵɵinject(Dep), i0.ɵɵinject(OptionalDep, 8)); };`);
|
|
|
|
});
|
|
|
|
|
fix(ivy): support abstract directives in template type checking (#33131)
Recently it was made possible to have a directive without selector,
which are referred to as abstract directives. Such directives should not
be registered in an NgModule, but can still contain decorators for
inputs, outputs, queries, etc. The information from these decorators and
the `@Directive()` decorator itself needs to be registered with the
central `MetadataRegistry` so that other areas of the compiler can
request information about a given directive, an example of which is the
template type checker that needs to know about the inputs and outputs of
directives.
Prior to this change, however, abstract directives would only register
themselves with the `MetadataRegistry` as being an abstract directive,
without all of its other metadata like inputs and outputs. This meant
that the template type checker was unable to resolve the inputs and
outputs of these abstract directives, therefore failing to check them
correctly. The typical error would be that some property does not exist
on a DOM element, whereas said property should have been bound to the
abstract directive's input.
This commit fixes the problem by always registering the metadata of a
directive or component with the `MetadataRegistry`. Tests have been
added to ensure abstract directives are handled correctly in the
template type checker, together with tests to verify the form of
abstract directives in declaration files.
Fixes #30080
PR Close #33131
2019-10-13 11:00:13 -04:00
|
|
|
it('should compile Directives without errors', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({selector: '[dir]'})
|
|
|
|
export class TestDir {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('TestDir.ɵdir = i0.ɵɵdefineDirective');
|
|
|
|
expect(jsContents).toContain('TestDir.ɵfac = function');
|
|
|
|
expect(jsContents).not.toContain('__decorate');
|
|
|
|
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
|
|
|
'static ɵdir: i0.ɵɵDirectiveDefWithMeta<TestDir, "[dir]", never, {}, {}, never>');
|
|
|
|
expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<TestDir>');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should compile abstract Directives without errors', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive()
|
|
|
|
export class TestDir {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('TestDir.ɵdir = i0.ɵɵdefineDirective');
|
|
|
|
expect(jsContents).toContain('TestDir.ɵfac = function');
|
|
|
|
expect(jsContents).not.toContain('__decorate');
|
|
|
|
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
|
|
|
'static ɵdir: i0.ɵɵDirectiveDefWithMeta<TestDir, never, never, {}, {}, never>');
|
|
|
|
expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<TestDir>');
|
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile Components (inline template) without errors', () => {
|
|
|
|
env.write('test.ts', `
|
2018-05-31 18:50:02 -04:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: 'this is a test',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-05-31 18:50:02 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
2019-10-10 17:57:15 -04:00
|
|
|
expect(jsContents).toContain('TestCmp.ɵcmp = i0.ɵɵdefineComponent');
|
2019-10-11 17:18:45 -04:00
|
|
|
expect(jsContents).toContain('TestCmp.ɵfac = function');
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents).not.toContain('__decorate');
|
2018-05-31 18:50:02 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
2019-10-10 17:57:15 -04:00
|
|
|
'static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never>');
|
2019-10-11 17:18:45 -04:00
|
|
|
expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<TestCmp>');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2018-05-31 18:50:02 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile Components (dynamic inline template) without errors', () => {
|
|
|
|
env.write('test.ts', `
|
2019-02-08 17:10:21 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: 'this is ' + 'a test',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-02-08 17:10:21 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
2019-10-10 17:57:15 -04:00
|
|
|
expect(jsContents).toContain('TestCmp.ɵcmp = i0.ɵɵdefineComponent');
|
2019-10-11 17:18:45 -04:00
|
|
|
expect(jsContents).toContain('TestCmp.ɵfac = function');
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents).not.toContain('__decorate');
|
2019-02-08 17:10:21 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
2019-08-12 02:26:20 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
2019-10-10 17:57:15 -04:00
|
|
|
'static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never>');
|
2019-10-11 17:18:45 -04:00
|
|
|
expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<TestCmp>');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2019-02-08 17:10:21 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile Components (function call inline template) without errors', () => {
|
|
|
|
env.write('test.ts', `
|
2019-02-08 17:10:21 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
function getTemplate() {
|
|
|
|
return 'this is a test';
|
|
|
|
}
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: getTemplate(),
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-02-08 17:10:21 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
2019-10-10 17:57:15 -04:00
|
|
|
expect(jsContents).toContain('TestCmp.ɵcmp = i0.ɵɵdefineComponent');
|
2019-10-11 17:18:45 -04:00
|
|
|
expect(jsContents).toContain('TestCmp.ɵfac = function');
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents).not.toContain('__decorate');
|
2019-02-08 17:10:21 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
2019-10-10 17:57:15 -04:00
|
|
|
'static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never>');
|
2019-10-11 17:18:45 -04:00
|
|
|
expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<TestCmp>');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2019-02-08 17:10:21 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile Components (external template) without errors', () => {
|
|
|
|
env.write('test.ts', `
|
2018-06-26 18:01:09 -04:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
templateUrl: './dir/test.html',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('dir/test.html', '<p>Hello World</p>');
|
2018-06-26 18:01:09 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-06-26 18:01:09 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('Hello World');
|
2019-01-10 13:40:24 -05:00
|
|
|
});
|
2019-06-06 15:22:32 -04:00
|
|
|
|
|
|
|
// This test triggers the Tsickle compiler which asserts that the file-paths
|
|
|
|
// are valid for the real OS. When on non-Windows systems it doesn't like paths
|
|
|
|
// that start with `C:`.
|
|
|
|
if (os !== 'Windows' || platform() === 'win32') {
|
2019-11-05 21:00:55 -05:00
|
|
|
describe('when closure annotations are requested', () => {
|
|
|
|
|
|
|
|
it('should add @nocollapse to static fields', () => {
|
|
|
|
env.tsconfig({
|
|
|
|
'annotateForClosureCompiler': true,
|
|
|
|
});
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
templateUrl: './dir/test.html',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
|
|
|
env.write('dir/test.html', '<p>Hello World</p>');
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('/** @nocollapse */ TestCmp.ɵcmp');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2019-01-10 13:40:24 -05:00
|
|
|
|
2019-11-05 21:00:55 -05:00
|
|
|
/**
|
|
|
|
* The following set of tests verify that after Tsickle run we do not have cases which
|
|
|
|
* trigger automatic semicolon insertion, which breaks the code. In order to avoid the
|
|
|
|
* problem, we wrap all function expressions in certain fields ("providers" and
|
|
|
|
* "viewProviders") in parentheses. More info on Tsickle processing related to this case can
|
|
|
|
* be found here:
|
|
|
|
* https://github.com/angular/tsickle/blob/d7974262571c8a17d684e5ba07680e1b1993afdd/src/jsdoc_transformer.ts#L1021
|
|
|
|
*/
|
|
|
|
describe('wrap functions in certain fields in parentheses', () => {
|
|
|
|
const providers = `
|
|
|
|
[{
|
|
|
|
provide: 'token-a',
|
|
|
|
useFactory: (service: Service) => {
|
|
|
|
return () => service.id;
|
|
|
|
}
|
|
|
|
}, {
|
|
|
|
provide: 'token-b',
|
|
|
|
useFactory: function(service: Service) {
|
|
|
|
return function() {
|
|
|
|
return service.id;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}]
|
|
|
|
`;
|
|
|
|
|
|
|
|
const service = `
|
|
|
|
export class Service {
|
|
|
|
id: string = 'service-id';
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const verifyOutput = (jsContents: string) => {
|
|
|
|
// verify that there is no pattern that triggers automatic semicolon insertion
|
|
|
|
// by checking that there are no return statements not wrapped in parentheses
|
|
|
|
expect(trim(jsContents)).not.toContain(trim(`
|
|
|
|
return /**
|
|
|
|
* @return {?}
|
|
|
|
*/
|
|
|
|
`));
|
|
|
|
expect(trim(jsContents)).toContain(trim(`
|
|
|
|
[{
|
|
|
|
provide: 'token-a',
|
|
|
|
useFactory: (function (service) {
|
|
|
|
return (/**
|
|
|
|
* @return {?}
|
|
|
|
*/
|
|
|
|
function () { return service.id; });
|
|
|
|
})
|
|
|
|
}, {
|
|
|
|
provide: 'token-b',
|
|
|
|
useFactory: (function (service) {
|
|
|
|
return (/**
|
|
|
|
* @return {?}
|
|
|
|
*/
|
|
|
|
function () {
|
|
|
|
return service.id;
|
|
|
|
});
|
|
|
|
})
|
|
|
|
}]
|
|
|
|
`));
|
|
|
|
};
|
|
|
|
|
|
|
|
it('should wrap functions in "providers" list in NgModule', () => {
|
|
|
|
env.tsconfig({
|
|
|
|
'annotateForClosureCompiler': true,
|
|
|
|
});
|
|
|
|
env.write('service.ts', service);
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {Service} from './service';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
providers: ${providers}
|
|
|
|
})
|
|
|
|
export class SomeModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
verifyOutput(env.getContents('test.js'));
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should wrap functions in "providers" list in Component', () => {
|
|
|
|
env.tsconfig({
|
|
|
|
'annotateForClosureCompiler': true,
|
|
|
|
});
|
|
|
|
env.write('service.ts', service);
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Component} from '@angular/core';
|
|
|
|
import {Service} from './service';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '...',
|
|
|
|
providers: ${providers}
|
|
|
|
})
|
|
|
|
export class SomeComponent {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
verifyOutput(env.getContents('test.js'));
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should wrap functions in "viewProviders" list in Component', () => {
|
|
|
|
env.tsconfig({
|
|
|
|
'annotateForClosureCompiler': true,
|
|
|
|
});
|
|
|
|
env.write('service.ts', service);
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Component} from '@angular/core';
|
|
|
|
import {Service} from './service';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '...',
|
|
|
|
viewProviders: ${providers}
|
|
|
|
})
|
|
|
|
export class SomeComponent {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
verifyOutput(env.getContents('test.js'));
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should wrap functions in "providers" list in Directive', () => {
|
|
|
|
env.tsconfig({
|
|
|
|
'annotateForClosureCompiler': true,
|
|
|
|
});
|
|
|
|
env.write('service.ts', service);
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
|
|
|
import {Service} from './service';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
providers: ${providers}
|
|
|
|
})
|
|
|
|
export class SomeDirective {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
verifyOutput(env.getContents('test.js'));
|
|
|
|
});
|
|
|
|
});
|
2019-01-10 13:40:24 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
|
|
|
}
|
2019-01-10 13:40:24 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should recognize aliased decorators', () => {
|
|
|
|
env.write('test.ts', `
|
2019-03-08 18:32:31 -05:00
|
|
|
import {
|
|
|
|
Component as AngularComponent,
|
|
|
|
Directive as AngularDirective,
|
|
|
|
Pipe as AngularPipe,
|
|
|
|
Injectable as AngularInjectable,
|
|
|
|
NgModule as AngularNgModule,
|
|
|
|
Input as AngularInput,
|
|
|
|
Output as AngularOutput
|
|
|
|
} from '@angular/core';
|
|
|
|
|
|
|
|
export class TestBase {
|
|
|
|
@AngularInput() input: any;
|
|
|
|
@AngularOutput() output: any;
|
|
|
|
}
|
|
|
|
|
|
|
|
@AngularComponent({
|
|
|
|
selector: 'test-component',
|
|
|
|
template: '...'
|
|
|
|
})
|
|
|
|
export class TestComponent {
|
|
|
|
@AngularInput() input: any;
|
|
|
|
@AngularOutput() output: any;
|
|
|
|
}
|
|
|
|
|
|
|
|
@AngularDirective({
|
|
|
|
selector: 'test-directive'
|
|
|
|
})
|
|
|
|
export class TestDirective {}
|
|
|
|
|
|
|
|
@AngularPipe({
|
|
|
|
name: 'test-pipe'
|
|
|
|
})
|
|
|
|
export class TestPipe {}
|
|
|
|
|
|
|
|
@AngularInjectable({})
|
|
|
|
export class TestInjectable {}
|
|
|
|
|
|
|
|
@AngularNgModule({
|
|
|
|
declarations: [
|
|
|
|
TestComponent,
|
|
|
|
TestDirective,
|
|
|
|
TestPipe
|
|
|
|
],
|
|
|
|
exports: [
|
|
|
|
TestComponent,
|
|
|
|
TestDirective,
|
|
|
|
TestPipe
|
|
|
|
]
|
|
|
|
})
|
|
|
|
class MyModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
|
|
|
|
const jsContents = env.getContents('test.js');
|
2019-10-25 13:45:08 -04:00
|
|
|
expect(jsContents).toContain('TestBase.ɵdir = i0.ɵɵdefineDirective');
|
2019-10-10 17:57:15 -04:00
|
|
|
expect(jsContents).toContain('TestComponent.ɵcmp = i0.ɵɵdefineComponent');
|
2019-10-11 15:28:12 -04:00
|
|
|
expect(jsContents).toContain('TestDirective.ɵdir = i0.ɵɵdefineDirective');
|
2019-10-11 22:19:59 -04:00
|
|
|
expect(jsContents).toContain('TestPipe.ɵpipe = i0.ɵɵdefinePipe');
|
2019-10-15 15:41:30 -04:00
|
|
|
expect(jsContents).toContain('TestInjectable.ɵprov = i0.ɵɵdefineInjectable');
|
2019-10-14 10:20:26 -04:00
|
|
|
expect(jsContents).toContain('MyModule.ɵmod = i0.ɵɵdefineNgModule');
|
2019-10-14 18:28:01 -04:00
|
|
|
expect(jsContents).toContain('MyModule.ɵinj = i0.ɵɵdefineInjector');
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents).toContain('inputs: { input: "input" }');
|
|
|
|
expect(jsContents).toContain('outputs: { output: "output" }');
|
|
|
|
});
|
2019-03-08 18:32:31 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile Components with a templateUrl in a different rootDir', () => {
|
|
|
|
env.tsconfig({}, ['./extraRootDir']);
|
|
|
|
env.write('extraRootDir/test.html', '<p>Hello World</p>');
|
|
|
|
env.write('test.ts', `
|
2018-11-30 13:37:06 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
templateUrl: 'test.html',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-11-30 13:37:06 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('Hello World');
|
|
|
|
});
|
2018-11-30 13:37:06 -05:00
|
|
|
|
2019-07-11 07:55:11 -04:00
|
|
|
it('should compile Components with an absolute templateUrl in a different rootDir', () => {
|
|
|
|
env.tsconfig({}, ['./extraRootDir']);
|
|
|
|
env.write('extraRootDir/test.html', '<p>Hello World</p>');
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
templateUrl: '/test.html',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('Hello World');
|
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile components with styleUrls', () => {
|
|
|
|
env.write('test.ts', `
|
2018-11-29 17:17:51 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
styleUrls: ['./dir/style.css'],
|
|
|
|
template: '',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('dir/style.css', ':host { background-color: blue; }');
|
2018-11-29 17:17:51 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-11-29 17:17:51 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('background-color: blue');
|
|
|
|
});
|
2018-11-29 17:17:51 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile components with styleUrls with fallback to .css extension', () => {
|
|
|
|
env.write('test.ts', `
|
2019-02-15 18:57:05 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
styleUrls: ['./dir/style.scss'],
|
|
|
|
template: '',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('dir/style.css', ':host { background-color: blue; }');
|
2019-02-15 18:57:05 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-02-15 18:57:05 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('background-color: blue');
|
|
|
|
});
|
2019-02-15 18:57:05 -05:00
|
|
|
|
2019-10-25 13:45:08 -04:00
|
|
|
it('should include generic type for undecorated class declarations', () => {
|
2019-06-22 11:22:50 -04:00
|
|
|
env.write('test.ts', `
|
|
|
|
import {Component, Input, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
export class TestBase {
|
|
|
|
@Input() input: any;
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
|
|
|
|
const jsContents = env.getContents('test.js');
|
2019-10-25 13:45:08 -04:00
|
|
|
expect(jsContents)
|
2019-10-27 05:59:23 -04:00
|
|
|
.toContain('i0.ɵɵdefineDirective({ type: TestBase, inputs: { input: "input" } });');
|
2019-06-22 11:22:50 -04:00
|
|
|
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
2019-10-25 13:45:08 -04:00
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
2019-12-14 16:15:32 -05:00
|
|
|
`static ɵdir: i0.ɵɵDirectiveDefWithMeta<TestBase, never, never, { "input": "input"; }, {}, never>;`);
|
2019-06-22 11:22:50 -04:00
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile NgModules without errors', () => {
|
|
|
|
env.write('test.ts', `
|
2018-05-31 18:50:02 -04:00
|
|
|
import {Component, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: 'this is a test',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [TestCmp],
|
2018-08-28 17:19:33 -04:00
|
|
|
bootstrap: [TestCmp],
|
2018-05-31 18:50:02 -04:00
|
|
|
})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain('i0.ɵɵdefineNgModule({ type: TestModule, bootstrap: [TestCmp] });');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
fix(ivy): retain JIT metadata unless JIT mode is explicitly disabled (#33671)
NgModules in Ivy have a definition which contains various different bits
of metadata about the module. In particular, this metadata falls into two
categories:
* metadata required to use the module at runtime (for bootstrapping, etc)
in AOT-only applications.
* metadata required to depend on the module from a JIT-compiled app.
The latter metadata consists of the module's declarations, imports, and
exports. To support JIT usage, this metadata must be included in the
generated code, especially if that code is shipped to NPM. However, because
this metadata preserves the entire NgModule graph (references to all
directives and components in the app), it needs to be removed during
optimization for AOT-only builds.
Previously, this was done with a clever design:
1. The extra metadata was added by a function called `setNgModuleScope`.
A call to this function was generated after each NgModule.
2. This function call was marked as "pure" with a comment and used
`noSideEffects` internally, which causes optimizers to remove it.
The effect was that in dev mode or test mode (which use JIT), no optimizer
runs and the full NgModule metadata was available at runtime. But in
production (presumably AOT) builds, the optimizer runs and removes the JIT-
specific metadata.
However, there are cases where apps that want to use JIT in production, and
still make an optimized build. In this case, the JIT-specific metadata would
be erroneously removed. This commit solves that problem by adding an
`ngJitMode` global variable which guards all `setNgModuleScope` calls. An
optimizer can be configured to statically define this global to be `false`
for AOT-only builds, causing the extra metadata to be stripped.
A configuration for Terser used by the CLI is provided in `tooling.ts` which
sets `ngJitMode` to `false` when building AOT apps.
PR Close #33671
2019-11-07 17:18:44 -05:00
|
|
|
'function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(TestModule, { declarations: [TestCmp] }); })();');
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
|
|
|
'i0.ɵɵdefineInjector({ factory: ' +
|
|
|
|
'function TestModule_Factory(t) { return new (t || TestModule)(); } });');
|
|
|
|
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
2019-10-10 17:57:15 -04:00
|
|
|
'static ɵcmp: i0.ɵɵComponentDefWithMeta<TestCmp, "test-cmp", never, {}, {}, never>');
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
2019-10-14 10:20:26 -04:00
|
|
|
'static ɵmod: i0.ɵɵNgModuleDefWithMeta<TestModule, [typeof TestCmp], never, never>');
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(dtsContents).not.toContain('__decorate');
|
|
|
|
});
|
2018-06-18 19:28:02 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should not emit a ɵɵsetNgModuleScope call when no scope metadata is present', () => {
|
|
|
|
env.write('test.ts', `
|
2019-03-29 16:31:22 -04:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-03-29 16:31:22 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('i0.ɵɵdefineNgModule({ type: TestModule });');
|
|
|
|
expect(jsContents).not.toContain('ɵɵsetNgModuleScope(TestModule,');
|
|
|
|
});
|
2019-03-29 16:31:22 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should emit the id when the module\'s id is a string', () => {
|
|
|
|
env.write('test.ts', `
|
2019-04-18 19:22:53 -04:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({id: 'test'})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-04-18 19:22:53 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain(`i0.ɵɵdefineNgModule({ type: TestModule, id: 'test' })`);
|
|
|
|
});
|
2019-04-18 19:22:53 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should emit the id when the module\'s id is defined as `module.id`', () => {
|
|
|
|
env.write('index.d.ts', `
|
2019-04-22 21:04:53 -04:00
|
|
|
declare const module = {id: string};
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('test.ts', `
|
2019-04-22 21:04:53 -04:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({id: module.id})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-04-22 21:04:53 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('i0.ɵɵdefineNgModule({ type: TestModule, id: module.id })');
|
|
|
|
});
|
2019-04-22 21:04:53 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should filter out directives and pipes from module exports in the injector def', () => {
|
|
|
|
env.write('test.ts', `
|
2019-03-30 08:09:45 -04:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterComp, RouterModule} from '@angular/router';
|
|
|
|
import {Dir, OtherDir, MyPipe, Comp} from './decls';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [OtherDir],
|
|
|
|
exports: [OtherDir],
|
|
|
|
})
|
|
|
|
export class OtherModule {}
|
2019-04-04 14:41:52 -04:00
|
|
|
|
2019-03-30 08:09:45 -04:00
|
|
|
const EXPORTS = [Dir, MyPipe, Comp, OtherModule, OtherDir, RouterModule, RouterComp];
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [Dir, MyPipe, Comp],
|
|
|
|
imports: [OtherModule, RouterModule.forRoot()],
|
|
|
|
exports: [EXPORTS],
|
|
|
|
})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write(`decls.ts`, `
|
2019-03-30 08:09:45 -04:00
|
|
|
import {Component, Directive, Pipe} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({selector: '[dir]'})
|
|
|
|
export class Dir {}
|
|
|
|
|
|
|
|
@Directive({selector: '[other]'})
|
|
|
|
export class OtherDir {}
|
|
|
|
|
|
|
|
@Pipe({name:'pipe'})
|
|
|
|
export class MyPipe {}
|
|
|
|
|
|
|
|
@Component({selector: 'test', template: ''})
|
|
|
|
export class Comp {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('node_modules/@angular/router/index.d.ts', `
|
2019-05-17 21:49:21 -04:00
|
|
|
import {ɵɵComponentDefWithMeta, ModuleWithProviders, ɵɵNgModuleDefWithMeta} from '@angular/core';
|
2019-03-30 08:09:45 -04:00
|
|
|
|
|
|
|
export declare class RouterComp {
|
2019-10-10 17:57:15 -04:00
|
|
|
static ɵcmp: ɵɵComponentDefWithMeta<RouterComp, "lib-cmp", never, {}, {}, never>
|
2019-03-30 08:09:45 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
declare class RouterModule {
|
|
|
|
static forRoot(): ModuleWithProviders<RouterModule>;
|
2019-10-14 10:20:26 -04:00
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<RouterModule, [typeof RouterComp], never, [typeof RouterComp]>;
|
2019-03-30 08:09:45 -04:00
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-03-30 08:09:45 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
|
|
|
'i0.ɵɵdefineInjector({ factory: function TestModule_Factory(t) ' +
|
|
|
|
'{ return new (t || TestModule)(); }, imports: [[OtherModule, RouterModule.forRoot()],' +
|
|
|
|
'\n OtherModule,\n RouterModule] });');
|
|
|
|
});
|
2019-03-30 08:09:45 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile NgModules with services without errors', () => {
|
|
|
|
env.write('test.ts', `
|
2018-06-18 19:28:02 -04:00
|
|
|
import {Component, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
export class Token {}
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class OtherModule {}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: 'this is a test',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [TestCmp],
|
|
|
|
providers: [{provide: Token, useValue: 'test'}],
|
|
|
|
imports: [OtherModule],
|
|
|
|
})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-06-26 13:44:22 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('i0.ɵɵdefineNgModule({ type: TestModule });');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
2019-10-14 18:28:01 -04:00
|
|
|
`TestModule.ɵinj = i0.ɵɵdefineInjector({ factory: ` +
|
2019-06-06 15:22:32 -04:00
|
|
|
`function TestModule_Factory(t) { return new (t || TestModule)(); }, providers: [{ provide: ` +
|
|
|
|
`Token, useValue: 'test' }], imports: [[OtherModule]] });`);
|
|
|
|
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
2019-10-14 10:20:26 -04:00
|
|
|
'static ɵmod: i0.ɵɵNgModuleDefWithMeta<TestModule, [typeof TestCmp], [typeof OtherModule], never>');
|
2019-10-14 18:28:01 -04:00
|
|
|
expect(dtsContents).toContain('static ɵinj: i0.ɵɵInjectorDef');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should compile NgModules with factory providers without errors', () => {
|
|
|
|
env.write('test.ts', `
|
2019-01-11 08:50:26 -05:00
|
|
|
import {Component, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
export class Token {}
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class OtherModule {}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: 'this is a test',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [TestCmp],
|
|
|
|
providers: [{provide: Token, useFactory: () => new Token()}],
|
|
|
|
imports: [OtherModule],
|
|
|
|
})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-01-11 08:50:26 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('i0.ɵɵdefineNgModule({ type: TestModule });');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
2019-10-14 18:28:01 -04:00
|
|
|
`TestModule.ɵinj = i0.ɵɵdefineInjector({ factory: ` +
|
2019-06-06 15:22:32 -04:00
|
|
|
`function TestModule_Factory(t) { return new (t || TestModule)(); }, providers: [{ provide: ` +
|
|
|
|
`Token, useFactory: function () { return new Token(); } }], imports: [[OtherModule]] });`);
|
|
|
|
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
2019-10-14 10:20:26 -04:00
|
|
|
'static ɵmod: i0.ɵɵNgModuleDefWithMeta<TestModule, [typeof TestCmp], [typeof OtherModule], never>');
|
2019-10-14 18:28:01 -04:00
|
|
|
expect(dtsContents).toContain('static ɵinj: i0.ɵɵInjectorDef');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should compile NgModules with factory providers and deps without errors', () => {
|
|
|
|
env.write('test.ts', `
|
2019-01-11 08:50:26 -05:00
|
|
|
import {Component, NgModule} from '@angular/core';
|
2019-01-26 06:29:38 -05:00
|
|
|
|
2019-01-11 08:50:26 -05:00
|
|
|
export class Dep {}
|
|
|
|
|
|
|
|
export class Token {
|
|
|
|
constructor(dep: Dep) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class OtherModule {}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: 'this is a test',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [TestCmp],
|
|
|
|
providers: [{provide: Token, useFactory: (dep: Dep) => new Token(dep), deps: [Dep]}],
|
|
|
|
imports: [OtherModule],
|
|
|
|
})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-01-11 08:50:26 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('i0.ɵɵdefineNgModule({ type: TestModule });');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
2019-10-14 18:28:01 -04:00
|
|
|
`TestModule.ɵinj = i0.ɵɵdefineInjector({ factory: ` +
|
2019-06-06 15:22:32 -04:00
|
|
|
`function TestModule_Factory(t) { return new (t || TestModule)(); }, providers: [{ provide: ` +
|
|
|
|
`Token, useFactory: function (dep) { return new Token(dep); }, deps: [Dep] }], imports: [[OtherModule]] });`);
|
|
|
|
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
2019-10-14 10:20:26 -04:00
|
|
|
'static ɵmod: i0.ɵɵNgModuleDefWithMeta<TestModule, [typeof TestCmp], [typeof OtherModule], never>');
|
2019-10-14 18:28:01 -04:00
|
|
|
expect(dtsContents).toContain('static ɵinj: i0.ɵɵInjectorDef');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should compile NgModules with references to local components', () => {
|
|
|
|
env.write('test.ts', `
|
fix(ivy): force new imports for .d.ts files (#25080)
When ngtsc encounters a reference to a type (for example, a Component
type listed in an NgModule declarations array), it traces the import
of that type and attempts to determine the best way to refer to it.
In the event the type is defined in the same file where a reference
is being generated, the identifier of the type is used. If the type
was imported, ngtsc has a choice. It can use the identifier from the
original import, or it can write a new import to the module where the
type came from.
ngtsc has a bug currently when it elects to rely on the user's import.
When writing a .d.ts file, the user's import may have been elided as
the type was not referred to from the type side of the program. Thus,
in .d.ts files ngtsc must always assume the import may not exist, and
generate a new one.
In .js output the import is guaranteed to still exist, so it's
preferable for ngtsc to continue using the existing import if one is
available.
This commit changes how @angular/compiler writes type definitions, and
allows it to use a different expression to write a type definition than
is used to write the value. This allows ngtsc to specify that types in
type definitions should always be imported. A corresponding change to
the staticallyResolve() Reference system allows the choice of which
type of import to use when generating an Expression from a Reference.
PR Close #25080
2018-07-24 19:10:15 -04:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {Foo} from './foo';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [Foo],
|
|
|
|
})
|
|
|
|
export class FooModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('foo.ts', `
|
fix(ivy): force new imports for .d.ts files (#25080)
When ngtsc encounters a reference to a type (for example, a Component
type listed in an NgModule declarations array), it traces the import
of that type and attempts to determine the best way to refer to it.
In the event the type is defined in the same file where a reference
is being generated, the identifier of the type is used. If the type
was imported, ngtsc has a choice. It can use the identifier from the
original import, or it can write a new import to the module where the
type came from.
ngtsc has a bug currently when it elects to rely on the user's import.
When writing a .d.ts file, the user's import may have been elided as
the type was not referred to from the type side of the program. Thus,
in .d.ts files ngtsc must always assume the import may not exist, and
generate a new one.
In .js output the import is guaranteed to still exist, so it's
preferable for ngtsc to continue using the existing import if one is
available.
This commit changes how @angular/compiler writes type definitions, and
allows it to use a different expression to write a type definition than
is used to write the value. This allows ngtsc to specify that types in
type definitions should always be imported. A corresponding change to
the staticallyResolve() Reference system allows the choice of which
type of import to use when generating an Expression from a Reference.
PR Close #25080
2018-07-24 19:10:15 -04:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
@Component({selector: 'foo', template: ''})
|
|
|
|
export class Foo {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
fix(ivy): force new imports for .d.ts files (#25080)
When ngtsc encounters a reference to a type (for example, a Component
type listed in an NgModule declarations array), it traces the import
of that type and attempts to determine the best way to refer to it.
In the event the type is defined in the same file where a reference
is being generated, the identifier of the type is used. If the type
was imported, ngtsc has a choice. It can use the identifier from the
original import, or it can write a new import to the module where the
type came from.
ngtsc has a bug currently when it elects to rely on the user's import.
When writing a .d.ts file, the user's import may have been elided as
the type was not referred to from the type side of the program. Thus,
in .d.ts files ngtsc must always assume the import may not exist, and
generate a new one.
In .js output the import is guaranteed to still exist, so it's
preferable for ngtsc to continue using the existing import if one is
available.
This commit changes how @angular/compiler writes type definitions, and
allows it to use a different expression to write a type definition than
is used to write the value. This allows ngtsc to specify that types in
type definitions should always be imported. A corresponding change to
the staticallyResolve() Reference system allows the choice of which
type of import to use when generating an Expression from a Reference.
PR Close #25080
2018-07-24 19:10:15 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
fix(ivy): force new imports for .d.ts files (#25080)
When ngtsc encounters a reference to a type (for example, a Component
type listed in an NgModule declarations array), it traces the import
of that type and attempts to determine the best way to refer to it.
In the event the type is defined in the same file where a reference
is being generated, the identifier of the type is used. If the type
was imported, ngtsc has a choice. It can use the identifier from the
original import, or it can write a new import to the module where the
type came from.
ngtsc has a bug currently when it elects to rely on the user's import.
When writing a .d.ts file, the user's import may have been elided as
the type was not referred to from the type side of the program. Thus,
in .d.ts files ngtsc must always assume the import may not exist, and
generate a new one.
In .js output the import is guaranteed to still exist, so it's
preferable for ngtsc to continue using the existing import if one is
available.
This commit changes how @angular/compiler writes type definitions, and
allows it to use a different expression to write a type definition than
is used to write the value. This allows ngtsc to specify that types in
type definitions should always be imported. A corresponding change to
the staticallyResolve() Reference system allows the choice of which
type of import to use when generating an Expression from a Reference.
PR Close #25080
2018-07-24 19:10:15 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents).toContain('import { Foo } from \'./foo\';');
|
|
|
|
expect(jsContents).not.toMatch(/as i[0-9] from ".\/foo"/);
|
|
|
|
expect(dtsContents).toContain('as i1 from "./foo";');
|
|
|
|
});
|
fix(ivy): force new imports for .d.ts files (#25080)
When ngtsc encounters a reference to a type (for example, a Component
type listed in an NgModule declarations array), it traces the import
of that type and attempts to determine the best way to refer to it.
In the event the type is defined in the same file where a reference
is being generated, the identifier of the type is used. If the type
was imported, ngtsc has a choice. It can use the identifier from the
original import, or it can write a new import to the module where the
type came from.
ngtsc has a bug currently when it elects to rely on the user's import.
When writing a .d.ts file, the user's import may have been elided as
the type was not referred to from the type side of the program. Thus,
in .d.ts files ngtsc must always assume the import may not exist, and
generate a new one.
In .js output the import is guaranteed to still exist, so it's
preferable for ngtsc to continue using the existing import if one is
available.
This commit changes how @angular/compiler writes type definitions, and
allows it to use a different expression to write a type definition than
is used to write the value. This allows ngtsc to specify that types in
type definitions should always be imported. A corresponding change to
the staticallyResolve() Reference system allows the choice of which
type of import to use when generating an Expression from a Reference.
PR Close #25080
2018-07-24 19:10:15 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile NgModules with references to absolute components', () => {
|
|
|
|
env.write('test.ts', `
|
fix(ivy): force new imports for .d.ts files (#25080)
When ngtsc encounters a reference to a type (for example, a Component
type listed in an NgModule declarations array), it traces the import
of that type and attempts to determine the best way to refer to it.
In the event the type is defined in the same file where a reference
is being generated, the identifier of the type is used. If the type
was imported, ngtsc has a choice. It can use the identifier from the
original import, or it can write a new import to the module where the
type came from.
ngtsc has a bug currently when it elects to rely on the user's import.
When writing a .d.ts file, the user's import may have been elided as
the type was not referred to from the type side of the program. Thus,
in .d.ts files ngtsc must always assume the import may not exist, and
generate a new one.
In .js output the import is guaranteed to still exist, so it's
preferable for ngtsc to continue using the existing import if one is
available.
This commit changes how @angular/compiler writes type definitions, and
allows it to use a different expression to write a type definition than
is used to write the value. This allows ngtsc to specify that types in
type definitions should always be imported. A corresponding change to
the staticallyResolve() Reference system allows the choice of which
type of import to use when generating an Expression from a Reference.
PR Close #25080
2018-07-24 19:10:15 -04:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {Foo} from 'foo';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [Foo],
|
|
|
|
})
|
|
|
|
export class FooModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('node_modules/foo/index.ts', `
|
2019-02-19 20:36:26 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'foo',
|
|
|
|
template: '',
|
|
|
|
})
|
fix(ivy): force new imports for .d.ts files (#25080)
When ngtsc encounters a reference to a type (for example, a Component
type listed in an NgModule declarations array), it traces the import
of that type and attempts to determine the best way to refer to it.
In the event the type is defined in the same file where a reference
is being generated, the identifier of the type is used. If the type
was imported, ngtsc has a choice. It can use the identifier from the
original import, or it can write a new import to the module where the
type came from.
ngtsc has a bug currently when it elects to rely on the user's import.
When writing a .d.ts file, the user's import may have been elided as
the type was not referred to from the type side of the program. Thus,
in .d.ts files ngtsc must always assume the import may not exist, and
generate a new one.
In .js output the import is guaranteed to still exist, so it's
preferable for ngtsc to continue using the existing import if one is
available.
This commit changes how @angular/compiler writes type definitions, and
allows it to use a different expression to write a type definition than
is used to write the value. This allows ngtsc to specify that types in
type definitions should always be imported. A corresponding change to
the staticallyResolve() Reference system allows the choice of which
type of import to use when generating an Expression from a Reference.
PR Close #25080
2018-07-24 19:10:15 -04:00
|
|
|
export class Foo {
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
fix(ivy): force new imports for .d.ts files (#25080)
When ngtsc encounters a reference to a type (for example, a Component
type listed in an NgModule declarations array), it traces the import
of that type and attempts to determine the best way to refer to it.
In the event the type is defined in the same file where a reference
is being generated, the identifier of the type is used. If the type
was imported, ngtsc has a choice. It can use the identifier from the
original import, or it can write a new import to the module where the
type came from.
ngtsc has a bug currently when it elects to rely on the user's import.
When writing a .d.ts file, the user's import may have been elided as
the type was not referred to from the type side of the program. Thus,
in .d.ts files ngtsc must always assume the import may not exist, and
generate a new one.
In .js output the import is guaranteed to still exist, so it's
preferable for ngtsc to continue using the existing import if one is
available.
This commit changes how @angular/compiler writes type definitions, and
allows it to use a different expression to write a type definition than
is used to write the value. This allows ngtsc to specify that types in
type definitions should always be imported. A corresponding change to
the staticallyResolve() Reference system allows the choice of which
type of import to use when generating an Expression from a Reference.
PR Close #25080
2018-07-24 19:10:15 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
fix(ivy): force new imports for .d.ts files (#25080)
When ngtsc encounters a reference to a type (for example, a Component
type listed in an NgModule declarations array), it traces the import
of that type and attempts to determine the best way to refer to it.
In the event the type is defined in the same file where a reference
is being generated, the identifier of the type is used. If the type
was imported, ngtsc has a choice. It can use the identifier from the
original import, or it can write a new import to the module where the
type came from.
ngtsc has a bug currently when it elects to rely on the user's import.
When writing a .d.ts file, the user's import may have been elided as
the type was not referred to from the type side of the program. Thus,
in .d.ts files ngtsc must always assume the import may not exist, and
generate a new one.
In .js output the import is guaranteed to still exist, so it's
preferable for ngtsc to continue using the existing import if one is
available.
This commit changes how @angular/compiler writes type definitions, and
allows it to use a different expression to write a type definition than
is used to write the value. This allows ngtsc to specify that types in
type definitions should always be imported. A corresponding change to
the staticallyResolve() Reference system allows the choice of which
type of import to use when generating an Expression from a Reference.
PR Close #25080
2018-07-24 19:10:15 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents).toContain('import { Foo } from \'foo\';');
|
|
|
|
expect(jsContents).not.toMatch(/as i[0-9] from "foo"/);
|
|
|
|
expect(dtsContents).toContain('as i1 from "foo";');
|
|
|
|
});
|
fix(ivy): force new imports for .d.ts files (#25080)
When ngtsc encounters a reference to a type (for example, a Component
type listed in an NgModule declarations array), it traces the import
of that type and attempts to determine the best way to refer to it.
In the event the type is defined in the same file where a reference
is being generated, the identifier of the type is used. If the type
was imported, ngtsc has a choice. It can use the identifier from the
original import, or it can write a new import to the module where the
type came from.
ngtsc has a bug currently when it elects to rely on the user's import.
When writing a .d.ts file, the user's import may have been elided as
the type was not referred to from the type side of the program. Thus,
in .d.ts files ngtsc must always assume the import may not exist, and
generate a new one.
In .js output the import is guaranteed to still exist, so it's
preferable for ngtsc to continue using the existing import if one is
available.
This commit changes how @angular/compiler writes type definitions, and
allows it to use a different expression to write a type definition than
is used to write the value. This allows ngtsc to specify that types in
type definitions should always be imported. A corresponding change to
the staticallyResolve() Reference system allows the choice of which
type of import to use when generating an Expression from a Reference.
PR Close #25080
2018-07-24 19:10:15 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile NgModules with references to forward declared bootstrap components', () => {
|
|
|
|
env.write('test.ts', `
|
2019-03-08 20:57:34 -05:00
|
|
|
import {Component, forwardRef, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
bootstrap: [forwardRef(() => Foo)],
|
|
|
|
})
|
|
|
|
export class FooModule {}
|
|
|
|
|
|
|
|
@Component({selector: 'foo', template: 'foo'})
|
|
|
|
export class Foo {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-03-08 20:57:34 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('bootstrap: function () { return [Foo]; }');
|
|
|
|
});
|
2019-03-08 20:57:34 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile NgModules with references to forward declared directives', () => {
|
|
|
|
env.write('test.ts', `
|
2019-03-08 20:57:34 -05:00
|
|
|
import {Directive, forwardRef, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [forwardRef(() => Foo)],
|
|
|
|
})
|
|
|
|
export class FooModule {}
|
|
|
|
|
|
|
|
@Directive({selector: 'foo'})
|
|
|
|
export class Foo {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-03-08 20:57:34 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('declarations: function () { return [Foo]; }');
|
|
|
|
});
|
2019-03-08 20:57:34 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile NgModules with references to forward declared imports', () => {
|
|
|
|
env.write('test.ts', `
|
2019-03-08 20:57:34 -05:00
|
|
|
import {forwardRef, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [forwardRef(() => BarModule)],
|
|
|
|
})
|
|
|
|
export class FooModule {}
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class BarModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-03-08 20:57:34 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('imports: function () { return [BarModule]; }');
|
|
|
|
});
|
2019-03-08 20:57:34 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile NgModules with references to forward declared exports', () => {
|
|
|
|
env.write('test.ts', `
|
2019-03-08 20:57:34 -05:00
|
|
|
import {forwardRef, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
exports: [forwardRef(() => BarModule)],
|
|
|
|
})
|
|
|
|
export class FooModule {}
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class BarModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-03-08 20:57:34 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('exports: function () { return [BarModule]; }');
|
|
|
|
});
|
2019-03-08 20:57:34 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile Pipes without errors', () => {
|
|
|
|
env.write('test.ts', `
|
2018-06-26 13:44:22 -04:00
|
|
|
import {Pipe} from '@angular/core';
|
|
|
|
|
|
|
|
@Pipe({
|
|
|
|
name: 'test-pipe',
|
|
|
|
pure: false,
|
|
|
|
})
|
|
|
|
export class TestPipe {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-06-26 13:44:22 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
2018-06-26 13:44:22 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
2019-10-11 22:19:59 -04:00
|
|
|
'TestPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "test-pipe", type: TestPipe, pure: false })');
|
2019-08-12 02:26:20 -04:00
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
2019-10-11 17:18:45 -04:00
|
|
|
'TestPipe.ɵfac = function TestPipe_Factory(t) { return new (t || TestPipe)(); }');
|
2019-10-11 22:19:59 -04:00
|
|
|
expect(dtsContents).toContain('static ɵpipe: i0.ɵɵPipeDefWithMeta<TestPipe, "test-pipe">;');
|
2019-10-11 17:18:45 -04:00
|
|
|
expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<TestPipe>;');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2018-06-26 13:44:22 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile pure Pipes without errors', () => {
|
|
|
|
env.write('test.ts', `
|
2018-07-03 19:13:54 -04:00
|
|
|
import {Pipe} from '@angular/core';
|
|
|
|
|
|
|
|
@Pipe({
|
|
|
|
name: 'test-pipe',
|
|
|
|
})
|
|
|
|
export class TestPipe {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-07-03 19:13:54 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
2018-07-03 19:13:54 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
2019-10-11 22:19:59 -04:00
|
|
|
'TestPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "test-pipe", type: TestPipe, pure: true })');
|
2019-08-12 02:26:20 -04:00
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
2019-10-11 17:18:45 -04:00
|
|
|
'TestPipe.ɵfac = function TestPipe_Factory(t) { return new (t || TestPipe)(); }');
|
2019-10-11 22:19:59 -04:00
|
|
|
expect(dtsContents).toContain('static ɵpipe: i0.ɵɵPipeDefWithMeta<TestPipe, "test-pipe">;');
|
2019-10-11 17:18:45 -04:00
|
|
|
expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<TestPipe>;');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2018-07-03 19:13:54 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile Pipes with dependencies', () => {
|
|
|
|
env.write('test.ts', `
|
2018-06-26 13:44:22 -04:00
|
|
|
import {Pipe} from '@angular/core';
|
|
|
|
|
|
|
|
export class Dep {}
|
|
|
|
|
|
|
|
@Pipe({
|
|
|
|
name: 'test-pipe',
|
|
|
|
pure: false,
|
|
|
|
})
|
|
|
|
export class TestPipe {
|
|
|
|
constructor(dep: Dep) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-06-26 13:44:22 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('return new (t || TestPipe)(i0.ɵɵdirectiveInject(Dep));');
|
|
|
|
});
|
2018-06-26 13:44:22 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile Pipes with generic types', () => {
|
|
|
|
env.write('test.ts', `
|
2019-03-19 16:22:03 -04:00
|
|
|
import {Pipe} from '@angular/core';
|
|
|
|
|
|
|
|
@Pipe({
|
|
|
|
name: 'test-pipe',
|
|
|
|
})
|
|
|
|
export class TestPipe<T> {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-03-19 16:22:03 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
2019-10-11 22:19:59 -04:00
|
|
|
expect(jsContents).toContain('TestPipe.ɵpipe =');
|
2019-06-06 15:22:32 -04:00
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
|
|
|
expect(dtsContents)
|
2019-10-11 22:19:59 -04:00
|
|
|
.toContain('static ɵpipe: i0.ɵɵPipeDefWithMeta<TestPipe<any>, "test-pipe">;');
|
2019-10-11 17:18:45 -04:00
|
|
|
expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<TestPipe<any>>;');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2019-03-19 16:22:03 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should include @Pipes in @NgModule scopes', () => {
|
|
|
|
env.write('test.ts', `
|
2018-06-26 13:44:22 -04:00
|
|
|
import {Component, NgModule, Pipe} from '@angular/core';
|
|
|
|
|
|
|
|
@Pipe({name: 'test'})
|
|
|
|
export class TestPipe {}
|
|
|
|
|
|
|
|
@Component({selector: 'test-cmp', template: '{{value | test}}'})
|
|
|
|
export class TestCmp {}
|
|
|
|
|
|
|
|
@NgModule({declarations: [TestPipe, TestCmp]})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-06-26 13:44:22 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('pipes: [TestPipe]');
|
2018-06-26 13:44:22 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
|
|
|
'i0.ɵɵNgModuleDefWithMeta<TestModule, [typeof TestPipe, typeof TestCmp], never, never>');
|
|
|
|
});
|
2018-07-09 14:36:30 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('empty and missing selectors', () => {
|
|
|
|
it('should use default selector for Components when no selector present', () => {
|
|
|
|
env.write('test.ts', `
|
2019-03-11 20:58:37 -04:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '...',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-03-11 20:58:37 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('selectors: [["ng-component"]]');
|
|
|
|
});
|
2019-03-11 20:58:37 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should use default selector for Components with empty string selector', () => {
|
|
|
|
env.write('test.ts', `
|
2019-03-11 20:58:37 -04:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: '',
|
|
|
|
template: '...',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-03-11 20:58:37 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('selectors: [["ng-component"]]');
|
|
|
|
});
|
2019-03-11 20:58:37 -04:00
|
|
|
|
2019-08-12 17:56:30 -04:00
|
|
|
it('should allow directives with no selector that are not in NgModules', () => {
|
|
|
|
env.write('main.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
2019-03-11 20:58:37 -04:00
|
|
|
|
2019-08-12 17:56:30 -04:00
|
|
|
@Directive({})
|
|
|
|
export class BaseDir {}
|
|
|
|
|
|
|
|
@Directive({})
|
|
|
|
export abstract class AbstractBaseDir {}
|
2019-03-11 20:58:37 -04:00
|
|
|
|
2019-08-12 17:56:30 -04:00
|
|
|
@Directive()
|
|
|
|
export abstract class EmptyDir {}
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
inputs: ['a', 'b']
|
|
|
|
})
|
|
|
|
export class TestDirWithInputs {}
|
|
|
|
`);
|
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(errors.length).toBe(0);
|
|
|
|
});
|
|
|
|
|
2019-10-23 06:20:07 -04:00
|
|
|
it('should be able to use abstract directive in other compilation units', () => {
|
|
|
|
env.write('tsconfig.json', JSON.stringify({
|
|
|
|
extends: './tsconfig-base.json',
|
|
|
|
angularCompilerOptions: {enableIvy: true},
|
|
|
|
compilerOptions: {rootDir: '.', outDir: '../node_modules/lib1_built'},
|
|
|
|
}));
|
|
|
|
env.write('index.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
2019-10-25 13:45:08 -04:00
|
|
|
|
2019-10-23 06:20:07 -04:00
|
|
|
@Directive()
|
|
|
|
export class BaseClass {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
expect(env.driveDiagnostics().length).toBe(0);
|
|
|
|
|
|
|
|
env.tsconfig();
|
|
|
|
env.write('index.ts', `
|
|
|
|
import {NgModule, Directive} from '@angular/core';
|
|
|
|
import {BaseClass} from 'lib1_built';
|
2019-10-25 13:45:08 -04:00
|
|
|
|
2019-10-23 06:20:07 -04:00
|
|
|
@Directive({selector: 'my-dir'})
|
|
|
|
export class MyDirective extends BaseClass {}
|
2019-10-25 13:45:08 -04:00
|
|
|
|
2019-10-23 06:20:07 -04:00
|
|
|
@NgModule({declarations: [MyDirective]})
|
|
|
|
export class AppModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
expect(env.driveDiagnostics().length).toBe(0);
|
|
|
|
});
|
|
|
|
|
2019-08-12 17:56:30 -04:00
|
|
|
it('should not allow directives with no selector that are in NgModules', () => {
|
|
|
|
env.write('main.ts', `
|
|
|
|
import {Directive, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({})
|
|
|
|
export class BaseDir {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [BaseDir],
|
|
|
|
})
|
|
|
|
export class MyModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(trim(errors[0].messageText as string))
|
2019-08-12 17:56:30 -04:00
|
|
|
.toContain('Directive BaseDir has no selector, please add it!');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2019-03-11 20:58:37 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should throw if Directive selector is an empty string', () => {
|
|
|
|
env.write('test.ts', `
|
2019-03-11 20:58:37 -04:00
|
|
|
import {Directive} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: ''
|
|
|
|
})
|
|
|
|
export class TestDir {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(trim(errors[0].messageText as string))
|
|
|
|
.toContain('Directive TestDir has no selector, please add it!');
|
|
|
|
});
|
2019-03-11 20:58:37 -04:00
|
|
|
});
|
2019-06-18 20:23:51 -04:00
|
|
|
|
|
|
|
it('should throw error if content queries share a property with inputs', () => {
|
|
|
|
env.tsconfig({});
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Component, ContentChild, Input} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: '<ng-content></ng-content>'
|
|
|
|
})
|
|
|
|
export class TestCmp {
|
2019-10-05 04:04:54 -04:00
|
|
|
@Input() @ContentChild('foo') foo: any;
|
2019-06-18 20:23:51 -04:00
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
const {code, messageText} = errors[0];
|
|
|
|
expect(code).toBe(ngErrorCode(ErrorCode.DECORATOR_COLLISION));
|
|
|
|
expect(trim(messageText as string))
|
|
|
|
.toContain('Cannot combine @Input decorators with query decorators');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should throw error if multiple query decorators are used on the same field', () => {
|
|
|
|
env.tsconfig({});
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Component, ContentChild} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: '...'
|
|
|
|
})
|
|
|
|
export class TestCmp {
|
|
|
|
@ContentChild('bar', {static: true})
|
2019-10-05 04:04:54 -04:00
|
|
|
@ContentChild('foo')
|
2019-06-18 20:23:51 -04:00
|
|
|
foo: any;
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
const {code, messageText} = errors[0];
|
|
|
|
expect(code).toBe(ngErrorCode(ErrorCode.DECORATOR_COLLISION));
|
|
|
|
expect(trim(messageText as string))
|
|
|
|
.toContain('Cannot have multiple query decorators on the same class member');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should throw error if query decorators are used on non property-type member', () => {
|
|
|
|
env.tsconfig({});
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Component, ContentChild} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: '...'
|
|
|
|
})
|
|
|
|
export class TestCmp {
|
2019-10-05 04:04:54 -04:00
|
|
|
@ContentChild('foo')
|
2019-06-18 20:23:51 -04:00
|
|
|
private someFn() {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
const {code, messageText} = errors[0];
|
|
|
|
expect(code).toBe(ngErrorCode(ErrorCode.DECORATOR_UNEXPECTED));
|
|
|
|
expect(trim(messageText as string))
|
|
|
|
.toContain('Query decorator must go on a property-type member');
|
|
|
|
});
|
2019-03-11 20:58:37 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('multiple decorators on classes', () => {
|
|
|
|
it('should compile @Injectable on Components, Directives, Pipes, and Modules', () => {
|
|
|
|
env.write('test.ts', `
|
feat(ivy): support @Injectable on already decorated classes (#28523)
Previously, ngtsc would throw an error if two decorators were matched on
the same class simultaneously. However, @Injectable is a special case, and
it appears frequently on component, directive, and pipe classes. For pipes
in particular, it's a common pattern to treat the pipe class also as an
injectable service.
ngtsc actually lacked the capability to compile multiple matching
decorators on a class, so this commit adds support for that. Decorator
handlers (and thus the decorators they match) are classified into three
categories: PRIMARY, SHARED, and WEAK.
PRIMARY handlers compile decorators that cannot coexist with other primary
decorators. The handlers for Component, Directive, Pipe, and NgModule are
marked as PRIMARY. A class may only have one decorator from this group.
SHARED handlers compile decorators that can coexist with others. Injectable
is the only decorator in this category, meaning it's valid to put an
@Injectable decorator on a previously decorated class.
WEAK handlers behave like SHARED, but are dropped if any non-WEAK handler
matches a class. The handler which compiles ngBaseDef is WEAK, since
ngBaseDef is only needed if a class doesn't otherwise have a decorator.
Tests are added to validate that @Injectable can coexist with the other
decorators and that an error is generated when mixing the primaries.
PR Close #28523
2019-02-01 15:23:21 -05:00
|
|
|
import {Component, Directive, Injectable, NgModule, Pipe} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({selector: 'test', template: 'test'})
|
|
|
|
@Injectable()
|
|
|
|
export class TestCmp {}
|
|
|
|
|
|
|
|
@Directive({selector: 'test'})
|
|
|
|
@Injectable()
|
|
|
|
export class TestDir {}
|
|
|
|
|
|
|
|
@Pipe({name: 'test'})
|
|
|
|
@Injectable()
|
|
|
|
export class TestPipe {}
|
|
|
|
|
|
|
|
@NgModule({declarations: [TestCmp, TestDir, TestPipe]})
|
|
|
|
@Injectable()
|
|
|
|
export class TestNgModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
|
|
|
|
|
|
|
// Validate that each class has the primary definition.
|
2019-10-10 17:57:15 -04:00
|
|
|
expect(jsContents).toContain('TestCmp.ɵcmp =');
|
2019-10-11 15:28:12 -04:00
|
|
|
expect(jsContents).toContain('TestDir.ɵdir =');
|
2019-10-11 22:19:59 -04:00
|
|
|
expect(jsContents).toContain('TestPipe.ɵpipe =');
|
2019-10-14 10:20:26 -04:00
|
|
|
expect(jsContents).toContain('TestNgModule.ɵmod =');
|
2019-06-06 15:22:32 -04:00
|
|
|
|
|
|
|
// Validate that each class also has an injectable definition.
|
2019-10-15 15:41:30 -04:00
|
|
|
expect(jsContents).toContain('TestCmp.ɵprov =');
|
|
|
|
expect(jsContents).toContain('TestDir.ɵprov =');
|
|
|
|
expect(jsContents).toContain('TestPipe.ɵprov =');
|
|
|
|
expect(jsContents).toContain('TestNgModule.ɵprov =');
|
2019-06-06 15:22:32 -04:00
|
|
|
|
|
|
|
// Validate that each class's .d.ts declaration has the primary definition.
|
|
|
|
expect(dtsContents).toContain('ComponentDefWithMeta<TestCmp');
|
|
|
|
expect(dtsContents).toContain('DirectiveDefWithMeta<TestDir');
|
|
|
|
expect(dtsContents).toContain('PipeDefWithMeta<TestPipe');
|
|
|
|
expect(dtsContents).toContain('ɵɵNgModuleDefWithMeta<TestNgModule');
|
|
|
|
|
|
|
|
// Validate that each class's .d.ts declaration also has an injectable definition.
|
|
|
|
expect(dtsContents).toContain('InjectableDef<TestCmp');
|
|
|
|
expect(dtsContents).toContain('InjectableDef<TestDir');
|
|
|
|
expect(dtsContents).toContain('InjectableDef<TestPipe');
|
|
|
|
expect(dtsContents).toContain('InjectableDef<TestNgModule');
|
|
|
|
});
|
feat(ivy): support @Injectable on already decorated classes (#28523)
Previously, ngtsc would throw an error if two decorators were matched on
the same class simultaneously. However, @Injectable is a special case, and
it appears frequently on component, directive, and pipe classes. For pipes
in particular, it's a common pattern to treat the pipe class also as an
injectable service.
ngtsc actually lacked the capability to compile multiple matching
decorators on a class, so this commit adds support for that. Decorator
handlers (and thus the decorators they match) are classified into three
categories: PRIMARY, SHARED, and WEAK.
PRIMARY handlers compile decorators that cannot coexist with other primary
decorators. The handlers for Component, Directive, Pipe, and NgModule are
marked as PRIMARY. A class may only have one decorator from this group.
SHARED handlers compile decorators that can coexist with others. Injectable
is the only decorator in this category, meaning it's valid to put an
@Injectable decorator on a previously decorated class.
WEAK handlers behave like SHARED, but are dropped if any non-WEAK handler
matches a class. The handler which compiles ngBaseDef is WEAK, since
ngBaseDef is only needed if a class doesn't otherwise have a decorator.
Tests are added to validate that @Injectable can coexist with the other
decorators and that an error is generated when mixing the primaries.
PR Close #28523
2019-02-01 15:23:21 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should not compile a component and a directive annotation on the same class', () => {
|
|
|
|
env.write('test.ts', `
|
feat(ivy): support @Injectable on already decorated classes (#28523)
Previously, ngtsc would throw an error if two decorators were matched on
the same class simultaneously. However, @Injectable is a special case, and
it appears frequently on component, directive, and pipe classes. For pipes
in particular, it's a common pattern to treat the pipe class also as an
injectable service.
ngtsc actually lacked the capability to compile multiple matching
decorators on a class, so this commit adds support for that. Decorator
handlers (and thus the decorators they match) are classified into three
categories: PRIMARY, SHARED, and WEAK.
PRIMARY handlers compile decorators that cannot coexist with other primary
decorators. The handlers for Component, Directive, Pipe, and NgModule are
marked as PRIMARY. A class may only have one decorator from this group.
SHARED handlers compile decorators that can coexist with others. Injectable
is the only decorator in this category, meaning it's valid to put an
@Injectable decorator on a previously decorated class.
WEAK handlers behave like SHARED, but are dropped if any non-WEAK handler
matches a class. The handler which compiles ngBaseDef is WEAK, since
ngBaseDef is only needed if a class doesn't otherwise have a decorator.
Tests are added to validate that @Injectable can coexist with the other
decorators and that an error is generated when mixing the primaries.
PR Close #28523
2019-02-01 15:23:21 -05:00
|
|
|
import {Component, Directive} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({selector: 'test', template: 'test'})
|
|
|
|
@Directive({selector: 'test'})
|
|
|
|
class ShouldNotCompile {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(errors.length).toBe(1);
|
|
|
|
expect(errors[0].messageText).toContain('Two incompatible decorators on class');
|
|
|
|
});
|
feat(ivy): support @Injectable on already decorated classes (#28523)
Previously, ngtsc would throw an error if two decorators were matched on
the same class simultaneously. However, @Injectable is a special case, and
it appears frequently on component, directive, and pipe classes. For pipes
in particular, it's a common pattern to treat the pipe class also as an
injectable service.
ngtsc actually lacked the capability to compile multiple matching
decorators on a class, so this commit adds support for that. Decorator
handlers (and thus the decorators they match) are classified into three
categories: PRIMARY, SHARED, and WEAK.
PRIMARY handlers compile decorators that cannot coexist with other primary
decorators. The handlers for Component, Directive, Pipe, and NgModule are
marked as PRIMARY. A class may only have one decorator from this group.
SHARED handlers compile decorators that can coexist with others. Injectable
is the only decorator in this category, meaning it's valid to put an
@Injectable decorator on a previously decorated class.
WEAK handlers behave like SHARED, but are dropped if any non-WEAK handler
matches a class. The handler which compiles ngBaseDef is WEAK, since
ngBaseDef is only needed if a class doesn't otherwise have a decorator.
Tests are added to validate that @Injectable can coexist with the other
decorators and that an error is generated when mixing the primaries.
PR Close #28523
2019-02-01 15:23:21 -05:00
|
|
|
|
|
|
|
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should leave decorators present on jit: true directives', () => {
|
|
|
|
env.write('test.ts', `
|
feat(ivy): support @Injectable on already decorated classes (#28523)
Previously, ngtsc would throw an error if two decorators were matched on
the same class simultaneously. However, @Injectable is a special case, and
it appears frequently on component, directive, and pipe classes. For pipes
in particular, it's a common pattern to treat the pipe class also as an
injectable service.
ngtsc actually lacked the capability to compile multiple matching
decorators on a class, so this commit adds support for that. Decorator
handlers (and thus the decorators they match) are classified into three
categories: PRIMARY, SHARED, and WEAK.
PRIMARY handlers compile decorators that cannot coexist with other primary
decorators. The handlers for Component, Directive, Pipe, and NgModule are
marked as PRIMARY. A class may only have one decorator from this group.
SHARED handlers compile decorators that can coexist with others. Injectable
is the only decorator in this category, meaning it's valid to put an
@Injectable decorator on a previously decorated class.
WEAK handlers behave like SHARED, but are dropped if any non-WEAK handler
matches a class. The handler which compiles ngBaseDef is WEAK, since
ngBaseDef is only needed if a class doesn't otherwise have a decorator.
Tests are added to validate that @Injectable can coexist with the other
decorators and that an error is generated when mixing the primaries.
PR Close #28523
2019-02-01 15:23:21 -05:00
|
|
|
import {Directive, Inject} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: 'test',
|
|
|
|
jit: true,
|
|
|
|
})
|
|
|
|
export class Test {
|
|
|
|
constructor(@Inject('foo') foo: string) {}
|
|
|
|
}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('Directive({');
|
|
|
|
expect(jsContents).toContain('__param(0, Inject');
|
|
|
|
});
|
feat(ivy): support @Injectable on already decorated classes (#28523)
Previously, ngtsc would throw an error if two decorators were matched on
the same class simultaneously. However, @Injectable is a special case, and
it appears frequently on component, directive, and pipe classes. For pipes
in particular, it's a common pattern to treat the pipe class also as an
injectable service.
ngtsc actually lacked the capability to compile multiple matching
decorators on a class, so this commit adds support for that. Decorator
handlers (and thus the decorators they match) are classified into three
categories: PRIMARY, SHARED, and WEAK.
PRIMARY handlers compile decorators that cannot coexist with other primary
decorators. The handlers for Component, Directive, Pipe, and NgModule are
marked as PRIMARY. A class may only have one decorator from this group.
SHARED handlers compile decorators that can coexist with others. Injectable
is the only decorator in this category, meaning it's valid to put an
@Injectable decorator on a previously decorated class.
WEAK handlers behave like SHARED, but are dropped if any non-WEAK handler
matches a class. The handler which compiles ngBaseDef is WEAK, since
ngBaseDef is only needed if a class doesn't otherwise have a decorator.
Tests are added to validate that @Injectable can coexist with the other
decorators and that an error is generated when mixing the primaries.
PR Close #28523
2019-02-01 15:23:21 -05:00
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('compiling invalid @Injectables', () => {
|
|
|
|
describe('with strictInjectionParameters = true', () => {
|
|
|
|
it('should give a compile-time error if an invalid @Injectable is used with no arguments',
|
|
|
|
() => {
|
|
|
|
env.tsconfig({strictInjectionParameters: true});
|
|
|
|
env.write('test.ts', `
|
feat(ivy): compile @Injectable on classes not meant for DI (#28523)
In the past, @Injectable had no side effects and existing Angular code is
therefore littered with @Injectable usage on classes which are not intended
to be injected.
A common example is:
@Injectable()
class Foo {
constructor(private notInjectable: string) {}
}
and somewhere else:
providers: [{provide: Foo, useFactory: ...})
Here, there is no need for Foo to be injectable - indeed, it's impossible
for the DI system to create an instance of it, as it has a non-injectable
constructor. The provider configures a factory for the DI system to be
able to create instances of Foo.
Adding @Injectable in Ivy signifies that the class's own constructor, and
not a provider, determines how the class will be created.
This commit adds logic to compile classes which are marked with @Injectable
but are otherwise not injectable, and create an ngInjectableDef field with
a factory function that throws an error. This way, existing code in the wild
continues to compile, but if someone attempts to use the injectable it will
fail with a useful error message.
In the case where strictInjectionParameters is set to true, a compile-time
error is thrown instead of the runtime error, as ngtsc has enough
information to determine when injection couldn't possibly be valid.
PR Close #28523
2019-01-31 17:23:54 -05:00
|
|
|
import {Injectable} from '@angular/core';
|
2019-03-13 14:30:38 -04:00
|
|
|
|
feat(ivy): compile @Injectable on classes not meant for DI (#28523)
In the past, @Injectable had no side effects and existing Angular code is
therefore littered with @Injectable usage on classes which are not intended
to be injected.
A common example is:
@Injectable()
class Foo {
constructor(private notInjectable: string) {}
}
and somewhere else:
providers: [{provide: Foo, useFactory: ...})
Here, there is no need for Foo to be injectable - indeed, it's impossible
for the DI system to create an instance of it, as it has a non-injectable
constructor. The provider configures a factory for the DI system to be
able to create instances of Foo.
Adding @Injectable in Ivy signifies that the class's own constructor, and
not a provider, determines how the class will be created.
This commit adds logic to compile classes which are marked with @Injectable
but are otherwise not injectable, and create an ngInjectableDef field with
a factory function that throws an error. This way, existing code in the wild
continues to compile, but if someone attempts to use the injectable it will
fail with a useful error message.
In the case where strictInjectionParameters is set to true, a compile-time
error is thrown instead of the runtime error, as ngtsc has enough
information to determine when injection couldn't possibly be valid.
PR Close #28523
2019-01-31 17:23:54 -05:00
|
|
|
@Injectable()
|
|
|
|
export class Test {
|
|
|
|
constructor(private notInjectable: string) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(errors.length).toBe(1);
|
|
|
|
expect(errors[0].messageText).toContain('No suitable injection token for parameter');
|
|
|
|
});
|
feat(ivy): compile @Injectable on classes not meant for DI (#28523)
In the past, @Injectable had no side effects and existing Angular code is
therefore littered with @Injectable usage on classes which are not intended
to be injected.
A common example is:
@Injectable()
class Foo {
constructor(private notInjectable: string) {}
}
and somewhere else:
providers: [{provide: Foo, useFactory: ...})
Here, there is no need for Foo to be injectable - indeed, it's impossible
for the DI system to create an instance of it, as it has a non-injectable
constructor. The provider configures a factory for the DI system to be
able to create instances of Foo.
Adding @Injectable in Ivy signifies that the class's own constructor, and
not a provider, determines how the class will be created.
This commit adds logic to compile classes which are marked with @Injectable
but are otherwise not injectable, and create an ngInjectableDef field with
a factory function that throws an error. This way, existing code in the wild
continues to compile, but if someone attempts to use the injectable it will
fail with a useful error message.
In the case where strictInjectionParameters is set to true, a compile-time
error is thrown instead of the runtime error, as ngtsc has enough
information to determine when injection couldn't possibly be valid.
PR Close #28523
2019-01-31 17:23:54 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should give a compile-time error if an invalid @Injectable is used with an argument',
|
|
|
|
() => {
|
|
|
|
env.tsconfig({strictInjectionParameters: true});
|
|
|
|
env.write('test.ts', `
|
feat(ivy): compile @Injectable on classes not meant for DI (#28523)
In the past, @Injectable had no side effects and existing Angular code is
therefore littered with @Injectable usage on classes which are not intended
to be injected.
A common example is:
@Injectable()
class Foo {
constructor(private notInjectable: string) {}
}
and somewhere else:
providers: [{provide: Foo, useFactory: ...})
Here, there is no need for Foo to be injectable - indeed, it's impossible
for the DI system to create an instance of it, as it has a non-injectable
constructor. The provider configures a factory for the DI system to be
able to create instances of Foo.
Adding @Injectable in Ivy signifies that the class's own constructor, and
not a provider, determines how the class will be created.
This commit adds logic to compile classes which are marked with @Injectable
but are otherwise not injectable, and create an ngInjectableDef field with
a factory function that throws an error. This way, existing code in the wild
continues to compile, but if someone attempts to use the injectable it will
fail with a useful error message.
In the case where strictInjectionParameters is set to true, a compile-time
error is thrown instead of the runtime error, as ngtsc has enough
information to determine when injection couldn't possibly be valid.
PR Close #28523
2019-01-31 17:23:54 -05:00
|
|
|
import {Injectable} from '@angular/core';
|
2019-03-13 14:30:38 -04:00
|
|
|
|
2019-10-03 15:54:49 -04:00
|
|
|
@Injectable({providedIn: 'root'})
|
feat(ivy): compile @Injectable on classes not meant for DI (#28523)
In the past, @Injectable had no side effects and existing Angular code is
therefore littered with @Injectable usage on classes which are not intended
to be injected.
A common example is:
@Injectable()
class Foo {
constructor(private notInjectable: string) {}
}
and somewhere else:
providers: [{provide: Foo, useFactory: ...})
Here, there is no need for Foo to be injectable - indeed, it's impossible
for the DI system to create an instance of it, as it has a non-injectable
constructor. The provider configures a factory for the DI system to be
able to create instances of Foo.
Adding @Injectable in Ivy signifies that the class's own constructor, and
not a provider, determines how the class will be created.
This commit adds logic to compile classes which are marked with @Injectable
but are otherwise not injectable, and create an ngInjectableDef field with
a factory function that throws an error. This way, existing code in the wild
continues to compile, but if someone attempts to use the injectable it will
fail with a useful error message.
In the case where strictInjectionParameters is set to true, a compile-time
error is thrown instead of the runtime error, as ngtsc has enough
information to determine when injection couldn't possibly be valid.
PR Close #28523
2019-01-31 17:23:54 -05:00
|
|
|
export class Test {
|
|
|
|
constructor(private notInjectable: string) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(errors.length).toBe(1);
|
|
|
|
expect(errors[0].messageText).toContain('No suitable injection token for parameter');
|
|
|
|
});
|
feat(ivy): compile @Injectable on classes not meant for DI (#28523)
In the past, @Injectable had no side effects and existing Angular code is
therefore littered with @Injectable usage on classes which are not intended
to be injected.
A common example is:
@Injectable()
class Foo {
constructor(private notInjectable: string) {}
}
and somewhere else:
providers: [{provide: Foo, useFactory: ...})
Here, there is no need for Foo to be injectable - indeed, it's impossible
for the DI system to create an instance of it, as it has a non-injectable
constructor. The provider configures a factory for the DI system to be
able to create instances of Foo.
Adding @Injectable in Ivy signifies that the class's own constructor, and
not a provider, determines how the class will be created.
This commit adds logic to compile classes which are marked with @Injectable
but are otherwise not injectable, and create an ngInjectableDef field with
a factory function that throws an error. This way, existing code in the wild
continues to compile, but if someone attempts to use the injectable it will
fail with a useful error message.
In the case where strictInjectionParameters is set to true, a compile-time
error is thrown instead of the runtime error, as ngtsc has enough
information to determine when injection couldn't possibly be valid.
PR Close #28523
2019-01-31 17:23:54 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should not give a compile-time error if an invalid @Injectable is used with useValue',
|
|
|
|
() => {
|
|
|
|
env.tsconfig({strictInjectionParameters: true});
|
|
|
|
env.write('test.ts', `
|
feat(ivy): compile @Injectable on classes not meant for DI (#28523)
In the past, @Injectable had no side effects and existing Angular code is
therefore littered with @Injectable usage on classes which are not intended
to be injected.
A common example is:
@Injectable()
class Foo {
constructor(private notInjectable: string) {}
}
and somewhere else:
providers: [{provide: Foo, useFactory: ...})
Here, there is no need for Foo to be injectable - indeed, it's impossible
for the DI system to create an instance of it, as it has a non-injectable
constructor. The provider configures a factory for the DI system to be
able to create instances of Foo.
Adding @Injectable in Ivy signifies that the class's own constructor, and
not a provider, determines how the class will be created.
This commit adds logic to compile classes which are marked with @Injectable
but are otherwise not injectable, and create an ngInjectableDef field with
a factory function that throws an error. This way, existing code in the wild
continues to compile, but if someone attempts to use the injectable it will
fail with a useful error message.
In the case where strictInjectionParameters is set to true, a compile-time
error is thrown instead of the runtime error, as ngtsc has enough
information to determine when injection couldn't possibly be valid.
PR Close #28523
2019-01-31 17:23:54 -05:00
|
|
|
import {Injectable} from '@angular/core';
|
2019-03-13 14:30:38 -04:00
|
|
|
|
feat(ivy): compile @Injectable on classes not meant for DI (#28523)
In the past, @Injectable had no side effects and existing Angular code is
therefore littered with @Injectable usage on classes which are not intended
to be injected.
A common example is:
@Injectable()
class Foo {
constructor(private notInjectable: string) {}
}
and somewhere else:
providers: [{provide: Foo, useFactory: ...})
Here, there is no need for Foo to be injectable - indeed, it's impossible
for the DI system to create an instance of it, as it has a non-injectable
constructor. The provider configures a factory for the DI system to be
able to create instances of Foo.
Adding @Injectable in Ivy signifies that the class's own constructor, and
not a provider, determines how the class will be created.
This commit adds logic to compile classes which are marked with @Injectable
but are otherwise not injectable, and create an ngInjectableDef field with
a factory function that throws an error. This way, existing code in the wild
continues to compile, but if someone attempts to use the injectable it will
fail with a useful error message.
In the case where strictInjectionParameters is set to true, a compile-time
error is thrown instead of the runtime error, as ngtsc has enough
information to determine when injection couldn't possibly be valid.
PR Close #28523
2019-01-31 17:23:54 -05:00
|
|
|
@Injectable({
|
|
|
|
providedIn: 'root',
|
|
|
|
useValue: '42',
|
|
|
|
})
|
|
|
|
export class Test {
|
|
|
|
constructor(private notInjectable: string) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
2019-10-03 15:54:49 -04:00
|
|
|
expect(jsContents)
|
|
|
|
.toMatch(/function Test_Factory\(t\) { i0\.ɵɵinvalidFactory\(\)/ms);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not give a compile-time error if an invalid @Injectable is used with useFactory',
|
|
|
|
() => {
|
|
|
|
env.tsconfig({strictInjectionParameters: true});
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Injectable} from '@angular/core';
|
|
|
|
|
|
|
|
@Injectable({
|
|
|
|
providedIn: 'root',
|
|
|
|
useFactory: () => '42',
|
|
|
|
})
|
|
|
|
export class Test {
|
|
|
|
constructor(private notInjectable: string) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents)
|
|
|
|
.toMatch(/function Test_Factory\(t\) { i0\.ɵɵinvalidFactory\(\)/ms);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not give a compile-time error if an invalid @Injectable is used with useExisting',
|
|
|
|
() => {
|
|
|
|
env.tsconfig({strictInjectionParameters: true});
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Injectable} from '@angular/core';
|
|
|
|
|
|
|
|
export class MyService {}
|
|
|
|
|
|
|
|
@Injectable({
|
|
|
|
providedIn: 'root',
|
|
|
|
useExisting: MyService,
|
|
|
|
})
|
|
|
|
export class Test {
|
|
|
|
constructor(private notInjectable: string) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents)
|
|
|
|
.toMatch(/function Test_Factory\(t\) { i0\.ɵɵinvalidFactory\(\)/ms);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not give a compile-time error if an invalid @Injectable is used with useClass',
|
|
|
|
() => {
|
|
|
|
env.tsconfig({strictInjectionParameters: true});
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Injectable} from '@angular/core';
|
|
|
|
|
|
|
|
export class MyService {}
|
|
|
|
|
|
|
|
@Injectable({
|
|
|
|
providedIn: 'root',
|
|
|
|
useClass: MyService,
|
|
|
|
})
|
|
|
|
export class Test {
|
|
|
|
constructor(private notInjectable: string) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents)
|
|
|
|
.toMatch(/function Test_Factory\(t\) { i0\.ɵɵinvalidFactory\(\)/ms);
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
|
|
|
});
|
feat(ivy): compile @Injectable on classes not meant for DI (#28523)
In the past, @Injectable had no side effects and existing Angular code is
therefore littered with @Injectable usage on classes which are not intended
to be injected.
A common example is:
@Injectable()
class Foo {
constructor(private notInjectable: string) {}
}
and somewhere else:
providers: [{provide: Foo, useFactory: ...})
Here, there is no need for Foo to be injectable - indeed, it's impossible
for the DI system to create an instance of it, as it has a non-injectable
constructor. The provider configures a factory for the DI system to be
able to create instances of Foo.
Adding @Injectable in Ivy signifies that the class's own constructor, and
not a provider, determines how the class will be created.
This commit adds logic to compile classes which are marked with @Injectable
but are otherwise not injectable, and create an ngInjectableDef field with
a factory function that throws an error. This way, existing code in the wild
continues to compile, but if someone attempts to use the injectable it will
fail with a useful error message.
In the case where strictInjectionParameters is set to true, a compile-time
error is thrown instead of the runtime error, as ngtsc has enough
information to determine when injection couldn't possibly be valid.
PR Close #28523
2019-01-31 17:23:54 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('with strictInjectionParameters = false', () => {
|
|
|
|
it('should compile an @Injectable on a class with a non-injectable constructor', () => {
|
|
|
|
env.tsconfig({strictInjectionParameters: false});
|
|
|
|
env.write('test.ts', `
|
2019-09-01 06:26:04 -04:00
|
|
|
import {Injectable} from '@angular/core';
|
feat(ivy): compile @Injectable on classes not meant for DI (#28523)
In the past, @Injectable had no side effects and existing Angular code is
therefore littered with @Injectable usage on classes which are not intended
to be injected.
A common example is:
@Injectable()
class Foo {
constructor(private notInjectable: string) {}
}
and somewhere else:
providers: [{provide: Foo, useFactory: ...})
Here, there is no need for Foo to be injectable - indeed, it's impossible
for the DI system to create an instance of it, as it has a non-injectable
constructor. The provider configures a factory for the DI system to be
able to create instances of Foo.
Adding @Injectable in Ivy signifies that the class's own constructor, and
not a provider, determines how the class will be created.
This commit adds logic to compile classes which are marked with @Injectable
but are otherwise not injectable, and create an ngInjectableDef field with
a factory function that throws an error. This way, existing code in the wild
continues to compile, but if someone attempts to use the injectable it will
fail with a useful error message.
In the case where strictInjectionParameters is set to true, a compile-time
error is thrown instead of the runtime error, as ngtsc has enough
information to determine when injection couldn't possibly be valid.
PR Close #28523
2019-01-31 17:23:54 -05:00
|
|
|
|
2019-09-01 06:26:04 -04:00
|
|
|
@Injectable()
|
|
|
|
export class Test {
|
|
|
|
constructor(private notInjectable: string) {}
|
|
|
|
}
|
|
|
|
`);
|
feat(ivy): compile @Injectable on classes not meant for DI (#28523)
In the past, @Injectable had no side effects and existing Angular code is
therefore littered with @Injectable usage on classes which are not intended
to be injected.
A common example is:
@Injectable()
class Foo {
constructor(private notInjectable: string) {}
}
and somewhere else:
providers: [{provide: Foo, useFactory: ...})
Here, there is no need for Foo to be injectable - indeed, it's impossible
for the DI system to create an instance of it, as it has a non-injectable
constructor. The provider configures a factory for the DI system to be
able to create instances of Foo.
Adding @Injectable in Ivy signifies that the class's own constructor, and
not a provider, determines how the class will be created.
This commit adds logic to compile classes which are marked with @Injectable
but are otherwise not injectable, and create an ngInjectableDef field with
a factory function that throws an error. This way, existing code in the wild
continues to compile, but if someone attempts to use the injectable it will
fail with a useful error message.
In the case where strictInjectionParameters is set to true, a compile-time
error is thrown instead of the runtime error, as ngtsc has enough
information to determine when injection couldn't possibly be valid.
PR Close #28523
2019-01-31 17:23:54 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
2019-10-03 15:54:49 -04:00
|
|
|
expect(jsContents)
|
|
|
|
.toContain('Test.ɵfac = function Test_Factory(t) { i0.ɵɵinvalidFactory()');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
feat(ivy): compile @Injectable on classes not meant for DI (#28523)
In the past, @Injectable had no side effects and existing Angular code is
therefore littered with @Injectable usage on classes which are not intended
to be injected.
A common example is:
@Injectable()
class Foo {
constructor(private notInjectable: string) {}
}
and somewhere else:
providers: [{provide: Foo, useFactory: ...})
Here, there is no need for Foo to be injectable - indeed, it's impossible
for the DI system to create an instance of it, as it has a non-injectable
constructor. The provider configures a factory for the DI system to be
able to create instances of Foo.
Adding @Injectable in Ivy signifies that the class's own constructor, and
not a provider, determines how the class will be created.
This commit adds logic to compile classes which are marked with @Injectable
but are otherwise not injectable, and create an ngInjectableDef field with
a factory function that throws an error. This way, existing code in the wild
continues to compile, but if someone attempts to use the injectable it will
fail with a useful error message.
In the case where strictInjectionParameters is set to true, a compile-time
error is thrown instead of the runtime error, as ngtsc has enough
information to determine when injection couldn't possibly be valid.
PR Close #28523
2019-01-31 17:23:54 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile an @Injectable provided in the root on a class with a non-injectable constructor',
|
|
|
|
() => {
|
|
|
|
env.tsconfig({strictInjectionParameters: false});
|
|
|
|
env.write('test.ts', `
|
2019-09-01 06:26:04 -04:00
|
|
|
import {Injectable} from '@angular/core';
|
|
|
|
@Injectable({providedIn: 'root'})
|
|
|
|
export class Test {
|
|
|
|
constructor(private notInjectable: string) {}
|
|
|
|
}
|
|
|
|
`);
|
feat(ivy): compile @Injectable on classes not meant for DI (#28523)
In the past, @Injectable had no side effects and existing Angular code is
therefore littered with @Injectable usage on classes which are not intended
to be injected.
A common example is:
@Injectable()
class Foo {
constructor(private notInjectable: string) {}
}
and somewhere else:
providers: [{provide: Foo, useFactory: ...})
Here, there is no need for Foo to be injectable - indeed, it's impossible
for the DI system to create an instance of it, as it has a non-injectable
constructor. The provider configures a factory for the DI system to be
able to create instances of Foo.
Adding @Injectable in Ivy signifies that the class's own constructor, and
not a provider, determines how the class will be created.
This commit adds logic to compile classes which are marked with @Injectable
but are otherwise not injectable, and create an ngInjectableDef field with
a factory function that throws an error. This way, existing code in the wild
continues to compile, but if someone attempts to use the injectable it will
fail with a useful error message.
In the case where strictInjectionParameters is set to true, a compile-time
error is thrown instead of the runtime error, as ngtsc has enough
information to determine when injection couldn't possibly be valid.
PR Close #28523
2019-01-31 17:23:54 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
2019-09-01 06:26:04 -04:00
|
|
|
expect(jsContents)
|
2019-10-03 15:54:49 -04:00
|
|
|
.toContain('Test.ɵfac = function Test_Factory(t) { i0.ɵɵinvalidFactory()');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
feat(ivy): compile @Injectable on classes not meant for DI (#28523)
In the past, @Injectable had no side effects and existing Angular code is
therefore littered with @Injectable usage on classes which are not intended
to be injected.
A common example is:
@Injectable()
class Foo {
constructor(private notInjectable: string) {}
}
and somewhere else:
providers: [{provide: Foo, useFactory: ...})
Here, there is no need for Foo to be injectable - indeed, it's impossible
for the DI system to create an instance of it, as it has a non-injectable
constructor. The provider configures a factory for the DI system to be
able to create instances of Foo.
Adding @Injectable in Ivy signifies that the class's own constructor, and
not a provider, determines how the class will be created.
This commit adds logic to compile classes which are marked with @Injectable
but are otherwise not injectable, and create an ngInjectableDef field with
a factory function that throws an error. This way, existing code in the wild
continues to compile, but if someone attempts to use the injectable it will
fail with a useful error message.
In the case where strictInjectionParameters is set to true, a compile-time
error is thrown instead of the runtime error, as ngtsc has enough
information to determine when injection couldn't possibly be valid.
PR Close #28523
2019-01-31 17:23:54 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
feat(ivy): compile @Injectable on classes not meant for DI (#28523)
In the past, @Injectable had no side effects and existing Angular code is
therefore littered with @Injectable usage on classes which are not intended
to be injected.
A common example is:
@Injectable()
class Foo {
constructor(private notInjectable: string) {}
}
and somewhere else:
providers: [{provide: Foo, useFactory: ...})
Here, there is no need for Foo to be injectable - indeed, it's impossible
for the DI system to create an instance of it, as it has a non-injectable
constructor. The provider configures a factory for the DI system to be
able to create instances of Foo.
Adding @Injectable in Ivy signifies that the class's own constructor, and
not a provider, determines how the class will be created.
This commit adds logic to compile classes which are marked with @Injectable
but are otherwise not injectable, and create an ngInjectableDef field with
a factory function that throws an error. This way, existing code in the wild
continues to compile, but if someone attempts to use the injectable it will
fail with a useful error message.
In the case where strictInjectionParameters is set to true, a compile-time
error is thrown instead of the runtime error, as ngtsc has enough
information to determine when injection couldn't possibly be valid.
PR Close #28523
2019-01-31 17:23:54 -05:00
|
|
|
});
|
|
|
|
|
2019-10-03 15:54:49 -04:00
|
|
|
describe('compiling invalid @Directives', () => {
|
|
|
|
describe('directives with a selector', () => {
|
|
|
|
it('should give a compile-time error if an invalid constructor is used', () => {
|
|
|
|
env.tsconfig({strictInjectionParameters: true});
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({selector: 'app-test'})
|
|
|
|
export class Test {
|
|
|
|
constructor(private notInjectable: string) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(errors.length).toBe(1);
|
|
|
|
expect(errors[0].messageText).toContain('No suitable injection token for parameter');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('abstract directives', () => {
|
|
|
|
it('should generate a factory function that throws', () => {
|
|
|
|
env.tsconfig({strictInjectionParameters: false});
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive()
|
|
|
|
export class Test {
|
|
|
|
constructor(private notInjectable: string) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain('Test.ɵfac = function Test_Factory(t) { i0.ɵɵinvalidFactory()');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should generate a factory function that throws, even under strictInjectionParameters',
|
|
|
|
() => {
|
|
|
|
env.tsconfig({strictInjectionParameters: true});
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive()
|
|
|
|
export class Test {
|
|
|
|
constructor(private notInjectable: string) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain('Test.ɵfac = function Test_Factory(t) { i0.ɵɵinvalidFactory()');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('templateUrl and styleUrls processing', () => {
|
|
|
|
const testsForResource = (resource: string) => [
|
|
|
|
// [component location, resource location, resource reference]
|
|
|
|
|
|
|
|
// component and resource are in the same folder
|
|
|
|
[`a/app.ts`, `a/${resource}`, `./${resource}`], //
|
|
|
|
[`a/app.ts`, `a/${resource}`, resource], //
|
|
|
|
[`a/app.ts`, `a/${resource}`, `/a/${resource}`],
|
|
|
|
|
|
|
|
// resource is one level up
|
|
|
|
[`a/app.ts`, resource, `../${resource}`], //
|
|
|
|
[`a/app.ts`, resource, `/${resource}`],
|
|
|
|
|
|
|
|
// component and resource are in different folders
|
|
|
|
[`a/app.ts`, `b/${resource}`, `../b/${resource}`], //
|
|
|
|
[`a/app.ts`, `b/${resource}`, `/b/${resource}`],
|
|
|
|
|
|
|
|
// resource is in subfolder of component directory
|
|
|
|
[`a/app.ts`, `a/b/c/${resource}`, `./b/c/${resource}`], //
|
|
|
|
[`a/app.ts`, `a/b/c/${resource}`, `b/c/${resource}`], //
|
|
|
|
[`a/app.ts`, `a/b/c/${resource}`, `/a/b/c/${resource}`],
|
|
|
|
];
|
|
|
|
|
|
|
|
testsForResource('style.css').forEach((test) => {
|
|
|
|
const [compLoc, styleLoc, styleRef] = test;
|
|
|
|
it(`should handle ${styleRef}`, () => {
|
|
|
|
env.write(styleLoc, ':host { background-color: blue; }');
|
|
|
|
env.write(compLoc, `
|
2019-02-17 19:25:45 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
styleUrls: ['${styleRef}'],
|
|
|
|
template: '...',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-02-17 19:25:45 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents(compLoc.replace('.ts', '.js'));
|
|
|
|
expect(jsContents).toContain('background-color: blue');
|
|
|
|
});
|
2019-02-17 19:25:45 -05:00
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
testsForResource('template.html').forEach((test) => {
|
|
|
|
const [compLoc, templateLoc, templateRef] = test;
|
|
|
|
it(`should handle ${templateRef}`, () => {
|
|
|
|
env.write(templateLoc, 'Template Content');
|
|
|
|
env.write(compLoc, `
|
2019-02-17 19:25:45 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
templateUrl: '${templateRef}'
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-02-17 19:25:45 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents(compLoc.replace('.ts', '.js'));
|
|
|
|
expect(jsContents).toContain('Template Content');
|
|
|
|
});
|
2019-02-17 19:25:45 -05:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('former View Engine AST transform bugs', () => {
|
|
|
|
it('should compile array literals behind conditionals', () => {
|
|
|
|
env.write('test.ts', `
|
2019-01-31 17:19:29 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '{{value ? "yes" : [no]}}',
|
|
|
|
})
|
|
|
|
class TestCmp {
|
|
|
|
value = true;
|
|
|
|
no = 'no';
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
expect(env.getContents('test.js')).toContain('i0.ɵɵpureFunction1');
|
|
|
|
});
|
2019-01-31 17:19:29 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile array literals inside function arguments', () => {
|
|
|
|
env.write('test.ts', `
|
2019-01-31 17:19:29 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '{{fn([test])}}',
|
|
|
|
})
|
|
|
|
class TestCmp {
|
|
|
|
fn(arg: any): string {
|
|
|
|
return 'test';
|
|
|
|
}
|
|
|
|
|
|
|
|
test = 'test';
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
expect(env.getContents('test.js')).toContain('i0.ɵɵpureFunction1');
|
|
|
|
});
|
2019-01-31 17:19:29 -05:00
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('unwrapping ModuleWithProviders functions', () => {
|
|
|
|
it('should extract the generic type and include it in the module\'s declaration', () => {
|
|
|
|
env.write(`test.ts`, `
|
2018-07-09 14:36:30 -04:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from 'router';
|
|
|
|
|
|
|
|
@NgModule({imports: [RouterModule.forRoot()]})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('node_modules/router/index.d.ts', `
|
2019-05-17 21:49:21 -04:00
|
|
|
import {ModuleWithProviders, ɵɵNgModuleDefWithMeta} from '@angular/core';
|
2018-07-09 14:36:30 -04:00
|
|
|
|
|
|
|
declare class RouterModule {
|
|
|
|
static forRoot(): ModuleWithProviders<RouterModule>;
|
2019-10-14 10:20:26 -04:00
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<RouterModule, never, never, never>;
|
2018-07-09 14:36:30 -04:00
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-07-10 12:59:29 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('imports: [[RouterModule.forRoot()]]');
|
2018-07-10 12:59:29 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
|
|
|
expect(dtsContents).toContain(`import * as i1 from "router";`);
|
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
|
|
|
'i0.ɵɵNgModuleDefWithMeta<TestModule, never, [typeof i1.RouterModule], never>');
|
|
|
|
});
|
2018-12-09 09:20:31 -05:00
|
|
|
|
2019-10-15 16:29:42 -04:00
|
|
|
it('should throw if ModuleWithProviders is missing its generic type argument', () => {
|
|
|
|
env.write(`test.ts`, `
|
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from 'router';
|
|
|
|
|
|
|
|
@NgModule({imports: [RouterModule.forRoot()]})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.write('node_modules/router/index.d.ts', `
|
|
|
|
import {ModuleWithProviders, ɵɵNgModuleDefWithMeta} from '@angular/core';
|
|
|
|
|
|
|
|
declare class RouterModule {
|
|
|
|
static forRoot(): ModuleWithProviders;
|
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<RouterModule, never, never, never>;
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(trim(errors[0].messageText as string))
|
|
|
|
.toContain(
|
|
|
|
`RouterModule.forRoot returns a ModuleWithProviders type without a generic type argument. ` +
|
|
|
|
`Please add a generic type argument to the ModuleWithProviders type. If this ` +
|
|
|
|
`occurrence is in library code you don't control, please contact the library authors.`);
|
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should extract the generic type if it is provided as qualified type name', () => {
|
|
|
|
env.write(`test.ts`, `
|
2018-12-09 09:20:31 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from 'router';
|
|
|
|
|
|
|
|
@NgModule({imports: [RouterModule.forRoot()]})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('node_modules/router/index.d.ts', `
|
2018-12-09 09:20:31 -05:00
|
|
|
import {ModuleWithProviders} from '@angular/core';
|
|
|
|
import * as internal from './internal';
|
2018-12-18 14:09:21 -05:00
|
|
|
export {InternalRouterModule} from './internal';
|
2018-12-09 09:20:31 -05:00
|
|
|
|
2018-12-18 14:09:21 -05:00
|
|
|
declare export class RouterModule {
|
2018-12-09 09:20:31 -05:00
|
|
|
static forRoot(): ModuleWithProviders<internal.InternalRouterModule>;
|
|
|
|
}
|
2018-12-18 14:09:21 -05:00
|
|
|
|
2018-12-09 09:20:31 -05:00
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('node_modules/router/internal.d.ts', `
|
2019-05-17 21:49:21 -04:00
|
|
|
import {ɵɵNgModuleDefWithMeta} from '@angular/core';
|
2019-02-19 20:36:26 -05:00
|
|
|
export declare class InternalRouterModule {
|
2019-10-14 10:20:26 -04:00
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<InternalRouterModule, never, never, never>;
|
2019-02-19 20:36:26 -05:00
|
|
|
}
|
2018-12-09 09:20:31 -05:00
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-12-09 09:20:31 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('imports: [[RouterModule.forRoot()]]');
|
2018-12-09 09:20:31 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
|
|
|
expect(dtsContents).toContain(`import * as i1 from "router";`);
|
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
|
|
|
'i0.ɵɵNgModuleDefWithMeta<TestModule, never, [typeof i1.InternalRouterModule], never>');
|
|
|
|
});
|
fix(ivy): don't track identifiers of ffr-resolved references (#29387)
This fix is for a bug in the ngtsc PartialEvaluator, which statically
evaluates expressions.
Sometimes, evaluating a reference requires resolving a function which is
declared in another module, and thus no function body is available. To
support this case, the PartialEvaluator has the concept of a foreign
function resolver.
This allows the interpretation of expressions like:
const router = RouterModule.forRoot([]);
even though the definition of the 'forRoot' function has no body. In
ngtsc today, this will be resolved to a Reference to RouterModule itself,
via the ModuleWithProviders foreign function resolver.
However, the PartialEvaluator also associates any Identifiers in the path
of this resolution with the Reference. This is done so that if the user
writes
const x = imported.y;
'x' can be generated as a local identifier instead of adding an import for
'y'.
This was at the heart of a bug. In the above case with 'router', the
PartialEvaluator added the identifier 'router' to the Reference generated
(through FFR) to RouterModule.
This is not correct. References that result from FFR expressions may not
have the same value at runtime as they do at compile time (indeed, this is
not the case for ModuleWithProviders). The Reference generated via FFR is
"synthetic" in the sense that it's constructed based on a useful
interpretation of the code, not an accurate representation of the runtime
value. Therefore, it may not be legal to refer to the Reference via the
'router' identifier.
This commit adds the ability to mark such a Reference as 'synthetic', which
allows the PartialEvaluator to not add the 'router' identifier down the
line. Tests are included for both the PartialEvaluator itself as well as the
resultant buggy behavior in ngtsc overall.
PR Close #29387
2019-03-18 19:07:36 -04:00
|
|
|
|
2019-10-30 15:02:30 -04:00
|
|
|
it('should extract the generic type if it is provided as qualified type name from another package',
|
|
|
|
() => {
|
|
|
|
env.write(`test.ts`, `
|
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from 'router';
|
|
|
|
|
|
|
|
@NgModule({imports: [RouterModule.forRoot()]})
|
|
|
|
export class TestModule {}`);
|
|
|
|
|
|
|
|
env.write('node_modules/router/index.d.ts', `
|
|
|
|
import {ModuleWithProviders} from '@angular/core';
|
|
|
|
import * as router2 from 'router2';
|
|
|
|
|
|
|
|
declare export class RouterModule {
|
|
|
|
static forRoot(): ModuleWithProviders<router2.Router2Module>;
|
|
|
|
}`);
|
|
|
|
|
|
|
|
env.write('node_modules/router2/index.d.ts', `
|
|
|
|
import {ɵɵNgModuleDefWithMeta} from '@angular/core';
|
|
|
|
export declare class Router2Module {
|
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<Router2Module, never, never, never>;
|
|
|
|
}`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('imports: [[RouterModule.forRoot()]]');
|
|
|
|
|
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
|
|
|
expect(dtsContents).toContain(`import * as i1 from "router2";`);
|
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
|
|
|
'i0.ɵɵNgModuleDefWithMeta<TestModule, never, [typeof i1.Router2Module], never>');
|
|
|
|
});
|
|
|
|
|
2019-10-14 10:20:26 -04:00
|
|
|
it('should not reference a constant with a ModuleWithProviders value in module def imports',
|
2019-06-06 15:22:32 -04:00
|
|
|
() => {
|
|
|
|
env.write('dep.d.ts', `
|
2019-05-17 21:49:21 -04:00
|
|
|
import {ModuleWithProviders, ɵɵNgModuleDefWithMeta as ɵɵNgModuleDefWithMeta} from '@angular/core';
|
2018-12-11 08:55:45 -05:00
|
|
|
|
fix(ivy): don't track identifiers of ffr-resolved references (#29387)
This fix is for a bug in the ngtsc PartialEvaluator, which statically
evaluates expressions.
Sometimes, evaluating a reference requires resolving a function which is
declared in another module, and thus no function body is available. To
support this case, the PartialEvaluator has the concept of a foreign
function resolver.
This allows the interpretation of expressions like:
const router = RouterModule.forRoot([]);
even though the definition of the 'forRoot' function has no body. In
ngtsc today, this will be resolved to a Reference to RouterModule itself,
via the ModuleWithProviders foreign function resolver.
However, the PartialEvaluator also associates any Identifiers in the path
of this resolution with the Reference. This is done so that if the user
writes
const x = imported.y;
'x' can be generated as a local identifier instead of adding an import for
'y'.
This was at the heart of a bug. In the above case with 'router', the
PartialEvaluator added the identifier 'router' to the Reference generated
(through FFR) to RouterModule.
This is not correct. References that result from FFR expressions may not
have the same value at runtime as they do at compile time (indeed, this is
not the case for ModuleWithProviders). The Reference generated via FFR is
"synthetic" in the sense that it's constructed based on a useful
interpretation of the code, not an accurate representation of the runtime
value. Therefore, it may not be legal to refer to the Reference via the
'router' identifier.
This commit adds the ability to mark such a Reference as 'synthetic', which
allows the PartialEvaluator to not add the 'router' identifier down the
line. Tests are included for both the PartialEvaluator itself as well as the
resultant buggy behavior in ngtsc overall.
PR Close #29387
2019-03-18 19:07:36 -04:00
|
|
|
export declare class DepModule {
|
|
|
|
static forRoot(arg1: any, arg2: any): ModuleWithProviders<DepModule>;
|
2019-10-14 10:20:26 -04:00
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<DepModule, never, never, never>;
|
fix(ivy): don't track identifiers of ffr-resolved references (#29387)
This fix is for a bug in the ngtsc PartialEvaluator, which statically
evaluates expressions.
Sometimes, evaluating a reference requires resolving a function which is
declared in another module, and thus no function body is available. To
support this case, the PartialEvaluator has the concept of a foreign
function resolver.
This allows the interpretation of expressions like:
const router = RouterModule.forRoot([]);
even though the definition of the 'forRoot' function has no body. In
ngtsc today, this will be resolved to a Reference to RouterModule itself,
via the ModuleWithProviders foreign function resolver.
However, the PartialEvaluator also associates any Identifiers in the path
of this resolution with the Reference. This is done so that if the user
writes
const x = imported.y;
'x' can be generated as a local identifier instead of adding an import for
'y'.
This was at the heart of a bug. In the above case with 'router', the
PartialEvaluator added the identifier 'router' to the Reference generated
(through FFR) to RouterModule.
This is not correct. References that result from FFR expressions may not
have the same value at runtime as they do at compile time (indeed, this is
not the case for ModuleWithProviders). The Reference generated via FFR is
"synthetic" in the sense that it's constructed based on a useful
interpretation of the code, not an accurate representation of the runtime
value. Therefore, it may not be legal to refer to the Reference via the
'router' identifier.
This commit adds the ability to mark such a Reference as 'synthetic', which
allows the PartialEvaluator to not add the 'router' identifier down the
line. Tests are included for both the PartialEvaluator itself as well as the
resultant buggy behavior in ngtsc overall.
PR Close #29387
2019-03-18 19:07:36 -04:00
|
|
|
}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('test.ts', `
|
fix(ivy): don't track identifiers of ffr-resolved references (#29387)
This fix is for a bug in the ngtsc PartialEvaluator, which statically
evaluates expressions.
Sometimes, evaluating a reference requires resolving a function which is
declared in another module, and thus no function body is available. To
support this case, the PartialEvaluator has the concept of a foreign
function resolver.
This allows the interpretation of expressions like:
const router = RouterModule.forRoot([]);
even though the definition of the 'forRoot' function has no body. In
ngtsc today, this will be resolved to a Reference to RouterModule itself,
via the ModuleWithProviders foreign function resolver.
However, the PartialEvaluator also associates any Identifiers in the path
of this resolution with the Reference. This is done so that if the user
writes
const x = imported.y;
'x' can be generated as a local identifier instead of adding an import for
'y'.
This was at the heart of a bug. In the above case with 'router', the
PartialEvaluator added the identifier 'router' to the Reference generated
(through FFR) to RouterModule.
This is not correct. References that result from FFR expressions may not
have the same value at runtime as they do at compile time (indeed, this is
not the case for ModuleWithProviders). The Reference generated via FFR is
"synthetic" in the sense that it's constructed based on a useful
interpretation of the code, not an accurate representation of the runtime
value. Therefore, it may not be legal to refer to the Reference via the
'router' identifier.
This commit adds the ability to mark such a Reference as 'synthetic', which
allows the PartialEvaluator to not add the 'router' identifier down the
line. Tests are included for both the PartialEvaluator itself as well as the
resultant buggy behavior in ngtsc overall.
PR Close #29387
2019-03-18 19:07:36 -04:00
|
|
|
import {NgModule, ModuleWithProviders} from '@angular/core';
|
|
|
|
import {DepModule} from './dep';
|
2018-12-11 08:55:45 -05:00
|
|
|
|
fix(ivy): don't track identifiers of ffr-resolved references (#29387)
This fix is for a bug in the ngtsc PartialEvaluator, which statically
evaluates expressions.
Sometimes, evaluating a reference requires resolving a function which is
declared in another module, and thus no function body is available. To
support this case, the PartialEvaluator has the concept of a foreign
function resolver.
This allows the interpretation of expressions like:
const router = RouterModule.forRoot([]);
even though the definition of the 'forRoot' function has no body. In
ngtsc today, this will be resolved to a Reference to RouterModule itself,
via the ModuleWithProviders foreign function resolver.
However, the PartialEvaluator also associates any Identifiers in the path
of this resolution with the Reference. This is done so that if the user
writes
const x = imported.y;
'x' can be generated as a local identifier instead of adding an import for
'y'.
This was at the heart of a bug. In the above case with 'router', the
PartialEvaluator added the identifier 'router' to the Reference generated
(through FFR) to RouterModule.
This is not correct. References that result from FFR expressions may not
have the same value at runtime as they do at compile time (indeed, this is
not the case for ModuleWithProviders). The Reference generated via FFR is
"synthetic" in the sense that it's constructed based on a useful
interpretation of the code, not an accurate representation of the runtime
value. Therefore, it may not be legal to refer to the Reference via the
'router' identifier.
This commit adds the ability to mark such a Reference as 'synthetic', which
allows the PartialEvaluator to not add the 'router' identifier down the
line. Tests are included for both the PartialEvaluator itself as well as the
resultant buggy behavior in ngtsc overall.
PR Close #29387
2019-03-18 19:07:36 -04:00
|
|
|
@NgModule({})
|
|
|
|
export class Base {}
|
2018-12-11 08:55:45 -05:00
|
|
|
|
fix(ivy): don't track identifiers of ffr-resolved references (#29387)
This fix is for a bug in the ngtsc PartialEvaluator, which statically
evaluates expressions.
Sometimes, evaluating a reference requires resolving a function which is
declared in another module, and thus no function body is available. To
support this case, the PartialEvaluator has the concept of a foreign
function resolver.
This allows the interpretation of expressions like:
const router = RouterModule.forRoot([]);
even though the definition of the 'forRoot' function has no body. In
ngtsc today, this will be resolved to a Reference to RouterModule itself,
via the ModuleWithProviders foreign function resolver.
However, the PartialEvaluator also associates any Identifiers in the path
of this resolution with the Reference. This is done so that if the user
writes
const x = imported.y;
'x' can be generated as a local identifier instead of adding an import for
'y'.
This was at the heart of a bug. In the above case with 'router', the
PartialEvaluator added the identifier 'router' to the Reference generated
(through FFR) to RouterModule.
This is not correct. References that result from FFR expressions may not
have the same value at runtime as they do at compile time (indeed, this is
not the case for ModuleWithProviders). The Reference generated via FFR is
"synthetic" in the sense that it's constructed based on a useful
interpretation of the code, not an accurate representation of the runtime
value. Therefore, it may not be legal to refer to the Reference via the
'router' identifier.
This commit adds the ability to mark such a Reference as 'synthetic', which
allows the PartialEvaluator to not add the 'router' identifier down the
line. Tests are included for both the PartialEvaluator itself as well as the
resultant buggy behavior in ngtsc overall.
PR Close #29387
2019-03-18 19:07:36 -04:00
|
|
|
const mwp = DepModule.forRoot(1,2);
|
2018-12-11 08:55:45 -05:00
|
|
|
|
fix(ivy): don't track identifiers of ffr-resolved references (#29387)
This fix is for a bug in the ngtsc PartialEvaluator, which statically
evaluates expressions.
Sometimes, evaluating a reference requires resolving a function which is
declared in another module, and thus no function body is available. To
support this case, the PartialEvaluator has the concept of a foreign
function resolver.
This allows the interpretation of expressions like:
const router = RouterModule.forRoot([]);
even though the definition of the 'forRoot' function has no body. In
ngtsc today, this will be resolved to a Reference to RouterModule itself,
via the ModuleWithProviders foreign function resolver.
However, the PartialEvaluator also associates any Identifiers in the path
of this resolution with the Reference. This is done so that if the user
writes
const x = imported.y;
'x' can be generated as a local identifier instead of adding an import for
'y'.
This was at the heart of a bug. In the above case with 'router', the
PartialEvaluator added the identifier 'router' to the Reference generated
(through FFR) to RouterModule.
This is not correct. References that result from FFR expressions may not
have the same value at runtime as they do at compile time (indeed, this is
not the case for ModuleWithProviders). The Reference generated via FFR is
"synthetic" in the sense that it's constructed based on a useful
interpretation of the code, not an accurate representation of the runtime
value. Therefore, it may not be legal to refer to the Reference via the
'router' identifier.
This commit adds the ability to mark such a Reference as 'synthetic', which
allows the PartialEvaluator to not add the 'router' identifier down the
line. Tests are included for both the PartialEvaluator itself as well as the
resultant buggy behavior in ngtsc overall.
PR Close #29387
2019-03-18 19:07:36 -04:00
|
|
|
@NgModule({
|
|
|
|
imports: [mwp],
|
|
|
|
})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('imports: [i1.DepModule]');
|
|
|
|
});
|
|
|
|
});
|
2018-07-10 12:57:48 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should unwrap a ModuleWithProviders-like function if a matching literal type is provided for it',
|
|
|
|
() => {
|
|
|
|
env.write(`test.ts`, `
|
2018-12-11 08:55:45 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from 'router';
|
|
|
|
|
|
|
|
@NgModule({imports: [RouterModule.forRoot()]})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('node_modules/router/index.d.ts', `
|
2019-05-17 21:49:21 -04:00
|
|
|
import {ModuleWithProviders, ɵɵNgModuleDefWithMeta} from '@angular/core';
|
2018-12-11 08:55:45 -05:00
|
|
|
|
|
|
|
export interface MyType extends ModuleWithProviders {}
|
|
|
|
|
|
|
|
declare class RouterModule {
|
|
|
|
static forRoot(): (MyType)&{ngModule:RouterModule};
|
2019-10-14 10:20:26 -04:00
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<RouterModule, never, never, never>;
|
2018-12-11 08:55:45 -05:00
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-12-11 08:55:45 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('imports: [[RouterModule.forRoot()]]');
|
2018-12-11 08:55:45 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
|
|
|
expect(dtsContents).toContain(`import * as i1 from "router";`);
|
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
|
|
|
'i0.ɵɵNgModuleDefWithMeta<TestModule, never, [typeof i1.RouterModule], never>');
|
|
|
|
});
|
2018-12-11 08:55:45 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should unwrap a namespace imported ModuleWithProviders function if a generic type is provided for it',
|
|
|
|
() => {
|
|
|
|
env.write(`test.ts`, `
|
2018-12-11 07:14:21 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from 'router';
|
|
|
|
|
|
|
|
@NgModule({imports: [RouterModule.forRoot()]})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('node_modules/router/index.d.ts', `
|
2018-12-11 08:55:45 -05:00
|
|
|
import * as core from '@angular/core';
|
|
|
|
import {RouterModule} from 'router';
|
2018-12-11 07:14:21 -05:00
|
|
|
|
|
|
|
declare class RouterModule {
|
2018-12-11 08:55:45 -05:00
|
|
|
static forRoot(): core.ModuleWithProviders<RouterModule>;
|
2019-10-14 10:20:26 -04:00
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<RouterModule, never, never, never>;
|
2018-12-11 07:14:21 -05:00
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-12-11 07:14:21 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('imports: [[RouterModule.forRoot()]]');
|
2018-12-11 07:14:21 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const dtsContents = env.getContents('test.d.ts');
|
|
|
|
expect(dtsContents).toContain(`import * as i1 from "router";`);
|
|
|
|
expect(dtsContents)
|
|
|
|
.toContain(
|
|
|
|
'i0.ɵɵNgModuleDefWithMeta<TestModule, never, [typeof i1.RouterModule], never>');
|
|
|
|
});
|
2018-12-11 07:14:21 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should inject special types according to the metadata', () => {
|
|
|
|
env.write(`test.ts`, `
|
2018-07-10 12:57:48 -04:00
|
|
|
import {
|
|
|
|
Attribute,
|
|
|
|
ChangeDetectorRef,
|
|
|
|
Component,
|
|
|
|
ElementRef,
|
|
|
|
Injector,
|
2018-08-16 11:43:29 -04:00
|
|
|
Renderer2,
|
2018-07-10 12:57:48 -04:00
|
|
|
TemplateRef,
|
|
|
|
ViewContainerRef,
|
|
|
|
} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: 'Test',
|
|
|
|
})
|
|
|
|
class FooCmp {
|
|
|
|
constructor(
|
|
|
|
@Attribute("test") attr: string,
|
|
|
|
cdr: ChangeDetectorRef,
|
|
|
|
er: ElementRef,
|
|
|
|
i: Injector,
|
2018-08-16 11:43:29 -04:00
|
|
|
r2: Renderer2,
|
2018-07-10 12:57:48 -04:00
|
|
|
tr: TemplateRef,
|
|
|
|
vcr: ViewContainerRef,
|
|
|
|
) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
2019-10-11 17:18:45 -04:00
|
|
|
`FooCmp.ɵfac = function FooCmp_Factory(t) { return new (t || FooCmp)(i0.ɵɵinjectAttribute("test"), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); }`);
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2018-07-18 12:32:36 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should generate queries for components', () => {
|
|
|
|
env.write(`test.ts`, `
|
2018-07-18 12:32:36 -04:00
|
|
|
import {Component, ContentChild, ContentChildren, TemplateRef, ViewChild} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '<div #foo></div>',
|
|
|
|
queries: {
|
|
|
|
'mview': new ViewChild('test1'),
|
|
|
|
'mcontent': new ContentChild('test2'),
|
|
|
|
}
|
|
|
|
})
|
|
|
|
class FooCmp {
|
2019-10-05 04:04:54 -04:00
|
|
|
@ContentChild('bar', {read: TemplateRef}) child: any;
|
2018-07-18 12:32:36 -04:00
|
|
|
@ContentChildren(TemplateRef) children: any;
|
|
|
|
get aview(): any { return null; }
|
2019-10-05 04:04:54 -04:00
|
|
|
@ViewChild('accessor') set aview(value: any) {}
|
2018-07-18 12:32:36 -04:00
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toMatch(varRegExp('bar'));
|
|
|
|
expect(jsContents).toMatch(varRegExp('test1'));
|
|
|
|
expect(jsContents).toMatch(varRegExp('test2'));
|
|
|
|
expect(jsContents).toMatch(varRegExp('accessor'));
|
|
|
|
// match `i0.ɵɵcontentQuery(dirIndex, _c1, true, TemplateRef)`
|
|
|
|
expect(jsContents).toMatch(contentQueryRegExp('\\w+', true, 'TemplateRef'));
|
|
|
|
// match `i0.ɵɵviewQuery(_c2, true, null)`
|
|
|
|
expect(jsContents).toMatch(viewQueryRegExp(true));
|
|
|
|
});
|
2018-07-18 12:50:16 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should generate queries for directives', () => {
|
|
|
|
env.write(`test.ts`, `
|
2019-03-13 14:30:38 -04:00
|
|
|
import {Directive, ContentChild, ContentChildren, TemplateRef, ViewChild} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[test]',
|
|
|
|
queries: {
|
|
|
|
'mview': new ViewChild('test1'),
|
|
|
|
'mcontent': new ContentChild('test2'),
|
|
|
|
}
|
|
|
|
})
|
|
|
|
class FooCmp {
|
2019-10-05 04:04:54 -04:00
|
|
|
@ContentChild('bar', {read: TemplateRef}) child: any;
|
2019-03-13 14:30:38 -04:00
|
|
|
@ContentChildren(TemplateRef) children: any;
|
|
|
|
get aview(): any { return null; }
|
|
|
|
@ViewChild('accessor') set aview(value: any) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toMatch(varRegExp('bar'));
|
|
|
|
expect(jsContents).toMatch(varRegExp('test1'));
|
|
|
|
expect(jsContents).toMatch(varRegExp('test2'));
|
|
|
|
expect(jsContents).toMatch(varRegExp('accessor'));
|
|
|
|
// match `i0.ɵɵcontentQuery(dirIndex, _c1, true, TemplateRef)`
|
|
|
|
expect(jsContents).toMatch(contentQueryRegExp('\\w+', true, 'TemplateRef'));
|
|
|
|
|
2019-07-20 06:32:29 -04:00
|
|
|
// match `i0.ɵɵviewQuery(_c2, true)`
|
2019-06-06 15:22:32 -04:00
|
|
|
// Note that while ViewQuery doesn't necessarily make sense on a directive, because it doesn't
|
|
|
|
// have a view, we still need to handle it because a component could extend the directive.
|
|
|
|
expect(jsContents).toMatch(viewQueryRegExp(true));
|
|
|
|
});
|
2019-03-13 14:30:38 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should handle queries that use forwardRef', () => {
|
|
|
|
env.write(`test.ts`, `
|
2018-07-24 19:05:23 -04:00
|
|
|
import {Component, ContentChild, TemplateRef, ViewContainerRef, forwardRef} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '<div #foo></div>',
|
|
|
|
})
|
|
|
|
class FooCmp {
|
2019-10-05 04:04:54 -04:00
|
|
|
@ContentChild(forwardRef(() => TemplateRef)) child: any;
|
2018-07-24 19:05:23 -04:00
|
|
|
|
2019-10-05 04:04:54 -04:00
|
|
|
@ContentChild(forwardRef(function() { return ViewContainerRef; })) child2: any;
|
2019-04-13 12:28:27 -04:00
|
|
|
|
2019-10-05 04:04:54 -04:00
|
|
|
@ContentChild((forwardRef((function() { return 'parens'; }) as any))) childInParens: any;
|
2018-07-24 19:05:23 -04:00
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
// match `i0.ɵɵcontentQuery(dirIndex, TemplateRef, true, null)`
|
|
|
|
expect(jsContents).toMatch(contentQueryRegExp('TemplateRef', true));
|
|
|
|
// match `i0.ɵɵcontentQuery(dirIndex, ViewContainerRef, true, null)`
|
|
|
|
expect(jsContents).toMatch(contentQueryRegExp('ViewContainerRef', true));
|
|
|
|
// match `i0.ɵɵcontentQuery(dirIndex, _c0, true, null)`
|
|
|
|
expect(jsContents).toContain('_c0 = ["parens"];');
|
|
|
|
expect(jsContents).toMatch(contentQueryRegExp('_c0', true));
|
|
|
|
});
|
2018-07-24 19:05:23 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile expressions that write keys', () => {
|
|
|
|
env.write(`test.ts`, `
|
2019-02-01 12:48:17 -05:00
|
|
|
import {Component, ContentChild, TemplateRef, ViewContainerRef, forwardRef} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '<div (click)="test[key] = $event">',
|
|
|
|
})
|
|
|
|
class TestCmp {
|
|
|
|
test: any;
|
|
|
|
key: string;
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
expect(env.getContents('test.js')).toContain('test[key] = $event');
|
|
|
|
});
|
2019-02-01 12:48:17 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should generate host listeners for components', () => {
|
|
|
|
env.write(`test.ts`, `
|
2018-11-20 18:20:19 -05:00
|
|
|
import {Component, HostListener} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: 'Test'
|
|
|
|
})
|
|
|
|
class FooCmp {
|
2018-12-19 18:03:47 -05:00
|
|
|
@HostListener('click')
|
|
|
|
onClick(event: any): void {}
|
|
|
|
|
2018-11-20 18:20:19 -05:00
|
|
|
@HostListener('document:click', ['$event.target'])
|
2018-12-19 18:03:47 -05:00
|
|
|
onDocumentClick(eventTarget: HTMLElement): void {}
|
2018-11-20 18:20:19 -05:00
|
|
|
|
|
|
|
@HostListener('window:scroll')
|
2018-12-19 18:03:47 -05:00
|
|
|
onWindowScroll(event: any): void {}
|
2018-11-20 18:20:19 -05:00
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
const hostBindingsFn = `
|
2020-01-25 06:38:42 -05:00
|
|
|
hostBindings: function FooCmp_HostBindings(rf, ctx) {
|
2018-11-20 18:20:19 -05:00
|
|
|
if (rf & 1) {
|
2019-11-11 12:15:24 -05:00
|
|
|
i0.ɵɵlistener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onClick(); })("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onDocumentClick($event.target); }, false, i0.ɵɵresolveDocument)("scroll", function FooCmp_scroll_HostBindingHandler($event) { return ctx.onWindowScroll(); }, false, i0.ɵɵresolveWindow);
|
2018-11-20 18:20:19 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
`;
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(trim(jsContents)).toContain(trim(hostBindingsFn));
|
|
|
|
});
|
2018-11-20 18:20:19 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should throw in case unknown global target is provided', () => {
|
|
|
|
env.write(`test.ts`, `
|
2018-12-19 18:03:47 -05:00
|
|
|
import {Component, HostListener} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: 'Test'
|
|
|
|
})
|
|
|
|
class FooCmp {
|
|
|
|
@HostListener('UnknownTarget:click')
|
|
|
|
onClick(event: any): void {}
|
|
|
|
}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(trim(errors[0].messageText as string))
|
|
|
|
.toContain(
|
|
|
|
`Unexpected global target 'UnknownTarget' defined for 'click' event. Supported list of global targets: window,document,body.`);
|
|
|
|
});
|
2018-12-19 18:03:47 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should throw in case pipes are used in host listeners', () => {
|
|
|
|
env.write(`test.ts`, `
|
2019-01-24 20:25:46 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '...',
|
|
|
|
host: {
|
|
|
|
'(click)': 'doSmth() | myPipe'
|
|
|
|
}
|
|
|
|
})
|
|
|
|
class FooCmp {}
|
2020-01-06 20:27:29 -05:00
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(trim(errors[0].messageText as string))
|
|
|
|
.toContain('Cannot have a pipe in an action expression');
|
|
|
|
});
|
2019-01-24 20:25:46 -05:00
|
|
|
|
2020-01-06 20:27:29 -05:00
|
|
|
it('should throw in case pipes are used in host bindings (defined as `value | pipe`)', () => {
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write(`test.ts`, `
|
2020-01-06 20:27:29 -05:00
|
|
|
import {Component} from '@angular/core';
|
2019-01-24 20:25:46 -05:00
|
|
|
|
2020-01-06 20:27:29 -05:00
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '...',
|
|
|
|
host: {
|
|
|
|
'[id]': 'id | myPipe'
|
|
|
|
}
|
|
|
|
})
|
|
|
|
class FooCmp {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(trim(errors[0].messageText as string))
|
|
|
|
.toContain('Host binding expression cannot contain pipes');
|
|
|
|
});
|
2019-01-24 20:25:46 -05:00
|
|
|
|
2020-01-06 20:27:29 -05:00
|
|
|
it('should throw in case pipes are used in host bindings (defined as `!(value | pipe)`)',
|
|
|
|
() => {
|
|
|
|
env.write(`test.ts`, `
|
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '...',
|
|
|
|
host: {
|
|
|
|
'[id]': '!(id | myPipe)'
|
|
|
|
}
|
|
|
|
})
|
|
|
|
class FooCmp {}
|
|
|
|
`);
|
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(trim(errors[0].messageText as string))
|
|
|
|
.toContain('Host binding expression cannot contain pipes');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should throw in case pipes are used in host bindings (defined as `(value | pipe) === X`)',
|
|
|
|
() => {
|
|
|
|
env.write(`test.ts`, `
|
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '...',
|
|
|
|
host: {
|
|
|
|
'[id]': '(id | myPipe) === true'
|
|
|
|
}
|
|
|
|
})
|
|
|
|
class FooCmp {}
|
|
|
|
`);
|
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(trim(errors[0].messageText as string))
|
|
|
|
.toContain('Host binding expression cannot contain pipes');
|
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should generate host bindings for directives', () => {
|
|
|
|
env.write(`test.ts`, `
|
2018-07-18 12:50:16 -04:00
|
|
|
import {Component, HostBinding, HostListener, TemplateRef} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: 'Test',
|
|
|
|
host: {
|
|
|
|
'[attr.hello]': 'foo',
|
|
|
|
'(click)': 'onClick($event)',
|
2018-12-19 18:03:47 -05:00
|
|
|
'(body:click)': 'onBodyClick($event)',
|
2018-07-18 12:50:16 -04:00
|
|
|
'[prop]': 'bar',
|
|
|
|
},
|
|
|
|
})
|
|
|
|
class FooCmp {
|
|
|
|
onClick(event: any): void {}
|
|
|
|
|
|
|
|
@HostBinding('class.someclass')
|
|
|
|
get someClass(): boolean { return false; }
|
|
|
|
|
2018-10-16 13:28:23 -04:00
|
|
|
@HostListener('change', ['arg1', 'arg2', 'arg3'])
|
2018-07-18 12:50:16 -04:00
|
|
|
onChange(event: any, arg: any): void {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
const hostBindingsFn = `
|
2019-12-17 18:40:37 -05:00
|
|
|
hostVars: 4,
|
2020-01-25 06:38:42 -05:00
|
|
|
hostBindings: function FooCmp_HostBindings(rf, ctx) {
|
2018-11-20 18:20:19 -05:00
|
|
|
if (rf & 1) {
|
2019-11-11 12:15:24 -05:00
|
|
|
i0.ɵɵlistener("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onClick($event); })("click", function FooCmp_click_HostBindingHandler($event) { return ctx.onBodyClick($event); }, false, i0.ɵɵresolveBody)("change", function FooCmp_change_HostBindingHandler($event) { return ctx.onChange(ctx.arg1, ctx.arg2, ctx.arg3); });
|
2018-11-20 18:20:19 -05:00
|
|
|
}
|
|
|
|
if (rf & 2) {
|
2019-07-14 05:11:10 -04:00
|
|
|
i0.ɵɵhostProperty("prop", ctx.bar);
|
2019-06-27 14:23:15 -04:00
|
|
|
i0.ɵɵattribute("hello", ctx.foo);
|
2019-05-28 13:31:01 -04:00
|
|
|
i0.ɵɵclassProp("someclass", ctx.someClass);
|
2018-11-20 18:20:19 -05:00
|
|
|
}
|
2018-10-16 13:28:23 -04:00
|
|
|
}
|
|
|
|
`;
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(trim(jsContents)).toContain(trim(hostBindingsFn));
|
|
|
|
});
|
2018-10-16 13:28:23 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should accept dynamic host attribute bindings', () => {
|
|
|
|
env.write('other.d.ts', `
|
2019-02-27 19:54:37 -05:00
|
|
|
export declare const foo: any;
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('test.ts', `
|
2019-02-27 19:54:37 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
import {foo} from './other';
|
|
|
|
|
|
|
|
const test = foo.bar();
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '',
|
|
|
|
host: {
|
|
|
|
'test': test,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
2020-01-08 14:32:33 -05:00
|
|
|
expect(jsContents).toContain('hostAttrs: ["test", test]');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2019-02-27 19:54:37 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should accept enum values as host bindings', () => {
|
|
|
|
env.write(`test.ts`, `
|
2019-02-01 16:07:18 -05:00
|
|
|
import {Component, HostBinding, HostListener, TemplateRef} from '@angular/core';
|
|
|
|
|
|
|
|
enum HostBindings {
|
|
|
|
Hello = 'foo'
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: 'Test',
|
|
|
|
host: {
|
|
|
|
'[attr.hello]': HostBindings.Hello,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
class FooCmp {
|
|
|
|
foo = 'test';
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
expect(env.getContents('test.js')).toContain('i0.ɵɵattribute("hello", ctx.foo)');
|
|
|
|
});
|
2019-02-01 16:07:18 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should generate host listeners for directives within hostBindings section', () => {
|
|
|
|
env.write(`test.ts`, `
|
2018-10-16 13:28:23 -04:00
|
|
|
import {Directive, HostListener} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[test]',
|
|
|
|
})
|
2018-11-20 18:20:19 -05:00
|
|
|
class Dir {
|
2018-10-16 13:28:23 -04:00
|
|
|
@HostListener('change', ['arg'])
|
|
|
|
onChange(event: any, arg: any): void {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
const hostBindingsFn = `
|
2020-01-25 06:38:42 -05:00
|
|
|
hostBindings: function Dir_HostBindings(rf, ctx) {
|
2018-11-20 18:20:19 -05:00
|
|
|
if (rf & 1) {
|
2019-05-17 21:49:21 -04:00
|
|
|
i0.ɵɵlistener("change", function Dir_change_HostBindingHandler($event) { return ctx.onChange(ctx.arg); });
|
2018-11-20 18:20:19 -05:00
|
|
|
}
|
2018-10-16 13:28:23 -04:00
|
|
|
}
|
|
|
|
`;
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(trim(jsContents)).toContain(trim(hostBindingsFn));
|
|
|
|
});
|
2018-07-25 14:16:00 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should use proper default value for preserveWhitespaces config param', () => {
|
|
|
|
env.tsconfig(); // default is `false`
|
|
|
|
env.write(`test.ts`, `
|
2018-11-16 12:57:23 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
preserveWhitespaces: false,
|
|
|
|
template: \`
|
|
|
|
<div>
|
|
|
|
Template with whitespaces
|
|
|
|
</div>
|
|
|
|
\`
|
|
|
|
})
|
|
|
|
class FooCmp {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('text(1, " Template with whitespaces ");');
|
|
|
|
});
|
2018-11-16 12:57:23 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should take preserveWhitespaces config option into account', () => {
|
|
|
|
env.tsconfig({preserveWhitespaces: true});
|
|
|
|
env.write(`test.ts`, `
|
2018-11-20 13:51:16 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: \`
|
|
|
|
<div>
|
|
|
|
Template with whitespaces
|
|
|
|
</div>
|
|
|
|
\`
|
|
|
|
})
|
|
|
|
class FooCmp {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain('text(2, "\\n Template with whitespaces\\n ");');
|
|
|
|
});
|
2018-11-20 13:51:16 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('@Component\'s preserveWhitespaces should override the one defined in config', () => {
|
|
|
|
env.tsconfig({preserveWhitespaces: true});
|
|
|
|
env.write(`test.ts`, `
|
2018-11-20 13:51:16 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
preserveWhitespaces: false,
|
|
|
|
template: \`
|
|
|
|
<div>
|
|
|
|
Template with whitespaces
|
|
|
|
</div>
|
|
|
|
\`
|
|
|
|
})
|
|
|
|
class FooCmp {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('text(1, " Template with whitespaces ");');
|
|
|
|
});
|
2018-11-20 13:51:16 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should use proper default value for i18nUseExternalIds config param', () => {
|
|
|
|
env.tsconfig(); // default is `true`
|
|
|
|
env.write(`test.ts`, `
|
2018-11-16 12:57:23 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '<div i18n>Some text</div>'
|
|
|
|
})
|
|
|
|
class FooCmp {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('MSG_EXTERNAL_8321000940098097247$$TEST_TS_1');
|
|
|
|
});
|
2018-11-16 12:57:23 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should take i18nUseExternalIds config option into account', () => {
|
|
|
|
env.tsconfig({i18nUseExternalIds: false});
|
|
|
|
env.write(`test.ts`, `
|
2018-11-16 12:57:23 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '<div i18n>Some text</div>'
|
|
|
|
})
|
|
|
|
class FooCmp {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).not.toContain('MSG_EXTERNAL_');
|
|
|
|
});
|
2018-11-16 12:57:23 -05:00
|
|
|
|
2019-12-03 03:36:38 -05:00
|
|
|
it('should render legacy ids when `enableI18nLegacyMessageIdFormat` is not false', () => {
|
|
|
|
env.tsconfig({});
|
|
|
|
env.write(`test.ts`, `
|
2019-10-01 09:58:49 -04:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '<div i18n>Some text</div>'
|
|
|
|
})
|
|
|
|
class FooCmp {}`);
|
2019-12-03 03:36:38 -05:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
|
|
|
'":\\u241F5dbba0a3da8dff890e20cf76eb075d58900fbcd3\\u241F8321000940098097247:Some text"');
|
|
|
|
});
|
2019-10-01 09:58:49 -04:00
|
|
|
|
2019-12-03 03:36:38 -05:00
|
|
|
it('should render custom id and legacy ids if `enableI18nLegacyMessageIdFormat` is not false',
|
2019-10-09 07:34:37 -04:00
|
|
|
() => {
|
|
|
|
env.tsconfig({i18nFormatIn: 'xlf'});
|
|
|
|
env.write(`test.ts`, `
|
2019-10-01 09:58:49 -04:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '<div i18n="@@custom">Some text</div>'
|
|
|
|
})
|
|
|
|
class FooCmp {}`);
|
2019-10-09 07:34:37 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
2019-12-03 03:36:38 -05:00
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
|
|
|
':@@custom\\u241F5dbba0a3da8dff890e20cf76eb075d58900fbcd3\\u241F8321000940098097247:Some text');
|
2019-10-09 07:34:37 -04:00
|
|
|
});
|
|
|
|
|
2019-12-03 03:36:38 -05:00
|
|
|
it('should not render legacy ids when `enableI18nLegacyMessageIdFormat` is set to false',
|
|
|
|
() => {
|
|
|
|
env.tsconfig({enableI18nLegacyMessageIdFormat: false, i18nInFormat: 'xmb'});
|
|
|
|
env.write(`test.ts`, `
|
2019-10-09 07:34:37 -04:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '<div i18n>Some text</div>'
|
|
|
|
})
|
|
|
|
class FooCmp {}`);
|
2019-12-03 03:36:38 -05:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
// Note that the colon would only be there if there is an id attached to the string.
|
|
|
|
expect(jsContents).not.toContain(':Some text');
|
|
|
|
});
|
2019-10-01 09:58:49 -04:00
|
|
|
|
2019-12-03 03:36:38 -05:00
|
|
|
it('should also render legacy ids for ICUs when normal messages are using legacy ids', () => {
|
2019-10-22 10:05:44 -04:00
|
|
|
env.tsconfig({i18nInFormat: 'xliff'});
|
|
|
|
env.write(`test.ts`, `
|
|
|
|
import {Component} from '@angular/core';
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '<div i18n="@@custom">Some text {age, plural, 10 {ten} other {other}}</div>'
|
|
|
|
})
|
|
|
|
class FooCmp {}`);
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
2019-12-03 03:36:38 -05:00
|
|
|
':\\u241F720ba589d043a0497ac721ff972f41db0c919efb\\u241F3221232817843005870:{VAR_PLURAL, plural, 10 {ten} other {other}}');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
|
|
|
':@@custom\\u241Fdcb6170595f5d548a3d00937e87d11858f51ad04\\u241F7419139165339437596:Some text');
|
2019-10-22 10:05:44 -04:00
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('@Component\'s `interpolation` should override default interpolation config', () => {
|
|
|
|
env.write(`test.ts`, `
|
2018-11-29 19:21:16 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
@Component({
|
|
|
|
selector: 'cmp-with-custom-interpolation-a',
|
|
|
|
template: \`<div>{%text%}</div>\`,
|
|
|
|
interpolation: ['{%', '%}']
|
|
|
|
})
|
|
|
|
class ComponentWithCustomInterpolationA {
|
|
|
|
text = 'Custom Interpolation A';
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('ɵɵtextInterpolate(ctx.text)');
|
|
|
|
});
|
2018-11-29 19:21:16 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should handle `encapsulation` field', () => {
|
|
|
|
env.write(`test.ts`, `
|
2019-01-07 19:35:06 -05:00
|
|
|
import {Component, ViewEncapsulation} from '@angular/core';
|
|
|
|
@Component({
|
|
|
|
selector: 'comp-a',
|
|
|
|
template: '...',
|
|
|
|
encapsulation: ViewEncapsulation.None
|
|
|
|
})
|
|
|
|
class CompA {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('encapsulation: 2');
|
|
|
|
});
|
2019-01-07 19:35:06 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should throw if `encapsulation` contains invalid value', () => {
|
|
|
|
env.write('test.ts', `
|
2019-01-07 19:35:06 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
@Component({
|
|
|
|
selector: 'comp-a',
|
|
|
|
template: '...',
|
|
|
|
encapsulation: 'invalid-value'
|
|
|
|
})
|
|
|
|
class CompA {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(errors[0].messageText)
|
|
|
|
.toContain('encapsulation must be a member of ViewEncapsulation enum from @angular/core');
|
|
|
|
});
|
2019-01-07 19:35:06 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should handle `changeDetection` field', () => {
|
|
|
|
env.write(`test.ts`, `
|
2019-01-07 19:35:06 -05:00
|
|
|
import {Component, ChangeDetectionStrategy} from '@angular/core';
|
|
|
|
@Component({
|
|
|
|
selector: 'comp-a',
|
|
|
|
template: '...',
|
|
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
|
|
})
|
|
|
|
class CompA {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('changeDetection: 0');
|
|
|
|
});
|
2019-01-07 19:35:06 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should throw if `changeDetection` contains invalid value', () => {
|
|
|
|
env.write('test.ts', `
|
2019-01-07 19:35:06 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
@Component({
|
|
|
|
selector: 'comp-a',
|
|
|
|
template: '...',
|
|
|
|
changeDetection: 'invalid-value'
|
|
|
|
})
|
|
|
|
class CompA {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(errors[0].messageText)
|
|
|
|
.toContain(
|
|
|
|
'changeDetection must be a member of ChangeDetectionStrategy enum from @angular/core');
|
|
|
|
});
|
2019-01-07 19:35:06 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should ignore empty bindings', () => {
|
|
|
|
env.write(`test.ts`, `
|
2019-01-10 18:54:48 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '<div [someProp]></div>'
|
|
|
|
})
|
|
|
|
class FooCmp {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).not.toContain('i0.ɵɵproperty');
|
|
|
|
});
|
2019-01-10 18:54:48 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should correctly recognize local symbols', () => {
|
|
|
|
env.write('module.ts', `
|
2018-07-25 14:16:00 -04:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {Dir, Comp} from './test';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [Dir, Comp],
|
|
|
|
exports: [Dir, Comp],
|
|
|
|
})
|
|
|
|
class Module {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write(`test.ts`, `
|
2018-07-25 14:16:00 -04:00
|
|
|
import {Component, Directive} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[dir]',
|
|
|
|
})
|
|
|
|
export class Dir {}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '<div dir>Test</div>',
|
|
|
|
})
|
|
|
|
export class Comp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).not.toMatch(/import \* as i[0-9] from ['"].\/test['"]/);
|
|
|
|
});
|
2018-07-28 01:57:44 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should generate exportAs declarations', () => {
|
|
|
|
env.write('test.ts', `
|
2018-08-06 03:56:43 -04:00
|
|
|
import {Component, Directive} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[test]',
|
|
|
|
exportAs: 'foo',
|
|
|
|
})
|
|
|
|
class Dir {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-08-06 03:56:43 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain(`exportAs: ["foo"]`);
|
|
|
|
});
|
2019-01-10 16:24:32 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should generate multiple exportAs declarations', () => {
|
|
|
|
env.write('test.ts', `
|
2019-01-10 16:24:32 -05:00
|
|
|
import {Component, Directive} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[test]',
|
|
|
|
exportAs: 'foo, bar',
|
|
|
|
})
|
|
|
|
class Dir {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-01-10 16:24:32 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain(`exportAs: ["foo", "bar"]`);
|
|
|
|
});
|
2018-08-06 03:56:43 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should generate correct factory stubs for a test module', () => {
|
2019-10-18 15:15:25 -04:00
|
|
|
env.tsconfig({'generateNgFactoryShims': true});
|
2018-07-28 01:57:44 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('test.ts', `
|
2018-07-28 01:57:44 -04:00
|
|
|
import {Injectable, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
export class NotAModule {}
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('empty.ts', `
|
2018-07-28 01:57:44 -04:00
|
|
|
import {Injectable} from '@angular/core';
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
export class NotAModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-07-28 01:57:44 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const factoryContents = env.getContents('test.ngfactory.js');
|
|
|
|
expect(factoryContents).toContain(`import * as i0 from '@angular/core';`);
|
|
|
|
expect(factoryContents).toContain(`import { NotAModule, TestModule } from './test';`);
|
|
|
|
expect(factoryContents)
|
|
|
|
.toContain(`export var TestModuleNgFactory = new i0.\u0275NgModuleFactory(TestModule);`);
|
|
|
|
expect(factoryContents).not.toContain(`NotAModuleNgFactory`);
|
|
|
|
expect(factoryContents).not.toContain('\u0275NonEmptyModule');
|
|
|
|
|
|
|
|
const emptyFactory = env.getContents('empty.ngfactory.js');
|
|
|
|
expect(emptyFactory).toContain(`import * as i0 from '@angular/core';`);
|
|
|
|
expect(emptyFactory).toContain(`export var \u0275NonEmptyModule = true;`);
|
|
|
|
});
|
2018-08-06 05:48:26 -04:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
describe('ngfactory shims', () => {
|
|
|
|
beforeEach(() => { env.tsconfig({'generateNgFactoryShims': true}); });
|
2019-03-01 18:17:26 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
it('should generate correct type annotation for NgModuleFactory calls in ngfactories', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Component} from '@angular/core';
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '...',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
|
|
|
env.driveMain();
|
2019-03-01 18:17:26 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
const ngfactoryContents = env.getContents('test.ngfactory.d.ts');
|
|
|
|
expect(ngfactoryContents).toContain(`i0.ɵNgModuleFactory<any>`);
|
|
|
|
});
|
2019-03-01 18:17:26 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
it('should copy a top-level comment into a factory stub', () => {
|
|
|
|
env.tsconfig({'allowEmptyCodegenFiles': true});
|
2019-03-01 18:17:26 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
env.write('test.ts', `/** I am a top-level comment. */
|
|
|
|
import {NgModule} from '@angular/core';
|
2019-10-25 13:45:08 -04:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
@NgModule({})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
|
|
|
env.driveMain();
|
2019-02-19 11:50:27 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
const factoryContents = env.getContents('test.ngfactory.js');
|
|
|
|
expect(factoryContents).toMatch(/^\/\*\* I am a top-level comment\. \*\//);
|
|
|
|
});
|
2019-02-19 11:50:27 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
it('should be able to compile an app using the factory shim', () => {
|
|
|
|
env.tsconfig({'allowEmptyCodegenFiles': true});
|
2019-02-19 11:50:27 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
env.write('test.ts', `
|
|
|
|
export {MyModuleNgFactory} from './my-module.ngfactory';
|
|
|
|
`);
|
2019-02-19 11:50:27 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
env.write('my-module.ts', `
|
|
|
|
import {NgModule} from '@angular/core';
|
2019-10-25 13:45:08 -04:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
@NgModule({})
|
|
|
|
export class MyModule {}
|
|
|
|
`);
|
2019-02-19 11:50:27 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
env.driveMain();
|
|
|
|
});
|
2019-01-08 16:02:11 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
it('should generate correct imports in factory stubs when compiling @angular/core', () => {
|
|
|
|
env.tsconfig({'allowEmptyCodegenFiles': true});
|
2019-01-08 16:02:11 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
env.write('test.ts', `
|
|
|
|
import {NgModule} from '@angular/core';
|
2019-10-25 13:45:08 -04:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
@NgModule({})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
2019-01-08 16:02:11 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
// Trick the compiler into thinking it's compiling @angular/core.
|
|
|
|
env.write('r3_symbols.ts', 'export const ITS_JUST_ANGULAR = true;');
|
2019-01-08 16:02:11 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
env.driveMain();
|
2019-01-08 16:02:11 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
const factoryContents = env.getContents('test.ngfactory.js');
|
|
|
|
expect(normalize(factoryContents)).toBe(normalize(`
|
|
|
|
import * as i0 from "./r3_symbols";
|
|
|
|
import { TestModule } from './test';
|
|
|
|
export var TestModuleNgFactory = new i0.NgModuleFactory(TestModule);
|
|
|
|
`));
|
|
|
|
});
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2019-01-08 16:02:11 -05:00
|
|
|
|
2018-10-16 18:07:46 -04:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
describe('ngsummary shim generation', () => {
|
|
|
|
beforeEach(() => { env.tsconfig({'generateNgSummaryShims': true}); });
|
2018-10-16 18:07:46 -04:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
it('should generate a summary stub for decorated classes in the input file only', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Injectable, NgModule} from '@angular/core';
|
2019-10-25 13:45:08 -04:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
export class NotAModule {}
|
2019-10-25 13:45:08 -04:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
@NgModule({})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
2018-10-16 18:07:46 -04:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
env.driveMain();
|
2018-10-16 18:07:46 -04:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
const summaryContents = env.getContents('test.ngsummary.js');
|
|
|
|
expect(summaryContents).toEqual(`export var TestModuleNgSummary = null;\n`);
|
|
|
|
});
|
2018-10-16 18:07:46 -04:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
it('should generate a summary stub for classes exported via exports', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Injectable, NgModule} from '@angular/core';
|
2019-10-25 13:45:08 -04:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
@NgModule({})
|
|
|
|
class NotDirectlyExported {}
|
2019-10-25 13:45:08 -04:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
export {NotDirectlyExported};
|
|
|
|
`);
|
2019-03-08 16:18:32 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
env.driveMain();
|
2019-03-08 16:18:32 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
const summaryContents = env.getContents('test.ngsummary.js');
|
|
|
|
expect(summaryContents).toEqual(`export var NotDirectlyExportedNgSummary = null;\n`);
|
|
|
|
});
|
2019-03-08 16:18:32 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
it('it should generate empty export when there are no other summary symbols, to ensure the output is a valid ES module',
|
|
|
|
() => {
|
|
|
|
env.write('empty.ts', `
|
|
|
|
export class NotAModule {}
|
|
|
|
`);
|
2019-03-08 16:18:32 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
env.driveMain();
|
2019-03-08 16:18:32 -05:00
|
|
|
|
2019-10-18 15:15:25 -04:00
|
|
|
const emptySummary = env.getContents('empty.ngsummary.js');
|
|
|
|
// The empty export ensures this js file is still an ES module.
|
|
|
|
expect(emptySummary).toEqual(`export var \u0275empty = null;\n`);
|
|
|
|
});
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2019-03-08 16:18:32 -05:00
|
|
|
|
2018-10-16 18:07:46 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile a banana-in-a-box inside of a template', () => {
|
|
|
|
env.write('test.ts', `
|
2018-08-06 05:48:26 -04:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '<div *tmpl [(bananaInABox)]="prop"></div>',
|
|
|
|
selector: 'test'
|
|
|
|
})
|
|
|
|
class TestCmp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
});
|
2018-07-16 19:36:31 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('generates inherited factory definitions', () => {
|
|
|
|
env.write(`test.ts`, `
|
2018-07-16 19:36:31 -04:00
|
|
|
import {Injectable} from '@angular/core';
|
|
|
|
|
|
|
|
class Dep {}
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
class Base {
|
|
|
|
constructor(dep: Dep) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
class Child extends Base {}
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
class GrandChild extends Child {
|
|
|
|
constructor() {
|
|
|
|
super(null!);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
2018-07-16 19:36:31 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents)
|
|
|
|
.toContain('function Base_Factory(t) { return new (t || Base)(i0.ɵɵinject(Dep)); }');
|
|
|
|
expect(jsContents).toContain('var \u0275Child_BaseFactory = i0.ɵɵgetInheritedFactory(Child)');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain('function Child_Factory(t) { return \u0275Child_BaseFactory(t || Child); }');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain('function GrandChild_Factory(t) { return new (t || GrandChild)(); }');
|
|
|
|
});
|
2018-08-06 08:49:35 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('generates base factories for directives', () => {
|
|
|
|
env.write(`test.ts`, `
|
2018-08-22 14:37:07 -04:00
|
|
|
import {Directive} from '@angular/core';
|
|
|
|
|
2019-11-26 13:33:26 -05:00
|
|
|
@Directive({
|
|
|
|
selector: '[base]',
|
|
|
|
})
|
2018-08-22 14:37:07 -04:00
|
|
|
class Base {}
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[test]',
|
|
|
|
})
|
|
|
|
class Dir extends Base {
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
2018-08-22 14:37:07 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(jsContents).toContain('var \u0275Dir_BaseFactory = i0.ɵɵgetInheritedFactory(Dir)');
|
|
|
|
});
|
2018-08-22 14:37:07 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should wrap "directives" in component metadata in a closure when forward references are present',
|
|
|
|
() => {
|
|
|
|
env.write('test.ts', `
|
2018-08-06 08:49:35 -04:00
|
|
|
import {Component, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'cmp-a',
|
|
|
|
template: '<cmp-b></cmp-b>',
|
|
|
|
})
|
|
|
|
class CmpA {}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'cmp-b',
|
|
|
|
template: 'This is B',
|
|
|
|
})
|
|
|
|
class CmpB {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [CmpA, CmpB],
|
|
|
|
})
|
|
|
|
class Module {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-08-06 08:49:35 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('directives: function () { return [CmpB]; }');
|
|
|
|
});
|
2018-10-30 14:19:10 -04:00
|
|
|
|
2019-07-31 18:20:56 -04:00
|
|
|
it('should wrap setClassMetadata in an iife', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Injectable} from '@angular/core';
|
|
|
|
|
|
|
|
@Injectable({providedIn: 'root'})
|
|
|
|
export class Service {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js').replace(/\s+/g, ' ');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
|
|
|
`/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(Service, [{ type: Injectable, args: [{ providedIn: 'root' }] }], null, null); })();`);
|
|
|
|
});
|
|
|
|
|
2019-11-24 16:44:24 -05:00
|
|
|
it('should not include `schemas` in component and module defs', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Component, NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'comp',
|
|
|
|
template: '<custom-el></custom-el>',
|
|
|
|
schemas: [NO_ERRORS_SCHEMA],
|
|
|
|
})
|
|
|
|
class MyComp {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [MyComp],
|
|
|
|
schemas: [NO_ERRORS_SCHEMA],
|
|
|
|
})
|
|
|
|
class MyModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = trim(env.getContents('test.js'));
|
|
|
|
expect(jsContents).toContain(trim(`
|
|
|
|
MyComp.ɵcmp = i0.ɵɵdefineComponent({
|
|
|
|
type: MyComp,
|
|
|
|
selectors: [["comp"]],
|
|
|
|
decls: 1,
|
|
|
|
vars: 0,
|
|
|
|
template: function MyComp_Template(rf, ctx) {
|
|
|
|
if (rf & 1) {
|
|
|
|
i0.ɵɵelement(0, "custom-el");
|
|
|
|
}
|
|
|
|
},
|
|
|
|
encapsulation: 2
|
|
|
|
});
|
|
|
|
`));
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain(trim('MyModule.ɵmod = i0.ɵɵdefineNgModule({ type: MyModule });'));
|
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should emit setClassMetadata calls for all types', () => {
|
|
|
|
env.write('test.ts', `
|
2018-10-30 14:19:10 -04:00
|
|
|
import {Component, Directive, Injectable, NgModule, Pipe} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({selector: 'cmp', template: 'I am a component!'}) class TestComponent {}
|
|
|
|
@Directive({selector: 'dir'}) class TestDirective {}
|
|
|
|
@Injectable() class TestInjectable {}
|
|
|
|
@NgModule({declarations: [TestComponent, TestDirective]}) class TestNgModule {}
|
|
|
|
@Pipe({name: 'pipe'}) class TestPipe {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('\u0275setClassMetadata(TestComponent, ');
|
|
|
|
expect(jsContents).toContain('\u0275setClassMetadata(TestDirective, ');
|
|
|
|
expect(jsContents).toContain('\u0275setClassMetadata(TestInjectable, ');
|
|
|
|
expect(jsContents).toContain('\u0275setClassMetadata(TestNgModule, ');
|
|
|
|
expect(jsContents).toContain('\u0275setClassMetadata(TestPipe, ');
|
|
|
|
});
|
2018-11-20 11:20:16 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should use imported types in setClassMetadata if they can be represented as values', () => {
|
2019-02-22 21:06:25 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write(`types.ts`, `
|
2019-02-22 21:06:25 -05:00
|
|
|
export class MyTypeA {}
|
|
|
|
export class MyTypeB {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write(`test.ts`, `
|
2019-02-22 21:06:25 -05:00
|
|
|
import {Component, Inject, Injectable} from '@angular/core';
|
|
|
|
import {MyTypeA, MyTypeB} from './types';
|
|
|
|
|
|
|
|
@Injectable({providedIn: 'root'})
|
|
|
|
export class SomeService {
|
|
|
|
constructor(arg: MyTypeA) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'some-comp',
|
|
|
|
template: '...',
|
|
|
|
})
|
|
|
|
export class SomeComp {
|
|
|
|
constructor(@Inject('arg-token') arg: MyTypeB) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = trim(env.getContents('test.js'));
|
|
|
|
expect(jsContents).toContain(`import * as i1 from "./types";`);
|
|
|
|
expect(jsContents).toMatch(setClassMetadataRegExp('type: i1\\.MyTypeA'));
|
|
|
|
expect(jsContents).toMatch(setClassMetadataRegExp('type: i1\\.MyTypeB'));
|
|
|
|
});
|
2019-02-22 21:06:25 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should use imported types in setClassMetadata if they can be represented as values and imported as `* as foo`',
|
|
|
|
() => {
|
2019-02-22 21:06:25 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write(`types.ts`, `
|
2019-02-22 21:06:25 -05:00
|
|
|
export class MyTypeA {}
|
|
|
|
export class MyTypeB {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write(`test.ts`, `
|
2019-02-22 21:06:25 -05:00
|
|
|
import {Component, Inject, Injectable} from '@angular/core';
|
|
|
|
import * as types from './types';
|
|
|
|
|
|
|
|
@Injectable({providedIn: 'root'})
|
|
|
|
export class SomeService {
|
|
|
|
constructor(arg: types.MyTypeA) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'some-comp',
|
|
|
|
template: '...',
|
|
|
|
})
|
|
|
|
export class SomeComp {
|
|
|
|
constructor(@Inject('arg-token') arg: types.MyTypeB) {}
|
|
|
|
}
|
2019-03-04 14:43:55 -05:00
|
|
|
`);
|
2019-02-22 21:06:25 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = trim(env.getContents('test.js'));
|
|
|
|
expect(jsContents).toContain(`import * as i1 from "./types";`);
|
|
|
|
expect(jsContents).toMatch(setClassMetadataRegExp('type: i1.MyTypeA'));
|
|
|
|
expect(jsContents).toMatch(setClassMetadataRegExp('type: i1.MyTypeB'));
|
|
|
|
});
|
2019-02-22 21:06:25 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should use default-imported types if they can be represented as values', () => {
|
2019-03-06 19:35:08 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write(`types.ts`, `
|
2019-03-06 19:35:08 -05:00
|
|
|
export default class Default {}
|
|
|
|
export class Other {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write(`test.ts`, `
|
2019-03-06 19:35:08 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
import {Other} from './types';
|
|
|
|
import Default from './types';
|
2019-03-13 14:30:38 -04:00
|
|
|
|
2019-03-06 19:35:08 -05:00
|
|
|
@Component({selector: 'test', template: 'test'})
|
|
|
|
export class SomeCmp {
|
|
|
|
constructor(arg: Default, other: Other) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = trim(env.getContents('test.js'));
|
|
|
|
expect(jsContents).toContain(`import Default from './types';`);
|
|
|
|
expect(jsContents).toContain(`import * as i1 from "./types";`);
|
|
|
|
expect(jsContents).toContain('i0.ɵɵdirectiveInject(Default)');
|
|
|
|
expect(jsContents).toContain('i0.ɵɵdirectiveInject(i1.Other)');
|
|
|
|
expect(jsContents).toMatch(setClassMetadataRegExp('type: Default'));
|
|
|
|
expect(jsContents).toMatch(setClassMetadataRegExp('type: i1.Other'));
|
|
|
|
});
|
2019-03-06 19:35:08 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should use `undefined` in setClassMetadata if types can\'t be represented as values',
|
|
|
|
() => {
|
2019-02-22 21:06:25 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write(`types.ts`, `
|
2019-02-22 21:06:25 -05:00
|
|
|
export type MyType = Map<any, any>;
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write(`test.ts`, `
|
2019-02-22 21:06:25 -05:00
|
|
|
import {Component, Inject, Injectable} from '@angular/core';
|
|
|
|
import {MyType} from './types';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'some-comp',
|
|
|
|
template: '...',
|
|
|
|
})
|
|
|
|
export class SomeComp {
|
|
|
|
constructor(@Inject('arg-token') arg: MyType) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = trim(env.getContents('test.js'));
|
|
|
|
expect(jsContents).not.toContain(`import { MyType } from './types';`);
|
|
|
|
// Note: `type: undefined` below, since MyType can't be represented as a value
|
|
|
|
expect(jsContents).toMatch(setClassMetadataRegExp('type: undefined'));
|
|
|
|
});
|
2019-02-22 21:06:25 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should not throw in case whitespaces and HTML comments are present inside <ng-content>',
|
|
|
|
() => {
|
|
|
|
env.write('test.ts', `
|
2019-02-19 21:28:00 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'cmp-a',
|
|
|
|
template: \`
|
|
|
|
<ng-content>
|
|
|
|
<!-- Some comments -->
|
|
|
|
</ng-content>
|
|
|
|
\`,
|
|
|
|
})
|
|
|
|
class CmpA {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(errors.length).toBe(0);
|
|
|
|
});
|
2019-02-19 21:28:00 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile a template using multiple directives with the same selector', () => {
|
|
|
|
env.write('test.ts', `
|
2018-11-20 11:20:16 -05:00
|
|
|
import {Component, Directive, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({selector: '[test]'})
|
|
|
|
class DirA {}
|
|
|
|
|
|
|
|
@Directive({selector: '[test]'})
|
|
|
|
class DirB {}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '<div test></div>',
|
|
|
|
})
|
|
|
|
class Cmp {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [Cmp, DirA, DirB],
|
|
|
|
})
|
|
|
|
class Module {}
|
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
2019-01-15 15:32:10 -05:00
|
|
|
`);
|
2018-11-20 11:20:16 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toMatch(/directives: \[DirA,\s+DirB\]/);
|
|
|
|
});
|
2018-12-03 20:13:23 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('cycle detection', () => {
|
|
|
|
it('should detect a simple cycle and use remote component scoping', () => {
|
|
|
|
env.write('test.ts', `
|
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
2019-01-15 15:32:10 -05:00
|
|
|
import {Component, NgModule} from '@angular/core';
|
|
|
|
import {NormalComponent} from './cyclic';
|
2019-02-05 09:47:35 -05:00
|
|
|
|
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
2019-01-15 15:32:10 -05:00
|
|
|
@Component({
|
|
|
|
selector: 'cyclic-component',
|
|
|
|
template: 'Importing this causes a cycle',
|
|
|
|
})
|
|
|
|
export class CyclicComponent {}
|
2019-02-05 09:47:35 -05:00
|
|
|
|
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
2019-01-15 15:32:10 -05:00
|
|
|
@NgModule({
|
|
|
|
declarations: [NormalComponent, CyclicComponent],
|
|
|
|
})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('cyclic.ts', `
|
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
2019-01-15 15:32:10 -05:00
|
|
|
import {Component} from '@angular/core';
|
2019-02-05 09:47:35 -05:00
|
|
|
|
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
2019-01-15 15:32:10 -05:00
|
|
|
@Component({
|
|
|
|
selector: 'normal-component',
|
|
|
|
template: '<cyclic-component></cyclic-component>',
|
|
|
|
})
|
|
|
|
export class NormalComponent {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents)
|
|
|
|
.toMatch(
|
|
|
|
/i\d\.ɵɵsetComponentScope\(NormalComponent,\s+\[NormalComponent,\s+CyclicComponent\],\s+\[\]\)/);
|
|
|
|
expect(jsContents).not.toContain('/*__PURE__*/ i0.ɵɵsetComponentScope');
|
|
|
|
});
|
2019-02-28 14:00:47 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should detect a cycle added entirely during compilation', () => {
|
|
|
|
env.write('test.ts', `
|
2019-02-28 14:00:47 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {ACmp} from './a';
|
|
|
|
import {BCmp} from './b';
|
|
|
|
|
|
|
|
@NgModule({declarations: [ACmp, BCmp]})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('a.ts', `
|
2019-02-28 14:00:47 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'a-cmp',
|
|
|
|
template: '<b-cmp></b-cmp>',
|
|
|
|
})
|
|
|
|
export class ACmp {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('b.ts', `
|
2019-02-28 14:00:47 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'b-cmp',
|
|
|
|
template: '<a-cmp></a-cmp>',
|
|
|
|
})
|
|
|
|
export class BCmp {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const aJsContents = env.getContents('a.js');
|
|
|
|
const bJsContents = env.getContents('b.js');
|
|
|
|
expect(aJsContents).toMatch(/import \* as i\d? from ".\/b"/);
|
|
|
|
expect(bJsContents).not.toMatch(/import \* as i\d? from ".\/a"/);
|
|
|
|
});
|
2019-03-19 16:10:51 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should not detect a potential cycle if it doesn\'t actually happen', () => {
|
|
|
|
env.write('test.ts', `
|
2019-03-19 16:10:51 -04:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {ACmp} from './a';
|
|
|
|
import {BCmp} from './b';
|
|
|
|
|
|
|
|
@NgModule({declarations: [ACmp, BCmp]})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('a.ts', `
|
2019-03-19 16:10:51 -04:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'a-cmp',
|
|
|
|
template: '<b-cmp></b-cmp>',
|
|
|
|
})
|
|
|
|
export class ACmp {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('b.ts', `
|
2019-03-19 16:10:51 -04:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'b-cmp',
|
|
|
|
template: 'does not use a-cmp',
|
|
|
|
})
|
|
|
|
export class BCmp {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).not.toContain('setComponentScope');
|
|
|
|
});
|
2019-03-19 16:10:51 -04:00
|
|
|
});
|
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
2019-01-15 15:32:10 -05:00
|
|
|
|
2019-10-28 18:27:55 -04:00
|
|
|
describe('local refs', () => {
|
|
|
|
it('should not generate an error when a local ref is unresolved' +
|
|
|
|
' (outside of template type-checking)',
|
|
|
|
() => {
|
|
|
|
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Component} from '@angular/core';
|
2019-11-11 12:15:24 -05:00
|
|
|
|
2019-10-28 18:27:55 -04:00
|
|
|
@Component({
|
|
|
|
template: '<div #ref="unknownTarget"></div>',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(0);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('multiple local refs', () => {
|
|
|
|
const getComponentScript = (template: string): string => `
|
2018-12-03 20:13:23 -05:00
|
|
|
import {Component, Directive, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({selector: 'my-cmp', template: \`${template}\`})
|
|
|
|
class Cmp {}
|
|
|
|
|
|
|
|
@NgModule({declarations: [Cmp]})
|
|
|
|
class Module {}
|
|
|
|
`;
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const cases = [
|
|
|
|
`
|
2018-12-03 20:13:23 -05:00
|
|
|
<div #ref></div>
|
|
|
|
<div #ref></div>
|
|
|
|
`,
|
2019-06-06 15:22:32 -04:00
|
|
|
`
|
2018-12-03 20:13:23 -05:00
|
|
|
<ng-container>
|
|
|
|
<div #ref></div>
|
|
|
|
</ng-container>
|
|
|
|
<div #ref></div>
|
2019-02-08 17:11:33 -05:00
|
|
|
`,
|
2019-06-06 15:22:32 -04:00
|
|
|
`
|
2018-12-03 20:13:23 -05:00
|
|
|
<ng-template>
|
|
|
|
<div #ref></div>
|
|
|
|
</ng-template>
|
|
|
|
<div #ref></div>
|
|
|
|
`,
|
2019-06-06 15:22:32 -04:00
|
|
|
`
|
2018-12-03 20:13:23 -05:00
|
|
|
<div *ngIf="visible" #ref></div>
|
|
|
|
<div #ref></div>
|
|
|
|
`,
|
2019-06-06 15:22:32 -04:00
|
|
|
`
|
2018-12-03 20:13:23 -05:00
|
|
|
<div *ngFor="let item of items" #ref></div>
|
|
|
|
<div #ref></div>
|
|
|
|
`
|
2019-06-06 15:22:32 -04:00
|
|
|
];
|
|
|
|
|
|
|
|
cases.forEach(template => {
|
|
|
|
it('should not throw', () => {
|
|
|
|
env.write('test.ts', getComponentScript(template));
|
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(errors.length).toBe(0);
|
|
|
|
});
|
2018-12-03 20:13:23 -05:00
|
|
|
});
|
|
|
|
});
|
2018-12-04 20:20:55 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should wrap "inputs" and "outputs" keys if they contain unsafe characters', () => {
|
|
|
|
env.write(`test.ts`, `
|
2019-03-05 20:55:11 -05:00
|
|
|
import {Directive, Input} from '@angular/core';
|
2019-02-22 00:33:05 -05:00
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[somedir]',
|
2019-06-19 15:28:50 -04:00
|
|
|
inputs: ['track-type', 'track-name', 'inputTrackName', 'src.xl'],
|
|
|
|
outputs: ['output-track-type', 'output-track-name', 'outputTrackName', 'output.event']
|
2019-02-22 00:33:05 -05:00
|
|
|
})
|
2019-03-05 20:55:11 -05:00
|
|
|
export class SomeDir {
|
|
|
|
@Input('track-type') trackType: string;
|
|
|
|
@Input('track-name') trackName: string;
|
|
|
|
}
|
2019-02-22 00:33:05 -05:00
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
const inputsAndOutputs = `
|
2019-03-05 20:55:11 -05:00
|
|
|
inputs: {
|
|
|
|
"track-type": "track-type",
|
|
|
|
"track-name": "track-name",
|
|
|
|
inputTrackName: "inputTrackName",
|
2019-06-19 15:28:50 -04:00
|
|
|
"src.xl": "src.xl",
|
2019-03-05 20:55:11 -05:00
|
|
|
trackType: ["track-type", "trackType"],
|
|
|
|
trackName: ["track-name", "trackName"]
|
|
|
|
},
|
|
|
|
outputs: {
|
|
|
|
"output-track-type": "output-track-type",
|
|
|
|
"output-track-name": "output-track-name",
|
2019-06-19 15:28:50 -04:00
|
|
|
outputTrackName: "outputTrackName",
|
|
|
|
"output.event": "output.event"
|
2019-03-05 20:55:11 -05:00
|
|
|
}
|
2019-02-22 00:33:05 -05:00
|
|
|
`;
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(trim(jsContents)).toContain(trim(inputsAndOutputs));
|
|
|
|
});
|
2019-02-22 00:33:05 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should compile programs with typeRoots', () => {
|
|
|
|
// Write out a custom tsconfig.json that includes 'typeRoots' and 'files'. 'files' is
|
|
|
|
// necessary because otherwise TS picks up the testTypeRoot/test/index.d.ts file into the
|
2019-10-18 15:15:25 -04:00
|
|
|
// program automatically. Shims are also turned on because the shim ts.CompilerHost wrapper
|
|
|
|
// can break typeRoot functionality (which this test is meant to detect).
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('tsconfig.json', `{
|
2018-12-04 20:20:55 -05:00
|
|
|
"extends": "./tsconfig-base.json",
|
|
|
|
"angularCompilerOptions": {
|
2019-10-18 15:15:25 -04:00
|
|
|
"generateNgFactoryShims": true,
|
|
|
|
"generateNgSummaryShims": true,
|
2018-12-04 20:20:55 -05:00
|
|
|
},
|
|
|
|
"compilerOptions": {
|
|
|
|
"typeRoots": ["./testTypeRoot"],
|
|
|
|
},
|
|
|
|
"files": ["./test.ts"]
|
|
|
|
}`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('test.ts', `
|
2018-12-04 20:20:55 -05:00
|
|
|
import {Test} from 'ambient';
|
|
|
|
console.log(Test);
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('testTypeRoot/.exists', '');
|
|
|
|
env.write('testTypeRoot/test/index.d.ts', `
|
2018-12-04 20:20:55 -05:00
|
|
|
declare module 'ambient' {
|
|
|
|
export const Test = 'This is a test';
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2018-12-04 20:20:55 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
// Success is enough to indicate that this passes.
|
|
|
|
});
|
2018-12-04 12:42:44 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('when processing external directives', () => {
|
|
|
|
it('should not emit multiple references to the same directive', () => {
|
|
|
|
env.write('node_modules/external/index.d.ts', `
|
2019-05-17 21:49:21 -04:00
|
|
|
import {ɵɵDirectiveDefWithMeta, ɵɵNgModuleDefWithMeta} from '@angular/core';
|
2019-01-26 06:29:38 -05:00
|
|
|
|
2018-12-18 14:09:21 -05:00
|
|
|
export declare class ExternalDir {
|
2019-10-11 15:28:12 -04:00
|
|
|
static ɵdir: ɵɵDirectiveDefWithMeta<ExternalDir, '[test]', never, never, never, never>;
|
2018-12-18 14:09:21 -05:00
|
|
|
}
|
2019-01-26 06:29:38 -05:00
|
|
|
|
2018-12-18 14:09:21 -05:00
|
|
|
export declare class ExternalModule {
|
2019-10-14 10:20:26 -04:00
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<ExternalModule, [typeof ExternalDir], never, [typeof ExternalDir]>;
|
2018-12-18 14:09:21 -05:00
|
|
|
}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('test.ts', `
|
2018-12-18 14:09:21 -05:00
|
|
|
import {Component, Directive, NgModule} from '@angular/core';
|
|
|
|
import {ExternalModule} from 'external';
|
2019-01-26 06:29:38 -05:00
|
|
|
|
2018-12-18 14:09:21 -05:00
|
|
|
@Component({
|
|
|
|
template: '<div test></div>',
|
|
|
|
})
|
|
|
|
class Cmp {}
|
2019-01-26 06:29:38 -05:00
|
|
|
|
2018-12-18 14:09:21 -05:00
|
|
|
@NgModule({
|
|
|
|
declarations: [Cmp],
|
|
|
|
// Multiple imports of the same module used to result in duplicate directive references
|
|
|
|
// in the output.
|
|
|
|
imports: [ExternalModule, ExternalModule],
|
|
|
|
})
|
|
|
|
class Module {}
|
|
|
|
`);
|
2018-12-04 12:42:44 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toMatch(/directives: \[i1\.ExternalDir\]/);
|
|
|
|
});
|
2018-12-04 12:42:44 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should import directives by their external name', () => {
|
|
|
|
env.write('node_modules/external/index.d.ts', `
|
2019-05-17 21:49:21 -04:00
|
|
|
import {ɵɵDirectiveDefWithMeta, ɵɵNgModuleDefWithMeta} from '@angular/core';
|
2018-12-18 14:09:21 -05:00
|
|
|
import {InternalDir} from './internal';
|
2018-12-04 12:42:44 -05:00
|
|
|
|
2018-12-18 14:09:21 -05:00
|
|
|
export {InternalDir as ExternalDir} from './internal';
|
2018-12-04 12:42:44 -05:00
|
|
|
|
2018-12-18 14:09:21 -05:00
|
|
|
export declare class ExternalModule {
|
2019-10-14 10:20:26 -04:00
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<ExternalModule, [typeof InternalDir], never, [typeof InternalDir]>;
|
2018-12-18 14:09:21 -05:00
|
|
|
}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('node_modules/external/internal.d.ts', `
|
2018-12-04 12:42:44 -05:00
|
|
|
|
2018-12-18 14:09:21 -05:00
|
|
|
export declare class InternalDir {
|
2019-10-11 15:28:12 -04:00
|
|
|
static ɵdir: ɵɵDirectiveDefWithMeta<InternalDir, '[test]', never, never, never, never>;
|
2018-12-18 14:09:21 -05:00
|
|
|
}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('test.ts', `
|
2018-12-18 14:09:21 -05:00
|
|
|
import {Component, Directive, NgModule} from '@angular/core';
|
|
|
|
import {ExternalModule} from 'external';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '<div test></div>',
|
|
|
|
})
|
|
|
|
class Cmp {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [Cmp],
|
|
|
|
imports: [ExternalModule],
|
|
|
|
})
|
|
|
|
class Module {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toMatch(/directives: \[i1\.ExternalDir\]/);
|
2018-12-05 19:05:29 -05:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-01-15 17:46:49 -05:00
|
|
|
// Run checks that are present in preanalysis phase in both sync and async mode, to make sure
|
|
|
|
// the error messages are consistently thrown from `analyzeSync` and `analyzeAsync` functions.
|
|
|
|
['sync', 'async'].forEach(mode => {
|
|
|
|
describe(`preanalysis phase checks [${mode}]`, () => {
|
|
|
|
let driveDiagnostics: () => Promise<ReadonlyArray<ts.Diagnostic>>;
|
|
|
|
beforeEach(() => {
|
|
|
|
if (mode === 'async') {
|
|
|
|
env.enablePreloading();
|
|
|
|
driveDiagnostics = () => env.driveDiagnosticsAsync();
|
|
|
|
} else {
|
|
|
|
driveDiagnostics = () => Promise.resolve(env.driveDiagnostics());
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should throw if @Component is missing a template', async() => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = await driveDiagnostics();
|
|
|
|
expect(diags[0].messageText).toBe('component is missing a template');
|
|
|
|
expect(diags[0].file !.fileName).toBe(absoluteFrom('/test.ts'));
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should throw if `styleUrls` is defined incorrectly in @Component', async() => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '...',
|
|
|
|
styleUrls: '...'
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = await driveDiagnostics();
|
|
|
|
expect(diags[0].messageText).toBe('styleUrls must be an array of strings');
|
|
|
|
expect(diags[0].file !.fileName).toBe(absoluteFrom('/test.ts'));
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('flat module indices', () => {
|
|
|
|
it('should generate a basic flat module index', () => {
|
|
|
|
env.tsconfig({
|
|
|
|
'flatModuleOutFile': 'flat.js',
|
|
|
|
});
|
|
|
|
env.write('test.ts', 'export const TEST = "this is a test";');
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('flat.js');
|
|
|
|
expect(jsContents).toContain('export * from \'./test\';');
|
2019-03-26 18:39:12 -04:00
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should determine the flat module entry-point within multiple root files', () => {
|
|
|
|
env.tsconfig({
|
|
|
|
'flatModuleOutFile': 'flat.js',
|
|
|
|
});
|
|
|
|
env.write('ignored.ts', 'export const TEST = "this is ignored";');
|
|
|
|
env.write('index.ts', 'export const ENTRY = "this is the entry";');
|
2019-03-26 18:39:12 -04:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('flat.js');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
|
|
|
'export * from \'./index\';',
|
|
|
|
'Should detect the "index.ts" file as flat module entry-point.');
|
2018-12-05 19:05:29 -05:00
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should generate a flat module with an id', () => {
|
|
|
|
env.tsconfig({
|
|
|
|
'flatModuleOutFile': 'flat.js',
|
|
|
|
'flatModuleId': '@mymodule',
|
|
|
|
});
|
|
|
|
env.write('test.ts', 'export const TEST = "this is a test";');
|
2018-12-13 14:52:20 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const dtsContents = env.getContents('flat.d.ts');
|
|
|
|
expect(dtsContents).toContain('/// <amd-module name="@mymodule" />');
|
2019-01-12 13:00:39 -05:00
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should generate a proper flat module index file when nested', () => {
|
|
|
|
env.tsconfig({
|
|
|
|
'flatModuleOutFile': './public-api/index.js',
|
|
|
|
});
|
2019-01-12 13:00:39 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('test.ts', `export const SOME_EXPORT = 'some-export'`);
|
|
|
|
env.driveMain();
|
2019-01-12 13:00:39 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(env.getContents('./public-api/index.js')).toContain(`export * from '../test';`);
|
|
|
|
});
|
2018-12-13 14:52:20 -05:00
|
|
|
|
2019-08-21 14:51:24 -04:00
|
|
|
it('should not throw if "flatModuleOutFile" is set to null', () => {
|
|
|
|
env.tsconfig({
|
|
|
|
'flatModuleOutFile': null,
|
|
|
|
});
|
|
|
|
|
|
|
|
env.write('test.ts', `export const SOME_EXPORT = 'some-export'`);
|
|
|
|
// The "driveMain" method automatically ensures that there is no
|
|
|
|
// exception and that the build succeeded.
|
|
|
|
env.driveMain();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not throw or produce flat module index if "flatModuleOutFile" is set to ' +
|
|
|
|
'empty string',
|
|
|
|
() => {
|
|
|
|
env.tsconfig({
|
|
|
|
'flatModuleOutFile': '',
|
|
|
|
});
|
|
|
|
|
|
|
|
env.write('test.ts', `export const SOME_EXPORT = 'some-export'`);
|
|
|
|
// The "driveMain" method automatically ensures that there is no
|
|
|
|
// exception and that the build succeeded.
|
|
|
|
env.driveMain();
|
|
|
|
// Previously ngtsc incorrectly tried generating a flat module index
|
|
|
|
// file if the "flatModuleOutFile" was set to an empty string. ngtsc
|
|
|
|
// just wrote the bundle file with an empty filename (just extension).
|
|
|
|
env.assertDoesNotExist('.js');
|
|
|
|
env.assertDoesNotExist('.d.ts');
|
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should report an error when a flat module index is requested but no entrypoint can be determined',
|
|
|
|
() => {
|
|
|
|
env.tsconfig({'flatModuleOutFile': 'flat.js'});
|
|
|
|
env.write('test.ts', 'export class Foo {}');
|
|
|
|
env.write('test2.ts', 'export class Bar {}');
|
2018-12-13 14:52:20 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(errors.length).toBe(1);
|
|
|
|
expect(errors[0].messageText)
|
|
|
|
.toBe(
|
|
|
|
'Angular compiler option "flatModuleOutFile" requires one and only one .ts file in the "files" field.');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should report an error when a visible directive is not exported', () => {
|
|
|
|
env.tsconfig({'flatModuleOutFile': 'flat.js'});
|
|
|
|
env.write('test.ts', `
|
2018-12-13 14:52:20 -05:00
|
|
|
import {Directive, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
// The directive is not exported.
|
|
|
|
@Directive({selector: 'test'})
|
|
|
|
class Dir {}
|
|
|
|
|
|
|
|
// The module is, which makes the directive visible.
|
|
|
|
@NgModule({declarations: [Dir], exports: [Dir]})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(errors.length).toBe(1);
|
|
|
|
expect(errors[0].messageText)
|
|
|
|
.toBe(
|
|
|
|
'Unsupported private class Dir. This class is visible ' +
|
|
|
|
'to consumers via Module -> Dir, but is not exported from the top-level library ' +
|
|
|
|
'entrypoint.');
|
|
|
|
|
|
|
|
// Verify that the error is for the correct class.
|
2019-04-27 18:26:13 -04:00
|
|
|
const error = errors[0] as ts.Diagnostic;
|
|
|
|
const id = expectTokenAtPosition(error.file !, error.start !, ts.isIdentifier);
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(id.text).toBe('Dir');
|
|
|
|
expect(ts.isClassDeclaration(id.parent)).toBe(true);
|
|
|
|
});
|
2018-12-13 14:52:20 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should report an error when a deeply visible directive is not exported', () => {
|
|
|
|
env.tsconfig({'flatModuleOutFile': 'flat.js'});
|
|
|
|
env.write('test.ts', `
|
2018-12-13 14:52:20 -05:00
|
|
|
import {Directive, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
// The directive is not exported.
|
|
|
|
@Directive({selector: 'test'})
|
|
|
|
class Dir {}
|
|
|
|
|
|
|
|
// Neither is the module which declares it - meaning the directive is not visible here.
|
|
|
|
@NgModule({declarations: [Dir], exports: [Dir]})
|
|
|
|
class DirModule {}
|
|
|
|
|
|
|
|
// The module is, which makes the directive visible.
|
|
|
|
@NgModule({exports: [DirModule]})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(errors.length).toBe(2);
|
|
|
|
expect(errors[0].messageText)
|
|
|
|
.toBe(
|
|
|
|
'Unsupported private class DirModule. This class is ' +
|
|
|
|
'visible to consumers via Module -> DirModule, but is not exported from the top-level ' +
|
|
|
|
'library entrypoint.');
|
|
|
|
expect(errors[1].messageText)
|
|
|
|
.toBe(
|
|
|
|
'Unsupported private class Dir. This class is visible ' +
|
|
|
|
'to consumers via Module -> DirModule -> Dir, but is not exported from the top-level ' +
|
|
|
|
'library entrypoint.');
|
|
|
|
});
|
2018-12-13 14:52:20 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should report an error when a deeply visible module is not exported', () => {
|
|
|
|
env.tsconfig({'flatModuleOutFile': 'flat.js'});
|
|
|
|
env.write('test.ts', `
|
2018-12-13 14:52:20 -05:00
|
|
|
import {Directive, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
// The directive is exported.
|
|
|
|
@Directive({selector: 'test'})
|
|
|
|
export class Dir {}
|
|
|
|
|
|
|
|
// The module which declares it is not.
|
|
|
|
@NgModule({declarations: [Dir], exports: [Dir]})
|
|
|
|
class DirModule {}
|
|
|
|
|
|
|
|
// The module is, which makes the module and directive visible.
|
|
|
|
@NgModule({exports: [DirModule]})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(errors.length).toBe(1);
|
|
|
|
expect(errors[0].messageText)
|
|
|
|
.toBe(
|
|
|
|
'Unsupported private class DirModule. This class is ' +
|
|
|
|
'visible to consumers via Module -> DirModule, but is not exported from the top-level ' +
|
|
|
|
'library entrypoint.');
|
|
|
|
});
|
2018-12-13 14:52:20 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should not report an error when a non-exported module is imported by a visible one',
|
|
|
|
() => {
|
|
|
|
env.tsconfig({'flatModuleOutFile': 'flat.js'});
|
|
|
|
env.write('test.ts', `
|
2018-12-13 14:52:20 -05:00
|
|
|
import {Directive, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
// The directive is not exported.
|
|
|
|
@Directive({selector: 'test'})
|
|
|
|
class Dir {}
|
|
|
|
|
|
|
|
// Neither is the module which declares it.
|
|
|
|
@NgModule({declarations: [Dir], exports: [Dir]})
|
|
|
|
class DirModule {}
|
|
|
|
|
|
|
|
// This module is, but it doesn't re-export the module, so it doesn't make the module and
|
|
|
|
// directive visible.
|
|
|
|
@NgModule({imports: [DirModule]})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(errors.length).toBe(0);
|
|
|
|
});
|
2018-12-13 14:52:20 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should not report an error when re-exporting an external symbol', () => {
|
|
|
|
env.tsconfig({'flatModuleOutFile': 'flat.js'});
|
|
|
|
env.write('test.ts', `
|
2018-12-13 14:52:20 -05:00
|
|
|
import {Directive, NgModule} from '@angular/core';
|
|
|
|
import {ExternalModule} from 'external';
|
|
|
|
|
|
|
|
// This module makes ExternalModule and ExternalDir visible.
|
|
|
|
@NgModule({exports: [ExternalModule]})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('node_modules/external/index.d.ts', `
|
2019-05-17 21:49:21 -04:00
|
|
|
import {ɵɵDirectiveDefWithMeta, ɵɵNgModuleDefWithMeta} from '@angular/core';
|
2018-12-13 14:52:20 -05:00
|
|
|
|
|
|
|
export declare class ExternalDir {
|
2019-10-11 15:28:12 -04:00
|
|
|
static ɵdir: ɵɵDirectiveDefWithMeta<ExternalDir, '[test]', never, never, never, never>;
|
2018-12-13 14:52:20 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
export declare class ExternalModule {
|
2019-10-14 10:20:26 -04:00
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<ExternalModule, [typeof ExternalDir], never, [typeof ExternalDir]>;
|
2018-12-13 14:52:20 -05:00
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const errors = env.driveDiagnostics();
|
|
|
|
expect(errors.length).toBe(0);
|
|
|
|
});
|
2018-12-13 14:52:20 -05:00
|
|
|
});
|
2019-01-03 05:23:00 -05:00
|
|
|
|
feat(ivy): enable re-export of the compilation scope of NgModules privately (#33177)
This commit refactors the aliasing system to support multiple different
AliasingHost implementations, which control specific aliasing behavior
in ngtsc (see the README.md).
A new host is introduced, the `PrivateExportAliasingHost`. This solves a
longstanding problem in ngtsc regarding support for "monorepo" style private
libraries. These are libraries which are compiled separately from the main
application, and depended upon through TypeScript path mappings. Such
libraries are frequently not in the Angular Package Format and do not have
entrypoints, but rather make use of deep import style module specifiers.
This can cause issues with ngtsc's ability to import a directive given the
module specifier of its NgModule.
For example, if the application uses a directive `Foo` from such a library
`foo`, the user might write:
```typescript
import {FooModule} from 'foo/module';
```
In this case, foo/module.d.ts is path-mapped into the program. Ordinarily
the compiler would see this as an absolute module specifier, and assume that
the `Foo` directive can be imported from the same specifier. For such non-
APF libraries, this assumption fails. Really `Foo` should be imported from
the file which declares it, but there are two problems with this:
1. The compiler would have to reverse the path mapping in order to determine
a path-mapped path to the file (maybe foo/dir.d.ts).
2. There is no guarantee that the file containing the directive is path-
mapped in the program at all.
The compiler would effectively have to "guess" 'foo/dir' as a module
specifier, which may or may not be accurate depending on how the library and
path mapping are set up.
It's strongly desirable that the compiler not break its current invariant
that the module specifier given by the user for the NgModule is always the
module specifier from which directives/pipes are imported. Thus, for any
given NgModule from a particular module specifier, it must always be
possible to import any directives/pipes from the same specifier, no matter
how it's packaged.
To make this possible, when compiling a file containing an NgModule, ngtsc
will automatically add re-exports for any directives/pipes not yet exported
by the user, with a name of the form: ɵngExportɵModuleNameɵDirectiveName
This has several effects:
1. It guarantees anyone depending on the NgModule will be able to import its
directives/pipes from the same specifier.
2. It maintains a stable name for the exported symbol that is safe to depend
on from code on NPM. Effectively, this private exported name will be a
part of the package's .d.ts API, and cannot be changed in a non-breaking
fashion.
Fixes #29361
FW-1610 #resolve
PR Close #33177
2019-10-14 15:03:29 -04:00
|
|
|
describe('aliasing re-exports', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
env.tsconfig({
|
|
|
|
'generateDeepReexports': true,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should re-export a directive from a different file under a private symbol name', () => {
|
|
|
|
env.write('dir.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: 'dir',
|
|
|
|
})
|
|
|
|
export class Dir {}
|
|
|
|
`);
|
|
|
|
env.write('module.ts', `
|
|
|
|
import {Directive, NgModule} from '@angular/core';
|
|
|
|
import {Dir} from './dir';
|
|
|
|
|
|
|
|
@Directive({selector: '[inline]'})
|
|
|
|
export class InlineDir {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [Dir, InlineDir],
|
|
|
|
exports: [Dir, InlineDir],
|
|
|
|
})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('module.js');
|
|
|
|
const dtsContents = env.getContents('module.d.ts');
|
|
|
|
|
|
|
|
expect(jsContents).toContain('export { Dir as ɵngExportɵModuleɵDir } from "./dir";');
|
|
|
|
expect(jsContents).not.toContain('ɵngExportɵModuleɵInlineDir');
|
|
|
|
expect(dtsContents).toContain('export { Dir as ɵngExportɵModuleɵDir } from "./dir";');
|
|
|
|
expect(dtsContents).not.toContain('ɵngExportɵModuleɵInlineDir');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should re-export a directive from an exported NgModule under a private symbol name',
|
|
|
|
() => {
|
|
|
|
env.write('dir.ts', `
|
|
|
|
import {Directive, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: 'dir',
|
|
|
|
})
|
|
|
|
export class Dir {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [Dir],
|
|
|
|
exports: [Dir],
|
|
|
|
})
|
|
|
|
export class DirModule {}
|
|
|
|
`);
|
|
|
|
env.write('module.ts', `
|
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {DirModule} from './dir';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
exports: [DirModule],
|
|
|
|
})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('module.js');
|
|
|
|
const dtsContents = env.getContents('module.d.ts');
|
|
|
|
|
|
|
|
expect(jsContents).toContain('export { Dir as ɵngExportɵModuleɵDir } from "./dir";');
|
|
|
|
expect(dtsContents).toContain('export { Dir as ɵngExportɵModuleɵDir } from "./dir";');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not re-export a directive that\'s not exported from the NgModule', () => {
|
|
|
|
env.write('dir.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
2019-10-25 13:45:08 -04:00
|
|
|
|
feat(ivy): enable re-export of the compilation scope of NgModules privately (#33177)
This commit refactors the aliasing system to support multiple different
AliasingHost implementations, which control specific aliasing behavior
in ngtsc (see the README.md).
A new host is introduced, the `PrivateExportAliasingHost`. This solves a
longstanding problem in ngtsc regarding support for "monorepo" style private
libraries. These are libraries which are compiled separately from the main
application, and depended upon through TypeScript path mappings. Such
libraries are frequently not in the Angular Package Format and do not have
entrypoints, but rather make use of deep import style module specifiers.
This can cause issues with ngtsc's ability to import a directive given the
module specifier of its NgModule.
For example, if the application uses a directive `Foo` from such a library
`foo`, the user might write:
```typescript
import {FooModule} from 'foo/module';
```
In this case, foo/module.d.ts is path-mapped into the program. Ordinarily
the compiler would see this as an absolute module specifier, and assume that
the `Foo` directive can be imported from the same specifier. For such non-
APF libraries, this assumption fails. Really `Foo` should be imported from
the file which declares it, but there are two problems with this:
1. The compiler would have to reverse the path mapping in order to determine
a path-mapped path to the file (maybe foo/dir.d.ts).
2. There is no guarantee that the file containing the directive is path-
mapped in the program at all.
The compiler would effectively have to "guess" 'foo/dir' as a module
specifier, which may or may not be accurate depending on how the library and
path mapping are set up.
It's strongly desirable that the compiler not break its current invariant
that the module specifier given by the user for the NgModule is always the
module specifier from which directives/pipes are imported. Thus, for any
given NgModule from a particular module specifier, it must always be
possible to import any directives/pipes from the same specifier, no matter
how it's packaged.
To make this possible, when compiling a file containing an NgModule, ngtsc
will automatically add re-exports for any directives/pipes not yet exported
by the user, with a name of the form: ɵngExportɵModuleNameɵDirectiveName
This has several effects:
1. It guarantees anyone depending on the NgModule will be able to import its
directives/pipes from the same specifier.
2. It maintains a stable name for the exported symbol that is safe to depend
on from code on NPM. Effectively, this private exported name will be a
part of the package's .d.ts API, and cannot be changed in a non-breaking
fashion.
Fixes #29361
FW-1610 #resolve
PR Close #33177
2019-10-14 15:03:29 -04:00
|
|
|
@Directive({
|
|
|
|
selector: 'dir',
|
|
|
|
})
|
|
|
|
export class Dir {}
|
|
|
|
`);
|
|
|
|
env.write('module.ts', `
|
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {Dir} from './dir';
|
2019-10-25 13:45:08 -04:00
|
|
|
|
feat(ivy): enable re-export of the compilation scope of NgModules privately (#33177)
This commit refactors the aliasing system to support multiple different
AliasingHost implementations, which control specific aliasing behavior
in ngtsc (see the README.md).
A new host is introduced, the `PrivateExportAliasingHost`. This solves a
longstanding problem in ngtsc regarding support for "monorepo" style private
libraries. These are libraries which are compiled separately from the main
application, and depended upon through TypeScript path mappings. Such
libraries are frequently not in the Angular Package Format and do not have
entrypoints, but rather make use of deep import style module specifiers.
This can cause issues with ngtsc's ability to import a directive given the
module specifier of its NgModule.
For example, if the application uses a directive `Foo` from such a library
`foo`, the user might write:
```typescript
import {FooModule} from 'foo/module';
```
In this case, foo/module.d.ts is path-mapped into the program. Ordinarily
the compiler would see this as an absolute module specifier, and assume that
the `Foo` directive can be imported from the same specifier. For such non-
APF libraries, this assumption fails. Really `Foo` should be imported from
the file which declares it, but there are two problems with this:
1. The compiler would have to reverse the path mapping in order to determine
a path-mapped path to the file (maybe foo/dir.d.ts).
2. There is no guarantee that the file containing the directive is path-
mapped in the program at all.
The compiler would effectively have to "guess" 'foo/dir' as a module
specifier, which may or may not be accurate depending on how the library and
path mapping are set up.
It's strongly desirable that the compiler not break its current invariant
that the module specifier given by the user for the NgModule is always the
module specifier from which directives/pipes are imported. Thus, for any
given NgModule from a particular module specifier, it must always be
possible to import any directives/pipes from the same specifier, no matter
how it's packaged.
To make this possible, when compiling a file containing an NgModule, ngtsc
will automatically add re-exports for any directives/pipes not yet exported
by the user, with a name of the form: ɵngExportɵModuleNameɵDirectiveName
This has several effects:
1. It guarantees anyone depending on the NgModule will be able to import its
directives/pipes from the same specifier.
2. It maintains a stable name for the exported symbol that is safe to depend
on from code on NPM. Effectively, this private exported name will be a
part of the package's .d.ts API, and cannot be changed in a non-breaking
fashion.
Fixes #29361
FW-1610 #resolve
PR Close #33177
2019-10-14 15:03:29 -04:00
|
|
|
@NgModule({
|
|
|
|
declarations: [Dir],
|
|
|
|
exports: [],
|
|
|
|
})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('module.js');
|
|
|
|
const dtsContents = env.getContents('module.d.ts');
|
|
|
|
|
|
|
|
expect(jsContents).not.toContain('ɵngExportɵModuleɵDir');
|
|
|
|
expect(dtsContents).not.toContain('ɵngExportɵModuleɵDir');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not re-export a directive that\'s already exported', () => {
|
|
|
|
env.write('dir.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: 'dir',
|
|
|
|
})
|
|
|
|
export class Dir {}
|
|
|
|
`);
|
|
|
|
env.write('module.ts', `
|
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {Dir} from './dir';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [Dir],
|
|
|
|
exports: [Dir],
|
|
|
|
})
|
|
|
|
export class Module {}
|
|
|
|
|
|
|
|
export {Dir};
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('module.js');
|
|
|
|
const dtsContents = env.getContents('module.d.ts');
|
|
|
|
|
|
|
|
expect(jsContents).not.toContain('ɵngExportɵModuleɵDir');
|
|
|
|
expect(dtsContents).not.toContain('ɵngExportɵModuleɵDir');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not re-export a directive from an exported, external NgModule', () => {
|
|
|
|
env.write(`node_modules/external/index.d.ts`, `
|
|
|
|
import {ɵɵDirectiveDefWithMeta, ɵɵNgModuleDefWithMeta} from '@angular/core';
|
2019-10-25 13:45:08 -04:00
|
|
|
|
feat(ivy): enable re-export of the compilation scope of NgModules privately (#33177)
This commit refactors the aliasing system to support multiple different
AliasingHost implementations, which control specific aliasing behavior
in ngtsc (see the README.md).
A new host is introduced, the `PrivateExportAliasingHost`. This solves a
longstanding problem in ngtsc regarding support for "monorepo" style private
libraries. These are libraries which are compiled separately from the main
application, and depended upon through TypeScript path mappings. Such
libraries are frequently not in the Angular Package Format and do not have
entrypoints, but rather make use of deep import style module specifiers.
This can cause issues with ngtsc's ability to import a directive given the
module specifier of its NgModule.
For example, if the application uses a directive `Foo` from such a library
`foo`, the user might write:
```typescript
import {FooModule} from 'foo/module';
```
In this case, foo/module.d.ts is path-mapped into the program. Ordinarily
the compiler would see this as an absolute module specifier, and assume that
the `Foo` directive can be imported from the same specifier. For such non-
APF libraries, this assumption fails. Really `Foo` should be imported from
the file which declares it, but there are two problems with this:
1. The compiler would have to reverse the path mapping in order to determine
a path-mapped path to the file (maybe foo/dir.d.ts).
2. There is no guarantee that the file containing the directive is path-
mapped in the program at all.
The compiler would effectively have to "guess" 'foo/dir' as a module
specifier, which may or may not be accurate depending on how the library and
path mapping are set up.
It's strongly desirable that the compiler not break its current invariant
that the module specifier given by the user for the NgModule is always the
module specifier from which directives/pipes are imported. Thus, for any
given NgModule from a particular module specifier, it must always be
possible to import any directives/pipes from the same specifier, no matter
how it's packaged.
To make this possible, when compiling a file containing an NgModule, ngtsc
will automatically add re-exports for any directives/pipes not yet exported
by the user, with a name of the form: ɵngExportɵModuleNameɵDirectiveName
This has several effects:
1. It guarantees anyone depending on the NgModule will be able to import its
directives/pipes from the same specifier.
2. It maintains a stable name for the exported symbol that is safe to depend
on from code on NPM. Effectively, this private exported name will be a
part of the package's .d.ts API, and cannot be changed in a non-breaking
fashion.
Fixes #29361
FW-1610 #resolve
PR Close #33177
2019-10-14 15:03:29 -04:00
|
|
|
export declare class ExternalDir {
|
|
|
|
static ɵdir: ɵɵDirectiveDefWithMeta<ExternalDir, '[test]', never, never, never, never>;
|
|
|
|
}
|
2019-10-25 13:45:08 -04:00
|
|
|
|
feat(ivy): enable re-export of the compilation scope of NgModules privately (#33177)
This commit refactors the aliasing system to support multiple different
AliasingHost implementations, which control specific aliasing behavior
in ngtsc (see the README.md).
A new host is introduced, the `PrivateExportAliasingHost`. This solves a
longstanding problem in ngtsc regarding support for "monorepo" style private
libraries. These are libraries which are compiled separately from the main
application, and depended upon through TypeScript path mappings. Such
libraries are frequently not in the Angular Package Format and do not have
entrypoints, but rather make use of deep import style module specifiers.
This can cause issues with ngtsc's ability to import a directive given the
module specifier of its NgModule.
For example, if the application uses a directive `Foo` from such a library
`foo`, the user might write:
```typescript
import {FooModule} from 'foo/module';
```
In this case, foo/module.d.ts is path-mapped into the program. Ordinarily
the compiler would see this as an absolute module specifier, and assume that
the `Foo` directive can be imported from the same specifier. For such non-
APF libraries, this assumption fails. Really `Foo` should be imported from
the file which declares it, but there are two problems with this:
1. The compiler would have to reverse the path mapping in order to determine
a path-mapped path to the file (maybe foo/dir.d.ts).
2. There is no guarantee that the file containing the directive is path-
mapped in the program at all.
The compiler would effectively have to "guess" 'foo/dir' as a module
specifier, which may or may not be accurate depending on how the library and
path mapping are set up.
It's strongly desirable that the compiler not break its current invariant
that the module specifier given by the user for the NgModule is always the
module specifier from which directives/pipes are imported. Thus, for any
given NgModule from a particular module specifier, it must always be
possible to import any directives/pipes from the same specifier, no matter
how it's packaged.
To make this possible, when compiling a file containing an NgModule, ngtsc
will automatically add re-exports for any directives/pipes not yet exported
by the user, with a name of the form: ɵngExportɵModuleNameɵDirectiveName
This has several effects:
1. It guarantees anyone depending on the NgModule will be able to import its
directives/pipes from the same specifier.
2. It maintains a stable name for the exported symbol that is safe to depend
on from code on NPM. Effectively, this private exported name will be a
part of the package's .d.ts API, and cannot be changed in a non-breaking
fashion.
Fixes #29361
FW-1610 #resolve
PR Close #33177
2019-10-14 15:03:29 -04:00
|
|
|
export declare class ExternalModule {
|
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<ExternalModule, [typeof ExternalDir], never, [typeof ExternalDir]>;
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
env.write('module.ts', `
|
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {ExternalModule} from 'external';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
exports: [ExternalModule],
|
|
|
|
})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('module.js');
|
|
|
|
|
|
|
|
expect(jsContents).not.toContain('ɵngExportɵExternalModuleɵExternalDir');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should error when two directives with the same declared name are exported from the same NgModule',
|
|
|
|
() => {
|
|
|
|
env.write('dir.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: 'dir',
|
|
|
|
})
|
|
|
|
export class Dir {}
|
|
|
|
`);
|
|
|
|
env.write('dir2.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: 'dir',
|
|
|
|
})
|
|
|
|
export class Dir {}
|
|
|
|
`);
|
|
|
|
env.write('module.ts', `
|
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {Dir} from './dir';
|
|
|
|
import {Dir as Dir2} from './dir2';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [Dir, Dir2],
|
|
|
|
exports: [Dir, Dir2],
|
|
|
|
})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diag = env.driveDiagnostics();
|
|
|
|
expect(diag.length).toBe(1);
|
|
|
|
expect(diag[0] !.code).toEqual(ngErrorCode(ErrorCode.NGMODULE_REEXPORT_NAME_COLLISION));
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not error when two directives with the same declared name are exported from the same NgModule, but one is exported from the file directly',
|
|
|
|
() => {
|
|
|
|
env.write('dir.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
2019-10-25 13:45:08 -04:00
|
|
|
|
feat(ivy): enable re-export of the compilation scope of NgModules privately (#33177)
This commit refactors the aliasing system to support multiple different
AliasingHost implementations, which control specific aliasing behavior
in ngtsc (see the README.md).
A new host is introduced, the `PrivateExportAliasingHost`. This solves a
longstanding problem in ngtsc regarding support for "monorepo" style private
libraries. These are libraries which are compiled separately from the main
application, and depended upon through TypeScript path mappings. Such
libraries are frequently not in the Angular Package Format and do not have
entrypoints, but rather make use of deep import style module specifiers.
This can cause issues with ngtsc's ability to import a directive given the
module specifier of its NgModule.
For example, if the application uses a directive `Foo` from such a library
`foo`, the user might write:
```typescript
import {FooModule} from 'foo/module';
```
In this case, foo/module.d.ts is path-mapped into the program. Ordinarily
the compiler would see this as an absolute module specifier, and assume that
the `Foo` directive can be imported from the same specifier. For such non-
APF libraries, this assumption fails. Really `Foo` should be imported from
the file which declares it, but there are two problems with this:
1. The compiler would have to reverse the path mapping in order to determine
a path-mapped path to the file (maybe foo/dir.d.ts).
2. There is no guarantee that the file containing the directive is path-
mapped in the program at all.
The compiler would effectively have to "guess" 'foo/dir' as a module
specifier, which may or may not be accurate depending on how the library and
path mapping are set up.
It's strongly desirable that the compiler not break its current invariant
that the module specifier given by the user for the NgModule is always the
module specifier from which directives/pipes are imported. Thus, for any
given NgModule from a particular module specifier, it must always be
possible to import any directives/pipes from the same specifier, no matter
how it's packaged.
To make this possible, when compiling a file containing an NgModule, ngtsc
will automatically add re-exports for any directives/pipes not yet exported
by the user, with a name of the form: ɵngExportɵModuleNameɵDirectiveName
This has several effects:
1. It guarantees anyone depending on the NgModule will be able to import its
directives/pipes from the same specifier.
2. It maintains a stable name for the exported symbol that is safe to depend
on from code on NPM. Effectively, this private exported name will be a
part of the package's .d.ts API, and cannot be changed in a non-breaking
fashion.
Fixes #29361
FW-1610 #resolve
PR Close #33177
2019-10-14 15:03:29 -04:00
|
|
|
@Directive({
|
|
|
|
selector: 'dir',
|
|
|
|
})
|
|
|
|
export class Dir {}
|
|
|
|
`);
|
|
|
|
env.write('dir2.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
2019-10-25 13:45:08 -04:00
|
|
|
|
feat(ivy): enable re-export of the compilation scope of NgModules privately (#33177)
This commit refactors the aliasing system to support multiple different
AliasingHost implementations, which control specific aliasing behavior
in ngtsc (see the README.md).
A new host is introduced, the `PrivateExportAliasingHost`. This solves a
longstanding problem in ngtsc regarding support for "monorepo" style private
libraries. These are libraries which are compiled separately from the main
application, and depended upon through TypeScript path mappings. Such
libraries are frequently not in the Angular Package Format and do not have
entrypoints, but rather make use of deep import style module specifiers.
This can cause issues with ngtsc's ability to import a directive given the
module specifier of its NgModule.
For example, if the application uses a directive `Foo` from such a library
`foo`, the user might write:
```typescript
import {FooModule} from 'foo/module';
```
In this case, foo/module.d.ts is path-mapped into the program. Ordinarily
the compiler would see this as an absolute module specifier, and assume that
the `Foo` directive can be imported from the same specifier. For such non-
APF libraries, this assumption fails. Really `Foo` should be imported from
the file which declares it, but there are two problems with this:
1. The compiler would have to reverse the path mapping in order to determine
a path-mapped path to the file (maybe foo/dir.d.ts).
2. There is no guarantee that the file containing the directive is path-
mapped in the program at all.
The compiler would effectively have to "guess" 'foo/dir' as a module
specifier, which may or may not be accurate depending on how the library and
path mapping are set up.
It's strongly desirable that the compiler not break its current invariant
that the module specifier given by the user for the NgModule is always the
module specifier from which directives/pipes are imported. Thus, for any
given NgModule from a particular module specifier, it must always be
possible to import any directives/pipes from the same specifier, no matter
how it's packaged.
To make this possible, when compiling a file containing an NgModule, ngtsc
will automatically add re-exports for any directives/pipes not yet exported
by the user, with a name of the form: ɵngExportɵModuleNameɵDirectiveName
This has several effects:
1. It guarantees anyone depending on the NgModule will be able to import its
directives/pipes from the same specifier.
2. It maintains a stable name for the exported symbol that is safe to depend
on from code on NPM. Effectively, this private exported name will be a
part of the package's .d.ts API, and cannot be changed in a non-breaking
fashion.
Fixes #29361
FW-1610 #resolve
PR Close #33177
2019-10-14 15:03:29 -04:00
|
|
|
@Directive({
|
|
|
|
selector: 'dir',
|
|
|
|
})
|
|
|
|
export class Dir {}
|
|
|
|
`);
|
|
|
|
env.write('module.ts', `
|
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {Dir} from './dir';
|
|
|
|
import {Dir as Dir2} from './dir2';
|
2019-10-25 13:45:08 -04:00
|
|
|
|
feat(ivy): enable re-export of the compilation scope of NgModules privately (#33177)
This commit refactors the aliasing system to support multiple different
AliasingHost implementations, which control specific aliasing behavior
in ngtsc (see the README.md).
A new host is introduced, the `PrivateExportAliasingHost`. This solves a
longstanding problem in ngtsc regarding support for "monorepo" style private
libraries. These are libraries which are compiled separately from the main
application, and depended upon through TypeScript path mappings. Such
libraries are frequently not in the Angular Package Format and do not have
entrypoints, but rather make use of deep import style module specifiers.
This can cause issues with ngtsc's ability to import a directive given the
module specifier of its NgModule.
For example, if the application uses a directive `Foo` from such a library
`foo`, the user might write:
```typescript
import {FooModule} from 'foo/module';
```
In this case, foo/module.d.ts is path-mapped into the program. Ordinarily
the compiler would see this as an absolute module specifier, and assume that
the `Foo` directive can be imported from the same specifier. For such non-
APF libraries, this assumption fails. Really `Foo` should be imported from
the file which declares it, but there are two problems with this:
1. The compiler would have to reverse the path mapping in order to determine
a path-mapped path to the file (maybe foo/dir.d.ts).
2. There is no guarantee that the file containing the directive is path-
mapped in the program at all.
The compiler would effectively have to "guess" 'foo/dir' as a module
specifier, which may or may not be accurate depending on how the library and
path mapping are set up.
It's strongly desirable that the compiler not break its current invariant
that the module specifier given by the user for the NgModule is always the
module specifier from which directives/pipes are imported. Thus, for any
given NgModule from a particular module specifier, it must always be
possible to import any directives/pipes from the same specifier, no matter
how it's packaged.
To make this possible, when compiling a file containing an NgModule, ngtsc
will automatically add re-exports for any directives/pipes not yet exported
by the user, with a name of the form: ɵngExportɵModuleNameɵDirectiveName
This has several effects:
1. It guarantees anyone depending on the NgModule will be able to import its
directives/pipes from the same specifier.
2. It maintains a stable name for the exported symbol that is safe to depend
on from code on NPM. Effectively, this private exported name will be a
part of the package's .d.ts API, and cannot be changed in a non-breaking
fashion.
Fixes #29361
FW-1610 #resolve
PR Close #33177
2019-10-14 15:03:29 -04:00
|
|
|
@NgModule({
|
|
|
|
declarations: [Dir, Dir2],
|
|
|
|
exports: [Dir, Dir2],
|
|
|
|
})
|
|
|
|
export class Module {}
|
|
|
|
|
|
|
|
export {Dir} from './dir2';
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('module.js');
|
|
|
|
expect(jsContents).toContain('export { Dir as ɵngExportɵModuleɵDir } from "./dir";');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should choose a re-exported symbol if one is present', () => {
|
|
|
|
env.write(`node_modules/external/dir.d.ts`, `
|
|
|
|
import {ɵɵDirectiveDefWithMeta} from '@angular/core';
|
2019-10-25 13:45:08 -04:00
|
|
|
|
feat(ivy): enable re-export of the compilation scope of NgModules privately (#33177)
This commit refactors the aliasing system to support multiple different
AliasingHost implementations, which control specific aliasing behavior
in ngtsc (see the README.md).
A new host is introduced, the `PrivateExportAliasingHost`. This solves a
longstanding problem in ngtsc regarding support for "monorepo" style private
libraries. These are libraries which are compiled separately from the main
application, and depended upon through TypeScript path mappings. Such
libraries are frequently not in the Angular Package Format and do not have
entrypoints, but rather make use of deep import style module specifiers.
This can cause issues with ngtsc's ability to import a directive given the
module specifier of its NgModule.
For example, if the application uses a directive `Foo` from such a library
`foo`, the user might write:
```typescript
import {FooModule} from 'foo/module';
```
In this case, foo/module.d.ts is path-mapped into the program. Ordinarily
the compiler would see this as an absolute module specifier, and assume that
the `Foo` directive can be imported from the same specifier. For such non-
APF libraries, this assumption fails. Really `Foo` should be imported from
the file which declares it, but there are two problems with this:
1. The compiler would have to reverse the path mapping in order to determine
a path-mapped path to the file (maybe foo/dir.d.ts).
2. There is no guarantee that the file containing the directive is path-
mapped in the program at all.
The compiler would effectively have to "guess" 'foo/dir' as a module
specifier, which may or may not be accurate depending on how the library and
path mapping are set up.
It's strongly desirable that the compiler not break its current invariant
that the module specifier given by the user for the NgModule is always the
module specifier from which directives/pipes are imported. Thus, for any
given NgModule from a particular module specifier, it must always be
possible to import any directives/pipes from the same specifier, no matter
how it's packaged.
To make this possible, when compiling a file containing an NgModule, ngtsc
will automatically add re-exports for any directives/pipes not yet exported
by the user, with a name of the form: ɵngExportɵModuleNameɵDirectiveName
This has several effects:
1. It guarantees anyone depending on the NgModule will be able to import its
directives/pipes from the same specifier.
2. It maintains a stable name for the exported symbol that is safe to depend
on from code on NPM. Effectively, this private exported name will be a
part of the package's .d.ts API, and cannot be changed in a non-breaking
fashion.
Fixes #29361
FW-1610 #resolve
PR Close #33177
2019-10-14 15:03:29 -04:00
|
|
|
export declare class ExternalDir {
|
|
|
|
static ɵdir: ɵɵDirectiveDefWithMeta<ExternalDir, '[test]', never, never, never, never>;
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
env.write('node_modules/external/module.d.ts', `
|
|
|
|
import {ɵɵNgModuleDefWithMeta} from '@angular/core';
|
|
|
|
import {ExternalDir} from './dir';
|
2019-10-25 13:45:08 -04:00
|
|
|
|
feat(ivy): enable re-export of the compilation scope of NgModules privately (#33177)
This commit refactors the aliasing system to support multiple different
AliasingHost implementations, which control specific aliasing behavior
in ngtsc (see the README.md).
A new host is introduced, the `PrivateExportAliasingHost`. This solves a
longstanding problem in ngtsc regarding support for "monorepo" style private
libraries. These are libraries which are compiled separately from the main
application, and depended upon through TypeScript path mappings. Such
libraries are frequently not in the Angular Package Format and do not have
entrypoints, but rather make use of deep import style module specifiers.
This can cause issues with ngtsc's ability to import a directive given the
module specifier of its NgModule.
For example, if the application uses a directive `Foo` from such a library
`foo`, the user might write:
```typescript
import {FooModule} from 'foo/module';
```
In this case, foo/module.d.ts is path-mapped into the program. Ordinarily
the compiler would see this as an absolute module specifier, and assume that
the `Foo` directive can be imported from the same specifier. For such non-
APF libraries, this assumption fails. Really `Foo` should be imported from
the file which declares it, but there are two problems with this:
1. The compiler would have to reverse the path mapping in order to determine
a path-mapped path to the file (maybe foo/dir.d.ts).
2. There is no guarantee that the file containing the directive is path-
mapped in the program at all.
The compiler would effectively have to "guess" 'foo/dir' as a module
specifier, which may or may not be accurate depending on how the library and
path mapping are set up.
It's strongly desirable that the compiler not break its current invariant
that the module specifier given by the user for the NgModule is always the
module specifier from which directives/pipes are imported. Thus, for any
given NgModule from a particular module specifier, it must always be
possible to import any directives/pipes from the same specifier, no matter
how it's packaged.
To make this possible, when compiling a file containing an NgModule, ngtsc
will automatically add re-exports for any directives/pipes not yet exported
by the user, with a name of the form: ɵngExportɵModuleNameɵDirectiveName
This has several effects:
1. It guarantees anyone depending on the NgModule will be able to import its
directives/pipes from the same specifier.
2. It maintains a stable name for the exported symbol that is safe to depend
on from code on NPM. Effectively, this private exported name will be a
part of the package's .d.ts API, and cannot be changed in a non-breaking
fashion.
Fixes #29361
FW-1610 #resolve
PR Close #33177
2019-10-14 15:03:29 -04:00
|
|
|
export declare class ExternalModule {
|
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<ExternalModule, [typeof ExternalDir], never, [typeof ExternalDir]>;
|
|
|
|
}
|
2019-10-25 13:45:08 -04:00
|
|
|
|
feat(ivy): enable re-export of the compilation scope of NgModules privately (#33177)
This commit refactors the aliasing system to support multiple different
AliasingHost implementations, which control specific aliasing behavior
in ngtsc (see the README.md).
A new host is introduced, the `PrivateExportAliasingHost`. This solves a
longstanding problem in ngtsc regarding support for "monorepo" style private
libraries. These are libraries which are compiled separately from the main
application, and depended upon through TypeScript path mappings. Such
libraries are frequently not in the Angular Package Format and do not have
entrypoints, but rather make use of deep import style module specifiers.
This can cause issues with ngtsc's ability to import a directive given the
module specifier of its NgModule.
For example, if the application uses a directive `Foo` from such a library
`foo`, the user might write:
```typescript
import {FooModule} from 'foo/module';
```
In this case, foo/module.d.ts is path-mapped into the program. Ordinarily
the compiler would see this as an absolute module specifier, and assume that
the `Foo` directive can be imported from the same specifier. For such non-
APF libraries, this assumption fails. Really `Foo` should be imported from
the file which declares it, but there are two problems with this:
1. The compiler would have to reverse the path mapping in order to determine
a path-mapped path to the file (maybe foo/dir.d.ts).
2. There is no guarantee that the file containing the directive is path-
mapped in the program at all.
The compiler would effectively have to "guess" 'foo/dir' as a module
specifier, which may or may not be accurate depending on how the library and
path mapping are set up.
It's strongly desirable that the compiler not break its current invariant
that the module specifier given by the user for the NgModule is always the
module specifier from which directives/pipes are imported. Thus, for any
given NgModule from a particular module specifier, it must always be
possible to import any directives/pipes from the same specifier, no matter
how it's packaged.
To make this possible, when compiling a file containing an NgModule, ngtsc
will automatically add re-exports for any directives/pipes not yet exported
by the user, with a name of the form: ɵngExportɵModuleNameɵDirectiveName
This has several effects:
1. It guarantees anyone depending on the NgModule will be able to import its
directives/pipes from the same specifier.
2. It maintains a stable name for the exported symbol that is safe to depend
on from code on NPM. Effectively, this private exported name will be a
part of the package's .d.ts API, and cannot be changed in a non-breaking
fashion.
Fixes #29361
FW-1610 #resolve
PR Close #33177
2019-10-14 15:03:29 -04:00
|
|
|
export {ExternalDir as ɵngExportɵExternalModuleɵExternalDir};
|
|
|
|
`);
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Component, Directive, NgModule} from '@angular/core';
|
|
|
|
import {ExternalModule} from 'external/module';
|
2019-10-25 13:45:08 -04:00
|
|
|
|
feat(ivy): enable re-export of the compilation scope of NgModules privately (#33177)
This commit refactors the aliasing system to support multiple different
AliasingHost implementations, which control specific aliasing behavior
in ngtsc (see the README.md).
A new host is introduced, the `PrivateExportAliasingHost`. This solves a
longstanding problem in ngtsc regarding support for "monorepo" style private
libraries. These are libraries which are compiled separately from the main
application, and depended upon through TypeScript path mappings. Such
libraries are frequently not in the Angular Package Format and do not have
entrypoints, but rather make use of deep import style module specifiers.
This can cause issues with ngtsc's ability to import a directive given the
module specifier of its NgModule.
For example, if the application uses a directive `Foo` from such a library
`foo`, the user might write:
```typescript
import {FooModule} from 'foo/module';
```
In this case, foo/module.d.ts is path-mapped into the program. Ordinarily
the compiler would see this as an absolute module specifier, and assume that
the `Foo` directive can be imported from the same specifier. For such non-
APF libraries, this assumption fails. Really `Foo` should be imported from
the file which declares it, but there are two problems with this:
1. The compiler would have to reverse the path mapping in order to determine
a path-mapped path to the file (maybe foo/dir.d.ts).
2. There is no guarantee that the file containing the directive is path-
mapped in the program at all.
The compiler would effectively have to "guess" 'foo/dir' as a module
specifier, which may or may not be accurate depending on how the library and
path mapping are set up.
It's strongly desirable that the compiler not break its current invariant
that the module specifier given by the user for the NgModule is always the
module specifier from which directives/pipes are imported. Thus, for any
given NgModule from a particular module specifier, it must always be
possible to import any directives/pipes from the same specifier, no matter
how it's packaged.
To make this possible, when compiling a file containing an NgModule, ngtsc
will automatically add re-exports for any directives/pipes not yet exported
by the user, with a name of the form: ɵngExportɵModuleNameɵDirectiveName
This has several effects:
1. It guarantees anyone depending on the NgModule will be able to import its
directives/pipes from the same specifier.
2. It maintains a stable name for the exported symbol that is safe to depend
on from code on NPM. Effectively, this private exported name will be a
part of the package's .d.ts API, and cannot be changed in a non-breaking
fashion.
Fixes #29361
FW-1610 #resolve
PR Close #33177
2019-10-14 15:03:29 -04:00
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: '<div test></div>',
|
|
|
|
})
|
|
|
|
class Cmp {}
|
2019-10-25 13:45:08 -04:00
|
|
|
|
feat(ivy): enable re-export of the compilation scope of NgModules privately (#33177)
This commit refactors the aliasing system to support multiple different
AliasingHost implementations, which control specific aliasing behavior
in ngtsc (see the README.md).
A new host is introduced, the `PrivateExportAliasingHost`. This solves a
longstanding problem in ngtsc regarding support for "monorepo" style private
libraries. These are libraries which are compiled separately from the main
application, and depended upon through TypeScript path mappings. Such
libraries are frequently not in the Angular Package Format and do not have
entrypoints, but rather make use of deep import style module specifiers.
This can cause issues with ngtsc's ability to import a directive given the
module specifier of its NgModule.
For example, if the application uses a directive `Foo` from such a library
`foo`, the user might write:
```typescript
import {FooModule} from 'foo/module';
```
In this case, foo/module.d.ts is path-mapped into the program. Ordinarily
the compiler would see this as an absolute module specifier, and assume that
the `Foo` directive can be imported from the same specifier. For such non-
APF libraries, this assumption fails. Really `Foo` should be imported from
the file which declares it, but there are two problems with this:
1. The compiler would have to reverse the path mapping in order to determine
a path-mapped path to the file (maybe foo/dir.d.ts).
2. There is no guarantee that the file containing the directive is path-
mapped in the program at all.
The compiler would effectively have to "guess" 'foo/dir' as a module
specifier, which may or may not be accurate depending on how the library and
path mapping are set up.
It's strongly desirable that the compiler not break its current invariant
that the module specifier given by the user for the NgModule is always the
module specifier from which directives/pipes are imported. Thus, for any
given NgModule from a particular module specifier, it must always be
possible to import any directives/pipes from the same specifier, no matter
how it's packaged.
To make this possible, when compiling a file containing an NgModule, ngtsc
will automatically add re-exports for any directives/pipes not yet exported
by the user, with a name of the form: ɵngExportɵModuleNameɵDirectiveName
This has several effects:
1. It guarantees anyone depending on the NgModule will be able to import its
directives/pipes from the same specifier.
2. It maintains a stable name for the exported symbol that is safe to depend
on from code on NPM. Effectively, this private exported name will be a
part of the package's .d.ts API, and cannot be changed in a non-breaking
fashion.
Fixes #29361
FW-1610 #resolve
PR Close #33177
2019-10-14 15:03:29 -04:00
|
|
|
@NgModule({
|
|
|
|
declarations: [Cmp],
|
|
|
|
imports: [ExternalModule],
|
|
|
|
})
|
|
|
|
class Module {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('import * as i1 from "external/module";');
|
|
|
|
expect(jsContents).toContain('directives: [i1.ɵngExportɵExternalModuleɵExternalDir]');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not generate re-exports when disabled', () => {
|
|
|
|
// Return to the default configuration, which has re-exports disabled.
|
|
|
|
env.tsconfig();
|
|
|
|
|
|
|
|
env.write('dir.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: 'dir',
|
|
|
|
})
|
|
|
|
export class Dir {}
|
|
|
|
`);
|
|
|
|
env.write('module.ts', `
|
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {Dir} from './dir';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [Dir],
|
|
|
|
exports: [Dir],
|
|
|
|
})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('module.js');
|
|
|
|
const dtsContents = env.getContents('module.d.ts');
|
|
|
|
|
|
|
|
expect(jsContents).not.toContain('ɵngExportɵModuleɵDir');
|
|
|
|
expect(dtsContents).not.toContain('ɵngExportɵModuleɵDir');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should execute custom transformers', () => {
|
|
|
|
let beforeCount = 0;
|
|
|
|
let afterCount = 0;
|
2019-01-03 05:23:00 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('test.ts', `
|
2019-01-03 05:23:00 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
class Module {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain({
|
|
|
|
beforeTs: [() => (sourceFile: ts.SourceFile) => {
|
|
|
|
beforeCount++;
|
|
|
|
return sourceFile;
|
|
|
|
}],
|
|
|
|
afterTs: [() => (sourceFile: ts.SourceFile) => {
|
|
|
|
afterCount++;
|
|
|
|
return sourceFile;
|
|
|
|
}],
|
|
|
|
});
|
2019-01-03 05:23:00 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(beforeCount).toBe(1);
|
|
|
|
expect(afterCount).toBe(1);
|
|
|
|
});
|
2019-01-03 05:23:00 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
// These tests trigger the Tsickle compiler which asserts that the file-paths
|
|
|
|
// are valid for the real OS. When on non-Windows systems it doesn't like paths
|
|
|
|
// that start with `C:`.
|
|
|
|
if (os !== 'Windows' || platform() === 'win32') {
|
|
|
|
describe('@fileoverview Closure annotations', () => {
|
|
|
|
it('should be produced if not present in source file', () => {
|
|
|
|
env.tsconfig({
|
|
|
|
'annotateForClosureCompiler': true,
|
|
|
|
});
|
|
|
|
env.write(`test.ts`, `
|
2019-02-13 21:13:29 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '<div class="test"></div>',
|
|
|
|
})
|
|
|
|
export class SomeComp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
const fileoverview = `
|
2019-02-13 21:13:29 -05:00
|
|
|
/**
|
|
|
|
* @fileoverview added by tsickle
|
2019-07-17 20:49:16 -04:00
|
|
|
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
2019-02-13 21:13:29 -05:00
|
|
|
*/
|
|
|
|
`;
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(trim(jsContents).startsWith(trim(fileoverview))).toBeTruthy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should be produced for empty source files', () => {
|
|
|
|
env.tsconfig({
|
|
|
|
'annotateForClosureCompiler': true,
|
|
|
|
});
|
|
|
|
env.write(`test.ts`, ``);
|
|
|
|
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
const fileoverview = `
|
2019-02-13 21:13:29 -05:00
|
|
|
/**
|
|
|
|
* @fileoverview added by tsickle
|
2019-07-17 20:49:16 -04:00
|
|
|
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
2019-02-13 21:13:29 -05:00
|
|
|
*/
|
|
|
|
`;
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(trim(jsContents).startsWith(trim(fileoverview))).toBeTruthy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should always be at the very beginning of a script (if placed above imports)', () => {
|
|
|
|
env.tsconfig({
|
|
|
|
'annotateForClosureCompiler': true,
|
|
|
|
});
|
|
|
|
env.write(`test.ts`, `
|
2019-02-13 21:13:29 -05:00
|
|
|
/**
|
|
|
|
* @fileoverview Some Comp overview
|
|
|
|
* @modName {some_comp}
|
|
|
|
*/
|
|
|
|
|
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: '<div class="test"></div>',
|
|
|
|
})
|
|
|
|
export class SomeComp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
const fileoverview = `
|
2019-02-13 21:13:29 -05:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @fileoverview Some Comp overview
|
|
|
|
* @modName {some_comp}
|
|
|
|
*
|
2019-07-17 20:49:16 -04:00
|
|
|
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
2019-02-13 21:13:29 -05:00
|
|
|
*/
|
|
|
|
`;
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(trim(jsContents).startsWith(trim(fileoverview))).toBeTruthy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should always be at the very beginning of a script (if placed above non-imports)',
|
|
|
|
() => {
|
|
|
|
env.tsconfig({
|
|
|
|
'annotateForClosureCompiler': true,
|
|
|
|
});
|
|
|
|
env.write(`test.ts`, `
|
2019-02-13 21:13:29 -05:00
|
|
|
/**
|
|
|
|
* @fileoverview Some Comp overview
|
|
|
|
* @modName {some_comp}
|
|
|
|
*/
|
|
|
|
|
|
|
|
const testConst = 'testConstValue';
|
|
|
|
const testFn = function() { return true; }
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
const fileoverview = `
|
2019-02-13 21:13:29 -05:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @fileoverview Some Comp overview
|
|
|
|
* @modName {some_comp}
|
|
|
|
*
|
2019-07-17 20:49:16 -04:00
|
|
|
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
2019-02-13 21:13:29 -05:00
|
|
|
*/
|
|
|
|
`;
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(trim(jsContents).startsWith(trim(fileoverview))).toBeTruthy();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
2019-02-13 21:13:29 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('sanitization', () => {
|
|
|
|
it('should generate sanitizers for unsafe attributes in hostBindings fn in Directives',
|
|
|
|
() => {
|
|
|
|
env.write(`test.ts`, `
|
2019-01-03 13:04:06 -05:00
|
|
|
import {Component, Directive, HostBinding} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[unsafeAttrs]'
|
|
|
|
})
|
|
|
|
class UnsafeAttrsDirective {
|
|
|
|
@HostBinding('attr.href')
|
|
|
|
attrHref: string;
|
|
|
|
|
|
|
|
@HostBinding('attr.src')
|
|
|
|
attrSrc: string;
|
|
|
|
|
|
|
|
@HostBinding('attr.action')
|
|
|
|
attrAction: string;
|
|
|
|
|
|
|
|
@HostBinding('attr.profile')
|
|
|
|
attrProfile: string;
|
|
|
|
|
|
|
|
@HostBinding('attr.innerHTML')
|
|
|
|
attrInnerHTML: string;
|
|
|
|
|
|
|
|
@HostBinding('attr.title')
|
|
|
|
attrSafeTitle: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'foo',
|
|
|
|
template: '<a [unsafeAttrs]="ctxProp">Link Title</a>'
|
|
|
|
})
|
|
|
|
class FooCmp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
const hostBindingsFn = `
|
2020-01-08 14:32:33 -05:00
|
|
|
hostVars: 6,
|
2020-01-25 06:38:42 -05:00
|
|
|
hostBindings: function UnsafeAttrsDirective_HostBindings(rf, ctx) {
|
2019-01-03 13:04:06 -05:00
|
|
|
if (rf & 2) {
|
2019-06-27 14:23:15 -04:00
|
|
|
i0.ɵɵattribute("href", ctx.attrHref, i0.ɵɵsanitizeUrlOrResourceUrl)("src", ctx.attrSrc, i0.ɵɵsanitizeUrlOrResourceUrl)("action", ctx.attrAction, i0.ɵɵsanitizeUrl)("profile", ctx.attrProfile, i0.ɵɵsanitizeResourceUrl)("innerHTML", ctx.attrInnerHTML, i0.ɵɵsanitizeHtml)("title", ctx.attrSafeTitle);
|
2019-01-03 13:04:06 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
`;
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(trim(jsContents)).toContain(trim(hostBindingsFn));
|
|
|
|
});
|
2019-01-03 13:04:06 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should generate sanitizers for unsafe properties in hostBindings fn in Directives',
|
|
|
|
() => {
|
|
|
|
env.write(`test.ts`, `
|
2019-01-03 13:04:06 -05:00
|
|
|
import {Component, Directive, HostBinding} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[unsafeProps]'
|
|
|
|
})
|
|
|
|
class UnsafePropsDirective {
|
|
|
|
@HostBinding('href')
|
|
|
|
propHref: string;
|
|
|
|
|
|
|
|
@HostBinding('src')
|
|
|
|
propSrc: string;
|
|
|
|
|
|
|
|
@HostBinding('action')
|
|
|
|
propAction: string;
|
|
|
|
|
|
|
|
@HostBinding('profile')
|
|
|
|
propProfile: string;
|
|
|
|
|
|
|
|
@HostBinding('innerHTML')
|
|
|
|
propInnerHTML: string;
|
|
|
|
|
|
|
|
@HostBinding('title')
|
|
|
|
propSafeTitle: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'foo',
|
|
|
|
template: '<a [unsafeProps]="ctxProp">Link Title</a>'
|
|
|
|
})
|
|
|
|
class FooCmp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
const hostBindingsFn = `
|
2020-01-08 14:32:33 -05:00
|
|
|
hostVars: 6,
|
2020-01-25 06:38:42 -05:00
|
|
|
hostBindings: function UnsafePropsDirective_HostBindings(rf, ctx) {
|
2019-01-03 13:04:06 -05:00
|
|
|
if (rf & 2) {
|
2019-07-14 05:11:10 -04:00
|
|
|
i0.ɵɵhostProperty("href", ctx.propHref, i0.ɵɵsanitizeUrlOrResourceUrl)("src", ctx.propSrc, i0.ɵɵsanitizeUrlOrResourceUrl)("action", ctx.propAction, i0.ɵɵsanitizeUrl)("profile", ctx.propProfile, i0.ɵɵsanitizeResourceUrl)("innerHTML", ctx.propInnerHTML, i0.ɵɵsanitizeHtml)("title", ctx.propSafeTitle);
|
2019-01-03 13:04:06 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
`;
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(trim(jsContents)).toContain(trim(hostBindingsFn));
|
|
|
|
});
|
2019-01-03 13:04:06 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should not generate sanitizers for URL properties in hostBindings fn in Component',
|
|
|
|
() => {
|
|
|
|
env.write(`test.ts`, `
|
2019-01-03 13:04:06 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'foo',
|
|
|
|
template: '<a href="example.com">Link Title</a>',
|
|
|
|
host: {
|
|
|
|
'[src]': 'srcProp',
|
|
|
|
'[href]': 'hrefProp',
|
|
|
|
'[title]': 'titleProp',
|
|
|
|
'[attr.src]': 'srcAttr',
|
|
|
|
'[attr.href]': 'hrefAttr',
|
|
|
|
'[attr.title]': 'titleAttr',
|
|
|
|
}
|
|
|
|
})
|
|
|
|
class FooCmp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
const hostBindingsFn = `
|
2020-01-08 14:32:33 -05:00
|
|
|
hostVars: 6,
|
2020-01-25 06:38:42 -05:00
|
|
|
hostBindings: function FooCmp_HostBindings(rf, ctx) {
|
2019-01-03 13:04:06 -05:00
|
|
|
if (rf & 2) {
|
2019-07-14 05:11:10 -04:00
|
|
|
i0.ɵɵhostProperty("src", ctx.srcProp)("href", ctx.hrefProp)("title", ctx.titleProp);
|
2019-06-27 14:23:15 -04:00
|
|
|
i0.ɵɵattribute("src", ctx.srcAttr)("href", ctx.hrefAttr)("title", ctx.titleAttr);
|
2019-01-03 13:04:06 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
`;
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(trim(jsContents)).toContain(trim(hostBindingsFn));
|
|
|
|
});
|
2019-01-03 13:04:06 -05:00
|
|
|
});
|
2018-11-16 11:56:18 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('listLazyRoutes()', () => {
|
|
|
|
// clang-format off
|
2019-02-05 09:47:35 -05:00
|
|
|
const lazyRouteMatching = (
|
2019-03-15 16:45:08 -04:00
|
|
|
route: string, fromModulePath: RegExp, fromModuleName: string, toModulePath: RegExp,
|
|
|
|
toModuleName: string) => {
|
2019-02-05 09:47:35 -05:00
|
|
|
return {
|
|
|
|
route,
|
|
|
|
module: jasmine.objectContaining({
|
|
|
|
name: fromModuleName,
|
|
|
|
filePath: jasmine.stringMatching(fromModulePath),
|
|
|
|
}),
|
|
|
|
referencedModule: jasmine.objectContaining({
|
|
|
|
name: toModuleName,
|
|
|
|
filePath: jasmine.stringMatching(toModulePath),
|
|
|
|
}),
|
|
|
|
} as unknown as LazyRoute;
|
|
|
|
};
|
2019-06-06 15:22:32 -04:00
|
|
|
// clang-format on
|
2019-02-05 09:47:35 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
beforeEach(() => {
|
|
|
|
env.write('node_modules/@angular/router/index.d.ts', `
|
2019-05-17 21:49:21 -04:00
|
|
|
import {ModuleWithProviders, ɵɵNgModuleDefWithMeta as ɵɵNgModuleDefWithMeta} from '@angular/core';
|
2019-01-25 11:10:05 -05:00
|
|
|
|
2019-02-05 09:47:35 -05:00
|
|
|
export declare var ROUTES;
|
|
|
|
export declare class RouterModule {
|
|
|
|
static forRoot(arg1: any, arg2: any): ModuleWithProviders<RouterModule>;
|
|
|
|
static forChild(arg1: any): ModuleWithProviders<RouterModule>;
|
2019-10-14 10:20:26 -04:00
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<RouterModule, never, never, never>;
|
2019-02-05 09:47:35 -05:00
|
|
|
}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2019-02-05 09:47:35 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('when called without arguments', () => {
|
|
|
|
it('should list all routes', () => {
|
|
|
|
env.write('test.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forRoot([
|
|
|
|
{path: '1', loadChildren: './lazy/lazy-1#Lazy1Module'},
|
|
|
|
{path: '2', loadChildren: './lazy/lazy-2#Lazy2Module'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('lazy/lazy-1.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class Lazy1Module {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('lazy/lazy-2.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forChild([
|
|
|
|
{path: '3', loadChildren: './lazy-3#Lazy3Module'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class Lazy2Module {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('lazy/lazy-3.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class Lazy3Module {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const routes = env.driveRoutes();
|
|
|
|
expect(routes).toEqual([
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy-3#Lazy3Module', /\/lazy\/lazy-2\.ts$/, 'Lazy2Module', /\/lazy\/lazy-3\.ts$/,
|
|
|
|
'Lazy3Module'),
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy/lazy-1#Lazy1Module', /\/test\.ts$/, 'TestModule', /\/lazy\/lazy-1\.ts$/,
|
|
|
|
'Lazy1Module'),
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy/lazy-2#Lazy2Module', /\/test\.ts$/, 'TestModule', /\/lazy\/lazy-2\.ts$/,
|
|
|
|
'Lazy2Module'),
|
|
|
|
]);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should detect lazy routes in simple children routes', () => {
|
|
|
|
env.write('test.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'foo',
|
|
|
|
template: '<div>Foo</div>'
|
|
|
|
})
|
|
|
|
class FooCmp {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forRoot([
|
|
|
|
{path: '', children: [
|
|
|
|
{path: 'foo', component: FooCmp},
|
|
|
|
{path: 'lazy', loadChildren: './lazy#LazyModule'}
|
|
|
|
]},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('lazy.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class LazyModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const routes = env.driveRoutes();
|
|
|
|
expect(routes).toEqual([
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy#LazyModule', /\/test\.ts$/, 'TestModule', /\/lazy\.ts$/, 'LazyModule'),
|
|
|
|
]);
|
|
|
|
});
|
2019-02-11 06:01:01 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should detect lazy routes in all root directories', () => {
|
|
|
|
env.tsconfig({}, ['./foo/other-root-dir', './bar/other-root-dir']);
|
|
|
|
env.write('src/test.ts', `
|
2019-02-11 06:01:01 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forRoot([
|
|
|
|
{path: '', loadChildren: './lazy-foo#LazyFooModule'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('foo/other-root-dir/src/lazy-foo.ts', `
|
2019-02-11 06:01:01 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forChild([
|
|
|
|
{path: '', loadChildren: './lazy-bar#LazyBarModule'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class LazyFooModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('bar/other-root-dir/src/lazy-bar.ts', `
|
2019-02-11 06:01:01 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forChild([
|
|
|
|
{path: '', loadChildren: './lazier-bar#LazierBarModule'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class LazyBarModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('bar/other-root-dir/src/lazier-bar.ts', `
|
2019-02-11 06:01:01 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class LazierBarModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const routes = env.driveRoutes();
|
|
|
|
|
|
|
|
expect(routes).toEqual([
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy-foo#LazyFooModule', /\/test\.ts$/, 'TestModule',
|
|
|
|
/\/foo\/other-root-dir\/src\/lazy-foo\.ts$/, 'LazyFooModule'),
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy-bar#LazyBarModule', /\/foo\/other-root-dir\/src\/lazy-foo\.ts$/,
|
|
|
|
'LazyFooModule', /\/bar\/other-root-dir\/src\/lazy-bar\.ts$/, 'LazyBarModule'),
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazier-bar#LazierBarModule', /\/bar\/other-root-dir\/src\/lazy-bar\.ts$/,
|
|
|
|
'LazyBarModule', /\/bar\/other-root-dir\/src\/lazier-bar\.ts$/, 'LazierBarModule'),
|
|
|
|
]);
|
|
|
|
});
|
2019-02-11 06:01:01 -05:00
|
|
|
});
|
2019-02-05 09:47:35 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('when called with entry module', () => {
|
|
|
|
it('should throw if the entry module hasn\'t been analyzed', () => {
|
|
|
|
env.write('test.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forChild([
|
|
|
|
{path: '', loadChildren: './lazy#LazyModule'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const entryModule1 = absoluteFrom('/test#TestModule');
|
|
|
|
const entryModule2 = absoluteFrom('/not-test#TestModule');
|
|
|
|
const entryModule3 = absoluteFrom('/test#NotTestModule');
|
2019-02-05 09:47:35 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(() => env.driveRoutes(entryModule1)).not.toThrow();
|
|
|
|
expect(() => env.driveRoutes(entryModule2))
|
|
|
|
.toThrowError(`Failed to list lazy routes: Unknown module '${entryModule2}'.`);
|
|
|
|
expect(() => env.driveRoutes(entryModule3))
|
|
|
|
.toThrowError(`Failed to list lazy routes: Unknown module '${entryModule3}'.`);
|
|
|
|
});
|
2019-02-05 09:47:35 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should list all transitive lazy routes', () => {
|
|
|
|
env.write('test.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
import {Test1Module as Test1ModuleRenamed} from './test-1';
|
|
|
|
import {Test2Module} from './test-2';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
exports: [
|
|
|
|
Test1ModuleRenamed,
|
|
|
|
],
|
|
|
|
imports: [
|
|
|
|
Test2Module,
|
|
|
|
RouterModule.forRoot([
|
|
|
|
{path: '', loadChildren: './lazy/lazy#LazyModule'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('test-1.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forChild([
|
|
|
|
{path: 'one', loadChildren: './lazy-1/lazy-1#Lazy1Module'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class Test1Module {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('test-2.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
exports: [
|
|
|
|
RouterModule.forChild([
|
|
|
|
{path: 'two', loadChildren: './lazy-2/lazy-2#Lazy2Module'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class Test2Module {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('lazy/lazy.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class LazyModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('lazy-1/lazy-1.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class Lazy1Module {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('lazy-2/lazy-2.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class Lazy2Module {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const routes = env.driveRoutes(absoluteFrom('/test#TestModule'));
|
|
|
|
|
|
|
|
expect(routes).toEqual([
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy/lazy#LazyModule', /\/test\.ts$/, 'TestModule', /\/lazy\/lazy\.ts$/,
|
|
|
|
'LazyModule'),
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy-1/lazy-1#Lazy1Module', /\/test-1\.ts$/, 'Test1Module',
|
|
|
|
/\/lazy-1\/lazy-1\.ts$/, 'Lazy1Module'),
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy-2/lazy-2#Lazy2Module', /\/test-2\.ts$/, 'Test2Module',
|
|
|
|
/\/lazy-2\/lazy-2\.ts$/, 'Lazy2Module'),
|
|
|
|
]);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should ignore exports that do not refer to an `NgModule`', () => {
|
|
|
|
env.write('test-1.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
import {Test2Component, Test2Module} from './test-2';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
exports: [
|
|
|
|
Test2Component,
|
|
|
|
Test2Module,
|
|
|
|
],
|
|
|
|
imports: [
|
2019-02-19 20:36:26 -05:00
|
|
|
Test2Module,
|
2019-02-05 09:47:35 -05:00
|
|
|
RouterModule.forRoot([
|
|
|
|
{path: '', loadChildren: './lazy-1/lazy-1#Lazy1Module'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class Test1Module {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('test-2.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {Component, NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-2',
|
|
|
|
template: '',
|
|
|
|
})
|
|
|
|
export class Test2Component {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [
|
|
|
|
Test2Component,
|
|
|
|
],
|
|
|
|
exports: [
|
|
|
|
Test2Component,
|
|
|
|
RouterModule.forChild([
|
|
|
|
{path: 'two', loadChildren: './lazy-2/lazy-2#Lazy2Module'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class Test2Module {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('lazy-1/lazy-1.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class Lazy1Module {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('lazy-2/lazy-2.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class Lazy2Module {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const routes = env.driveRoutes(absoluteFrom('/test-1#Test1Module'));
|
2019-02-05 09:47:35 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(routes).toEqual([
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy-1/lazy-1#Lazy1Module', /\/test-1\.ts$/, 'Test1Module',
|
|
|
|
/\/lazy-1\/lazy-1\.ts$/, 'Lazy1Module'),
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy-2/lazy-2#Lazy2Module', /\/test-2\.ts$/, 'Test2Module',
|
|
|
|
/\/lazy-2\/lazy-2\.ts$/, 'Lazy2Module'),
|
|
|
|
]);
|
|
|
|
});
|
2019-02-05 09:47:35 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should support `ModuleWithProviders`', () => {
|
|
|
|
env.write('test.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {ModuleWithProviders, NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forChild([
|
|
|
|
{path: '', loadChildren: './lazy-2/lazy-2#Lazy2Module'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class TestRoutingModule {
|
|
|
|
static forRoot(): ModuleWithProviders<TestRoutingModule> {
|
|
|
|
return {
|
|
|
|
ngModule: TestRoutingModule,
|
|
|
|
providers: [],
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
TestRoutingModule.forRoot(),
|
|
|
|
RouterModule.forRoot([
|
|
|
|
{path: '', loadChildren: './lazy-1/lazy-1#Lazy1Module'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('lazy-1/lazy-1.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class Lazy1Module {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('lazy-2/lazy-2.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class Lazy2Module {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const routes = env.driveRoutes(absoluteFrom('/test#TestModule'));
|
2019-02-05 09:47:35 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(routes).toEqual([
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy-1/lazy-1#Lazy1Module', /\/test\.ts$/, 'TestModule', /\/lazy-1\/lazy-1\.ts$/,
|
|
|
|
'Lazy1Module'),
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy-2/lazy-2#Lazy2Module', /\/test\.ts$/, 'TestRoutingModule',
|
|
|
|
/\/lazy-2\/lazy-2\.ts$/, 'Lazy2Module'),
|
|
|
|
]);
|
|
|
|
});
|
2019-02-05 09:47:35 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should only process each module once', () => {
|
|
|
|
env.write('test.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forChild([
|
|
|
|
{path: '', loadChildren: './lazy/lazy#LazyModule'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class SharedModule {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
SharedModule,
|
|
|
|
RouterModule.forRoot([
|
|
|
|
{path: '', loadChildren: './lazy/lazy#LazyModule'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('lazy/lazy.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forChild([
|
|
|
|
{path: '', loadChildren: '../lazier/lazier#LazierModule'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class LazyModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('lazier/lazier.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class LazierModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const routes = env.driveRoutes(absoluteFrom('/test#TestModule'));
|
|
|
|
|
|
|
|
// `LazyModule` is referenced in both `SharedModule` and `TestModule`,
|
|
|
|
// but it is only processed once (hence one `LazierModule` entry).
|
|
|
|
expect(routes).toEqual([
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy/lazy#LazyModule', /\/test\.ts$/, 'TestModule', /\/lazy\/lazy\.ts$/,
|
|
|
|
'LazyModule'),
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy/lazy#LazyModule', /\/test\.ts$/, 'SharedModule', /\/lazy\/lazy\.ts$/,
|
|
|
|
'LazyModule'),
|
|
|
|
lazyRouteMatching(
|
|
|
|
'../lazier/lazier#LazierModule', /\/lazy\/lazy\.ts$/, 'LazyModule',
|
|
|
|
/\/lazier\/lazier\.ts$/, 'LazierModule'),
|
|
|
|
]);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should detect lazy routes in all root directories', () => {
|
|
|
|
env.tsconfig({}, ['./foo/other-root-dir', './bar/other-root-dir']);
|
|
|
|
env.write('src/test.ts', `
|
2019-02-11 06:01:01 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forRoot([
|
|
|
|
{path: '', loadChildren: './lazy-foo#LazyFooModule'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('foo/other-root-dir/src/lazy-foo.ts', `
|
2019-02-11 06:01:01 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forChild([
|
|
|
|
{path: '', loadChildren: './lazy-bar#LazyBarModule'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class LazyFooModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('bar/other-root-dir/src/lazy-bar.ts', `
|
2019-02-11 06:01:01 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forChild([
|
|
|
|
{path: '', loadChildren: './lazier-bar#LazierBarModule'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class LazyBarModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('bar/other-root-dir/src/lazier-bar.ts', `
|
2019-02-11 06:01:01 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class LazierBarModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const routes = env.driveRoutes(absoluteFrom('/src/test#TestModule'));
|
|
|
|
|
|
|
|
expect(routes).toEqual([
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy-foo#LazyFooModule', /\/test\.ts$/, 'TestModule',
|
|
|
|
/\/foo\/other-root-dir\/src\/lazy-foo\.ts$/, 'LazyFooModule'),
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy-bar#LazyBarModule', /\/foo\/other-root-dir\/src\/lazy-foo\.ts$/,
|
|
|
|
'LazyFooModule', /\/bar\/other-root-dir\/src\/lazy-bar\.ts$/, 'LazyBarModule'),
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazier-bar#LazierBarModule', /\/bar\/other-root-dir\/src\/lazy-bar\.ts$/,
|
|
|
|
'LazyBarModule', /\/bar\/other-root-dir\/src\/lazier-bar\.ts$/, 'LazierBarModule'),
|
|
|
|
]);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should ignore modules not (transitively) referenced by the entry module', () => {
|
|
|
|
env.write('test.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forRoot([
|
|
|
|
{path: '', loadChildren: './lazy/lazy#Lazy1Module'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class Test1Module {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forRoot([
|
|
|
|
{path: '', loadChildren: './lazy/lazy#Lazy2Module'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class Test2Module {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('lazy/lazy.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class Lazy1Module {}
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class Lazy2Module {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const routes = env.driveRoutes(absoluteFrom('/test#Test1Module'));
|
2019-02-05 09:47:35 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(routes).toEqual([
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy/lazy#Lazy1Module', /\/test\.ts$/, 'Test1Module', /\/lazy\/lazy\.ts$/,
|
|
|
|
'Lazy1Module'),
|
|
|
|
]);
|
|
|
|
});
|
2019-02-05 09:47:35 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should ignore routes to unknown modules', () => {
|
|
|
|
env.write('test.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {RouterModule} from '@angular/router';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
imports: [
|
|
|
|
RouterModule.forRoot([
|
|
|
|
{path: '', loadChildren: './unknown/unknown#UnknownModule'},
|
|
|
|
{path: '', loadChildren: './lazy/lazy#LazyModule'},
|
|
|
|
]),
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class TestModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('lazy/lazy.ts', `
|
2019-02-05 09:47:35 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({})
|
|
|
|
export class LazyModule {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const routes = env.driveRoutes(absoluteFrom('/test#TestModule'));
|
2019-02-05 09:47:35 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
expect(routes).toEqual([
|
|
|
|
lazyRouteMatching(
|
|
|
|
'./lazy/lazy#LazyModule', /\/test\.ts$/, 'TestModule', /\/lazy\/lazy\.ts$/,
|
|
|
|
'LazyModule'),
|
|
|
|
]);
|
|
|
|
});
|
2019-02-05 09:47:35 -05:00
|
|
|
});
|
|
|
|
});
|
2019-02-01 18:33:41 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('ivy switch mode', () => {
|
|
|
|
it('should allow for symbols to be renamed when they use a SWITCH_IVY naming mechanism',
|
|
|
|
() => {
|
|
|
|
env.write('test.ts', `
|
2019-02-01 18:33:41 -05:00
|
|
|
export const FooCmp__POST_R3__ = 1;
|
|
|
|
export const FooCmp__PRE_R3__ = 2;
|
|
|
|
export const FooCmp = FooCmp__PRE_R3__;`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
2019-02-01 18:33:41 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const source = env.getContents('test.js');
|
|
|
|
expect(source).toContain(`export var FooCmp = FooCmp__POST_R3__`);
|
|
|
|
expect(source).not.toContain(`export var FooCmp = FooCmp__PRE_R3__`);
|
|
|
|
});
|
2019-02-01 18:33:41 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should allow for SWITCH_IVY naming even even if it occurs outside of core', () => {
|
|
|
|
const content = `
|
2019-02-01 18:33:41 -05:00
|
|
|
export const Foo__POST_R3__ = 1;
|
|
|
|
export const Foo__PRE_R3__ = 2;
|
|
|
|
export const Foo = Foo__PRE_R3__;
|
|
|
|
`;
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('test_outside_angular_core.ts', content);
|
|
|
|
env.write(
|
|
|
|
'test_inside_angular_core.ts', content + '\nexport const ITS_JUST_ANGULAR = true;');
|
|
|
|
env.driveMain();
|
2019-02-01 18:33:41 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
const sourceTestOutsideAngularCore = env.getContents('test_outside_angular_core.js');
|
|
|
|
const sourceTestInsideAngularCore = env.getContents('test_inside_angular_core.js');
|
|
|
|
expect(sourceTestInsideAngularCore).toContain(sourceTestOutsideAngularCore);
|
|
|
|
});
|
2019-02-01 18:33:41 -05:00
|
|
|
});
|
2019-02-19 20:36:26 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('NgModule export aliasing', () => {
|
|
|
|
it('should use an alias to import a directive from a deep dependency', () => {
|
|
|
|
env.tsconfig({'_useHostForImportGeneration': true});
|
2019-02-19 20:36:26 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
// 'alpha' declares the directive which will ultimately be imported.
|
|
|
|
env.write('alpha.d.ts', `
|
2019-05-17 21:49:21 -04:00
|
|
|
import {ɵɵDirectiveDefWithMeta, ɵɵNgModuleDefWithMeta} from '@angular/core';
|
2019-02-19 20:36:26 -05:00
|
|
|
|
|
|
|
export declare class ExternalDir {
|
2019-10-11 15:28:12 -04:00
|
|
|
static ɵdir: ɵɵDirectiveDefWithMeta<ExternalDir, '[test]', never, never, never, never>;
|
2019-02-19 20:36:26 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
export declare class AlphaModule {
|
2019-10-14 10:20:26 -04:00
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<AlphaModule, [typeof ExternalDir], never, [typeof ExternalDir]>;
|
2019-02-19 20:36:26 -05:00
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
// 'beta' re-exports AlphaModule from alpha.
|
|
|
|
env.write('beta.d.ts', `
|
2019-05-17 21:49:21 -04:00
|
|
|
import {ɵɵNgModuleDefWithMeta} from '@angular/core';
|
2019-02-19 20:36:26 -05:00
|
|
|
import {AlphaModule} from './alpha';
|
|
|
|
|
|
|
|
export declare class BetaModule {
|
2019-10-14 10:20:26 -04:00
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<AlphaModule, never, never, [typeof AlphaModule]>;
|
2019-02-19 20:36:26 -05:00
|
|
|
}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
// The application imports BetaModule from beta, gaining visibility of ExternalDir from
|
|
|
|
// alpha.
|
|
|
|
env.write('test.ts', `
|
2019-02-19 20:36:26 -05:00
|
|
|
import {Component, NgModule} from '@angular/core';
|
|
|
|
import {BetaModule} from './beta';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'cmp',
|
|
|
|
template: '<div test></div>',
|
|
|
|
})
|
|
|
|
export class Cmp {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [Cmp],
|
|
|
|
imports: [BetaModule],
|
|
|
|
})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
2019-02-19 20:36:26 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
// Expect that ExternalDir from alpha is imported via the re-export from beta.
|
|
|
|
expect(jsContents).toContain('import * as i1 from "root/beta";');
|
|
|
|
expect(jsContents).toContain('directives: [i1.\u0275ng$root$alpha$$ExternalDir]');
|
|
|
|
});
|
2019-02-19 20:36:26 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should write alias ES2015 exports for NgModule exported directives', () => {
|
|
|
|
env.tsconfig({'_useHostForImportGeneration': true});
|
|
|
|
env.write('external.d.ts', `
|
2019-05-17 21:49:21 -04:00
|
|
|
import {ɵɵDirectiveDefWithMeta, ɵɵNgModuleDefWithMeta} from '@angular/core';
|
2019-02-19 20:36:26 -05:00
|
|
|
import {LibModule} from './lib';
|
|
|
|
|
|
|
|
export declare class ExternalDir {
|
2019-10-11 15:28:12 -04:00
|
|
|
static ɵdir: ɵɵDirectiveDefWithMeta<ExternalDir, '[test]', never, never, never, never>;
|
2019-02-19 20:36:26 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
export declare class ExternalModule {
|
2019-10-14 10:20:26 -04:00
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<ExternalModule, [typeof ExternalDir], never, [typeof ExternalDir, typeof LibModule]>;
|
2019-02-19 20:36:26 -05:00
|
|
|
}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('lib.d.ts', `
|
2019-05-17 21:49:21 -04:00
|
|
|
import {ɵɵDirectiveDefWithMeta, ɵɵNgModuleDefWithMeta} from '@angular/core';
|
2019-02-19 20:36:26 -05:00
|
|
|
|
|
|
|
export declare class LibDir {
|
2019-10-11 15:28:12 -04:00
|
|
|
static ɵdir: ɵɵDirectiveDefWithMeta<LibDir, '[lib]', never, never, never, never>;
|
2019-02-19 20:36:26 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
export declare class LibModule {
|
2019-10-14 10:20:26 -04:00
|
|
|
static ɵmod: ɵɵNgModuleDefWithMeta<LibModule, [typeof LibDir], never, [typeof LibDir]>;
|
2019-02-19 20:36:26 -05:00
|
|
|
}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('foo.ts', `
|
2019-02-19 20:36:26 -05:00
|
|
|
import {Directive, NgModule} from '@angular/core';
|
|
|
|
import {ExternalModule} from './external';
|
|
|
|
|
|
|
|
@Directive({selector: '[foo]'})
|
|
|
|
export class FooDir {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [FooDir],
|
|
|
|
exports: [FooDir, ExternalModule]
|
|
|
|
})
|
|
|
|
export class FooModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('index.ts', `
|
2019-02-19 20:36:26 -05:00
|
|
|
import {Component, NgModule} from '@angular/core';
|
|
|
|
import {FooModule} from './foo';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'index',
|
|
|
|
template: '<div foo test lib></div>',
|
|
|
|
})
|
|
|
|
export class IndexCmp {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [IndexCmp],
|
|
|
|
exports: [FooModule],
|
|
|
|
})
|
|
|
|
export class IndexModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('index.js');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain('export { FooDir as \u0275ng$root$foo$$FooDir } from "root/foo";');
|
|
|
|
});
|
2019-03-08 17:03:49 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should escape unusual characters in aliased filenames', () => {
|
|
|
|
env.tsconfig({'_useHostForImportGeneration': true});
|
|
|
|
env.write('other._$test.ts', `
|
2019-03-08 17:03:49 -05:00
|
|
|
import {Directive, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({selector: 'test'})
|
|
|
|
export class TestDir {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [TestDir],
|
|
|
|
exports: [TestDir],
|
|
|
|
})
|
|
|
|
export class OtherModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.write('index.ts', `
|
2019-03-08 17:03:49 -05:00
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {OtherModule} from './other._$test';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
exports: [OtherModule],
|
|
|
|
})
|
|
|
|
export class IndexModule {}
|
|
|
|
`);
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('index.js');
|
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
|
|
|
'export { TestDir as \u0275ng$root$other___test$$TestDir } from "root/other._$test";');
|
|
|
|
});
|
2019-03-08 17:03:49 -05:00
|
|
|
});
|
2019-02-26 17:48:42 -05:00
|
|
|
|
2019-10-24 14:24:39 -04:00
|
|
|
describe('disableTypeScriptVersionCheck', () => {
|
|
|
|
afterEach(() => restoreTypeScriptVersionForTesting());
|
|
|
|
|
|
|
|
it('produces an error when not supported and version check is enabled', () => {
|
|
|
|
setTypeScriptVersionForTesting('3.4.0');
|
|
|
|
env.tsconfig({disableTypeScriptVersionCheck: false});
|
|
|
|
env.write('empty.ts', '');
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(1);
|
|
|
|
expect(diags[0].messageText).toContain('but 3.4.0 was found instead');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not produce an error when supported and version check is enabled', () => {
|
|
|
|
env.tsconfig({disableTypeScriptVersionCheck: false});
|
|
|
|
env.write('empty.ts', '');
|
|
|
|
|
|
|
|
// The TypeScript version is not overwritten, so the version
|
|
|
|
// that is actually used should be supported
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not produce an error when not supported but version check is disabled', () => {
|
|
|
|
setTypeScriptVersionForTesting('3.4.0');
|
|
|
|
env.tsconfig({disableTypeScriptVersionCheck: true});
|
|
|
|
env.write('empty.ts', '');
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('produces an error when not supported using default configuration', () => {
|
|
|
|
setTypeScriptVersionForTesting('3.4.0');
|
|
|
|
env.write('empty.ts', '');
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(1);
|
|
|
|
expect(diags[0].messageText).toContain('but 3.4.0 was found instead');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2019-11-26 13:33:26 -05:00
|
|
|
describe('inherited directives', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
env.write('local.ts', `
|
|
|
|
import {Component, Directive, ElementRef} from '@angular/core';
|
|
|
|
|
|
|
|
export class BasePlain {}
|
|
|
|
|
|
|
|
export class BasePlainWithBlankConstructor {
|
|
|
|
constructor() {}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class BasePlainWithConstructorParameters {
|
|
|
|
constructor(elementRef: ElementRef) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'base-cmp',
|
|
|
|
template: 'BaseCmp',
|
|
|
|
})
|
|
|
|
export class BaseCmp {}
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[base]',
|
|
|
|
})
|
|
|
|
export class BaseDir {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
env.write('lib.d.ts', `
|
|
|
|
import {ɵɵComponentDefWithMeta, ɵɵDirectiveDefWithMeta, ElementRef} from '@angular/core';
|
|
|
|
|
|
|
|
export declare class BasePlain {}
|
|
|
|
|
|
|
|
export declare class BasePlainWithBlankConstructor {
|
|
|
|
constructor() {}
|
|
|
|
}
|
|
|
|
|
|
|
|
export declare class BasePlainWithConstructorParameters {
|
|
|
|
constructor(elementRef: ElementRef) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
export declare class BaseCmp {
|
|
|
|
static ɵcmp: ɵɵComponentDefWithMeta<BaseCmp, "base-cmp", never, {}, {}, never>
|
|
|
|
}
|
|
|
|
|
|
|
|
export declare class BaseDir {
|
|
|
|
static ɵdir: ɵɵDirectiveDefWithMeta<BaseDir, '[base]', never, never, never, never>;
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not error when inheriting a constructor from a decorated directive class', () => {
|
|
|
|
env.tsconfig();
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Directive, Component} from '@angular/core';
|
|
|
|
import {BaseDir, BaseCmp} from './local';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[dir]',
|
|
|
|
})
|
|
|
|
export class Dir extends BaseDir {}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: 'TestCmp',
|
|
|
|
})
|
|
|
|
export class Cmp extends BaseCmp {}
|
|
|
|
`);
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not error when inheriting a constructor without parameters', () => {
|
|
|
|
env.tsconfig();
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Directive, Component} from '@angular/core';
|
|
|
|
import {BasePlainWithBlankConstructor} from './local';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[dir]',
|
|
|
|
})
|
|
|
|
export class Dir extends BasePlainWithBlankConstructor {}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: 'TestCmp',
|
|
|
|
})
|
|
|
|
export class Cmp extends BasePlainWithBlankConstructor {}
|
|
|
|
`);
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not error when inheriting from a class without a constructor', () => {
|
|
|
|
env.tsconfig();
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Directive, Component} from '@angular/core';
|
|
|
|
import {BasePlain} from './local';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[dir]',
|
|
|
|
})
|
|
|
|
export class Dir extends BasePlain {}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: 'TestCmp',
|
|
|
|
})
|
|
|
|
export class Cmp extends BasePlain {}
|
|
|
|
`);
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should error when inheriting a constructor from an undecorated class', () => {
|
|
|
|
env.tsconfig();
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Directive, Component} from '@angular/core';
|
|
|
|
import {BasePlainWithConstructorParameters} from './local';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[dir]',
|
|
|
|
})
|
|
|
|
export class Dir extends BasePlainWithConstructorParameters {}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: 'TestCmp',
|
|
|
|
})
|
|
|
|
export class Cmp extends BasePlainWithConstructorParameters {}
|
|
|
|
`);
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(2);
|
|
|
|
expect(diags[0].messageText).toContain('Dir');
|
|
|
|
expect(diags[0].messageText).toContain('BasePlainWithConstructorParameters');
|
|
|
|
expect(diags[1].messageText).toContain('Cmp');
|
|
|
|
expect(diags[1].messageText).toContain('BasePlainWithConstructorParameters');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should error when inheriting a constructor from undecorated grand super class', () => {
|
|
|
|
env.tsconfig();
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Directive, Component} from '@angular/core';
|
|
|
|
import {BasePlainWithConstructorParameters} from './local';
|
|
|
|
|
|
|
|
class Parent extends BasePlainWithConstructorParameters {}
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[dir]',
|
|
|
|
})
|
|
|
|
export class Dir extends Parent {}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: 'TestCmp',
|
|
|
|
})
|
|
|
|
export class Cmp extends Parent {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(2);
|
|
|
|
expect(diags[0].messageText).toContain('Dir');
|
|
|
|
expect(diags[0].messageText).toContain('BasePlainWithConstructorParameters');
|
|
|
|
expect(diags[1].messageText).toContain('Cmp');
|
|
|
|
expect(diags[1].messageText).toContain('BasePlainWithConstructorParameters');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should error when inheriting a constructor from undecorated grand grand super class',
|
|
|
|
() => {
|
|
|
|
env.tsconfig();
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Directive, Component} from '@angular/core';
|
|
|
|
import {BasePlainWithConstructorParameters} from './local';
|
|
|
|
|
|
|
|
class GrandParent extends BasePlainWithConstructorParameters {}
|
|
|
|
|
|
|
|
class Parent extends GrandParent {}
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[dir]',
|
|
|
|
})
|
|
|
|
export class Dir extends Parent {}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: 'TestCmp',
|
|
|
|
})
|
|
|
|
export class Cmp extends Parent {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(2);
|
|
|
|
expect(diags[0].messageText).toContain('Dir');
|
|
|
|
expect(diags[0].messageText).toContain('BasePlainWithConstructorParameters');
|
|
|
|
expect(diags[1].messageText).toContain('Cmp');
|
|
|
|
expect(diags[1].messageText).toContain('BasePlainWithConstructorParameters');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not error when inheriting a constructor from decorated directive or component classes in a .d.ts file',
|
|
|
|
() => {
|
|
|
|
env.tsconfig();
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Component, Directive} from '@angular/core';
|
|
|
|
import {BaseDir, BaseCmp} from './lib';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[dir]',
|
|
|
|
})
|
|
|
|
export class Dir extends BaseDir {}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test-cmp',
|
|
|
|
template: 'TestCmp',
|
|
|
|
})
|
|
|
|
export class Cmp extends BaseCmp {}
|
|
|
|
`);
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should error when inheriting a constructor from an undecorated class in a .d.ts file',
|
|
|
|
() => {
|
|
|
|
env.tsconfig();
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
|
|
|
|
|
|
|
import {BasePlainWithConstructorParameters} from './lib';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[dir]',
|
|
|
|
})
|
|
|
|
export class Dir extends BasePlainWithConstructorParameters {}
|
|
|
|
`);
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(1);
|
|
|
|
expect(diags[0].messageText).toContain('Dir');
|
|
|
|
expect(diags[0].messageText).toContain('Base');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
describe('inline resources', () => {
|
|
|
|
it('should process inline <style> tags', () => {
|
|
|
|
env.write('test.ts', `
|
2019-02-26 17:48:42 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '<style>h1 {font-size: larger}</style>',
|
2019-11-23 18:36:00 -05:00
|
|
|
styles: ['h2 {width: 10px}']
|
2019-02-26 17:48:42 -05:00
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
2019-11-23 18:36:00 -05:00
|
|
|
expect(jsContents)
|
|
|
|
.toContain(
|
|
|
|
'styles: ["h2[_ngcontent-%COMP%] {width: 10px}", "h1[_ngcontent-%COMP%] {font-size: larger}"]');
|
2019-06-06 15:22:32 -04:00
|
|
|
});
|
2019-02-26 17:48:42 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
it('should process inline <link> tags', () => {
|
|
|
|
env.write('style.css', `h1 {font-size: larger}`);
|
|
|
|
env.write('test.ts', `
|
2019-02-26 17:48:42 -05:00
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: '<link rel="stylesheet" href="./style.css">',
|
|
|
|
})
|
|
|
|
export class TestCmp {}
|
|
|
|
`);
|
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
expect(jsContents).toContain('styles: ["h1[_ngcontent-%COMP%] {font-size: larger}"]');
|
|
|
|
});
|
2019-02-26 17:48:42 -05:00
|
|
|
});
|
2019-11-21 15:07:54 -05:00
|
|
|
|
|
|
|
describe('non-exported classes', () => {
|
|
|
|
beforeEach(() => env.tsconfig({compileNonExportedClasses: false}));
|
|
|
|
|
|
|
|
it('should not emit directive definitions for non-exported classes if configured', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Directive} from '@angular/core';
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[test]'
|
|
|
|
})
|
|
|
|
class TestDirective {}
|
|
|
|
`);
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
|
|
|
|
expect(jsContents).not.toContain('defineDirective(');
|
|
|
|
expect(jsContents).toContain('Directive({');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not emit component definitions for non-exported classes if configured', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Component} from '@angular/core';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'test',
|
|
|
|
template: 'hello'
|
|
|
|
})
|
|
|
|
class TestComponent {}
|
|
|
|
`);
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
|
|
|
|
expect(jsContents).not.toContain('defineComponent(');
|
|
|
|
expect(jsContents).toContain('Component({');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not emit module definitions for non-exported classes if configured', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: []
|
|
|
|
})
|
|
|
|
class TestModule {}
|
|
|
|
`);
|
|
|
|
env.driveMain();
|
|
|
|
const jsContents = env.getContents('test.js');
|
|
|
|
|
|
|
|
expect(jsContents).not.toContain('defineNgModule(');
|
|
|
|
expect(jsContents).toContain('NgModule({');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2019-12-11 11:59:05 -05:00
|
|
|
describe('undecorated providers', () => {
|
|
|
|
it('should error when an undecorated class, with a non-trivial constructor, is provided directly in a module',
|
|
|
|
() => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {NgModule, NgZone} from '@angular/core';
|
|
|
|
|
|
|
|
class NotAService {
|
|
|
|
constructor(ngZone: NgZone) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
providers: [NotAService]
|
|
|
|
})
|
|
|
|
export class SomeModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(1);
|
|
|
|
expect(diags[0].messageText).toContain('cannot be created via dependency injection');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should error when an undecorated class is provided via useClass', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {NgModule, Injectable, NgZone} from '@angular/core';
|
|
|
|
|
|
|
|
@Injectable({providedIn: 'root'})
|
|
|
|
class Service {}
|
|
|
|
|
|
|
|
class NotAService {
|
|
|
|
constructor(ngZone: NgZone) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
providers: [{provide: Service, useClass: NotAService}]
|
|
|
|
})
|
|
|
|
export class SomeModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(1);
|
|
|
|
expect(diags[0].messageText).toContain('cannot be created via dependency injection');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not error when an undecorated class is provided via useClass with deps', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {NgModule, Injectable, NgZone} from '@angular/core';
|
|
|
|
|
|
|
|
@Injectable({providedIn: 'root'})
|
|
|
|
class Service {}
|
|
|
|
|
|
|
|
class NotAService {
|
|
|
|
constructor(ngZone: NgZone) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
providers: [{provide: Service, useClass: NotAService, deps: [NgZone]}]
|
|
|
|
})
|
|
|
|
export class SomeModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should error when an undecorated class is provided via an array', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {NgModule, Injectable, NgZone} from '@angular/core';
|
|
|
|
|
|
|
|
@Injectable({providedIn: 'root'})
|
|
|
|
class Service {}
|
|
|
|
|
|
|
|
class NotAService {
|
|
|
|
constructor(ngZone: NgZone) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
providers: [Service, [NotAService]]
|
|
|
|
})
|
|
|
|
export class SomeModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(1);
|
|
|
|
expect(diags[0].messageText).toContain('cannot be created via dependency injection');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should error when an undecorated class is provided to a directive', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {NgModule, Directive, NgZone} from '@angular/core';
|
|
|
|
|
|
|
|
class NotAService {
|
|
|
|
constructor(ngZone: NgZone) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@Directive({
|
|
|
|
selector: '[some-dir]',
|
|
|
|
providers: [NotAService]
|
|
|
|
})
|
|
|
|
class SomeDirective {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [SomeDirective]
|
|
|
|
})
|
|
|
|
export class SomeModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(1);
|
|
|
|
expect(diags[0].messageText).toContain('cannot be created via dependency injection');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should error when an undecorated class is provided to a component', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {NgModule, Component, NgZone} from '@angular/core';
|
|
|
|
|
|
|
|
class NotAService {
|
|
|
|
constructor(ngZone: NgZone) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'some-comp',
|
|
|
|
template: '',
|
|
|
|
providers: [NotAService]
|
|
|
|
})
|
|
|
|
class SomeComponent {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [SomeComponent]
|
|
|
|
})
|
|
|
|
export class SomeModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(1);
|
|
|
|
expect(diags[0].messageText).toContain('cannot be created via dependency injection');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should error when an undecorated class is provided to a component via viewProviders',
|
|
|
|
() => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {NgModule, Component, NgZone} from '@angular/core';
|
|
|
|
|
|
|
|
class NotAService {
|
|
|
|
constructor(ngZone: NgZone) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'some-comp',
|
|
|
|
template: '',
|
|
|
|
viewProviders: [NotAService]
|
|
|
|
})
|
|
|
|
class SomeComponent {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [SomeComponent]
|
|
|
|
})
|
|
|
|
export class SomeModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(1);
|
|
|
|
expect(diags[0].messageText).toContain('cannot be created via dependency injection');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not error when a class with a factory is provided', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {NgModule, Pipe} from '@angular/core';
|
|
|
|
|
|
|
|
@Pipe({
|
|
|
|
name: 'some-pipe'
|
|
|
|
})
|
|
|
|
class SomePipe {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
declarations: [SomePipe],
|
|
|
|
providers: [SomePipe]
|
|
|
|
})
|
|
|
|
export class SomeModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not error when an NgModule is provided', () => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {Injectable, NgModule} from '@angular/core';
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
export class Service {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
})
|
|
|
|
class SomeModule {
|
|
|
|
constructor(dep: Service) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
providers: [SomeModule],
|
|
|
|
})
|
|
|
|
export class Module {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not error when an undecorated class from a declaration file is provided', () => {
|
|
|
|
env.write('node_modules/@angular/core/testing/index.d.ts', `
|
|
|
|
export declare class Testability {
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {NgModule} from '@angular/core';
|
|
|
|
import {Testability} from '@angular/core/testing';
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
providers: [Testability]
|
|
|
|
})
|
|
|
|
export class SomeModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not error when an undecorated class without a constructor from a declaration file is provided via useClass',
|
|
|
|
() => {
|
|
|
|
env.write('node_modules/@angular/core/testing/index.d.ts', `
|
|
|
|
export declare class Testability {
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {NgModule, Injectable} from '@angular/core';
|
|
|
|
import {Testability} from '@angular/core/testing';
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
class TestingService {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
providers: [{provide: TestingService, useClass: Testability}]
|
|
|
|
})
|
|
|
|
export class SomeModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not error if the undecorated class does not have a constructor or the constructor is blank',
|
|
|
|
() => {
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {NgModule, NgZone} from '@angular/core';
|
|
|
|
|
|
|
|
class NoConstructorService {
|
|
|
|
}
|
|
|
|
|
|
|
|
class BlankConstructorService {
|
|
|
|
}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
providers: [NoConstructorService, BlankConstructorService]
|
|
|
|
})
|
|
|
|
export class SomeModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should error when an undecorated class with a non-trivial constructor in a declaration file is provided via useClass',
|
|
|
|
() => {
|
|
|
|
env.write('node_modules/@angular/core/testing/index.d.ts', `
|
|
|
|
export declare class NgZone {}
|
|
|
|
|
|
|
|
export declare class Testability {
|
|
|
|
constructor(ngZone: NgZone) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {NgModule, Injectable} from '@angular/core';
|
|
|
|
import {Testability} from '@angular/core/testing';
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
class TestingService {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
providers: [{provide: TestingService, useClass: Testability}]
|
|
|
|
})
|
|
|
|
export class SomeModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(1);
|
|
|
|
expect(diags[0].messageText).toContain('cannot be created via dependency injection');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not error when an class with a factory definition and a non-trivial constructor in a declaration file is provided via useClass',
|
|
|
|
() => {
|
|
|
|
env.write('node_modules/@angular/core/testing/index.d.ts', `
|
|
|
|
import * as i0 from '@angular/core';
|
|
|
|
|
|
|
|
export declare class NgZone {}
|
|
|
|
|
|
|
|
export declare class Testability {
|
|
|
|
static ɵfac: i0.ɵɵFactoryDef<Testability>;
|
|
|
|
constructor(ngZone: NgZone) {}
|
|
|
|
}
|
|
|
|
`);
|
|
|
|
env.write('test.ts', `
|
|
|
|
import {NgModule, Injectable} from '@angular/core';
|
|
|
|
import {Testability} from '@angular/core/testing';
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
class TestingService {}
|
|
|
|
|
|
|
|
@NgModule({
|
|
|
|
providers: [{provide: TestingService, useClass: Testability}]
|
|
|
|
})
|
|
|
|
export class SomeModule {}
|
|
|
|
`);
|
|
|
|
|
|
|
|
const diags = env.driveDiagnostics();
|
|
|
|
expect(diags.length).toBe(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
2019-02-26 17:48:42 -05:00
|
|
|
});
|
2018-12-13 14:52:20 -05:00
|
|
|
|
2019-06-06 15:22:32 -04:00
|
|
|
function expectTokenAtPosition<T extends ts.Node>(
|
|
|
|
sf: ts.SourceFile, pos: number, guard: (node: ts.Node) => node is T): T {
|
|
|
|
// getTokenAtPosition is part of TypeScript's private API.
|
|
|
|
const node = (ts as any).getTokenAtPosition(sf, pos) as ts.Node;
|
|
|
|
expect(guard(node)).toBe(true);
|
|
|
|
return node as T;
|
|
|
|
}
|
|
|
|
|
|
|
|
function normalize(input: string): string { return input.replace(/\s+/g, ' ').trim(); }
|
|
|
|
});
|