feat(@angular-devkit/build-angular): differential loading check

[manfredsteyer]

No description provided.

[mgechev]

Exciting to see this getting started :)

[alan-agius4]

I think there is a bit of misunderstanding here, specs are usefully next to the feature file. These specs in in this folder are usefully used to test the architect and named large.

These are more of an integration test rather than a unit. Unit tests should reside next to the feature.

Also, we should not interact with the File System directly, we should use the Abstraction layer as this would reduce a couple of things.

1. Makes mocking easier.
2. No need to create a physical file for each test.
3. Have the mocks as part of the spec file hence makes the test more readable.

const workspaceRoot = path.join(
  devkitRoot,
  'tests/angular_devkit/build_angular/test-differential-loading/');
const host = new TestProjectHost(normalize(workspaceRoot));

describe('differential loading', () => {
  it('detects the need for ES5 if IE 9-11 has to be supported', () => {
    const path = normalize('/browerlist');
    host.writeMultipleFiles({
        path: 'last 1 chrome version'
    });
    const es5SupportNeeded = isEs5BrowserSupportNeeded(workspaceRoot, path);
    expect(es5SupportNeeded).toBe(true);
  });
});

The host itself has a lot for method, that can help you with transforming a file, overriding it's content, delete it etc..., the important one is that it will never override the file on the hard drive.

[alan-agius4]

Umm actually TestProjectHost seems to be deprecated, @clydin what's the new preferred way to approach this?

[alan-agius4]

Still pending.

[manfredsteyer]

I've tried this. While this totally makes sense, it seems that in this very case, using the virtual filesystem does not work. The reason is that browserslist has its own machanism for finding and loading the browswerslist config. This one isn't using the virtual filesystem.

[alan-agius4]

This should work, as the TestProjectHost writes files to disks.

See below;

If you need a hand let me know.

[manfredsteyer]

It seems to be a Windows-related issue: host.root() returns sth like /c/my-dir instead of c:/my-dir. The forward slashes are no issue here.

[alan-agius4]

Yeah, that is expected if you pass a devkit path directly to the method yourself that is using FS.

Devkit paths are always posix normalised, which means on windows c:\\ will be /c/ which means that any interaction with FS will fail on windows. Devkit paths/methods cannot be used with direct interaction with fs.

The projectRoot, is normalised is passed from wco. See https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/browser/index.ts#L127

The safest and cleaner approach would be changing the projectRoot to Path and using getSystemPath

export function isDifferentialLoadingNeeded(
  projectRoot: Path,
  target: ts.ScriptTarget): boolean {

   const supportES2015 = target !== ts.ScriptTarget.ES3 && target !== ts.ScriptTarget.ES5;
  const browsersList: string[] = browserslist(
    undefined, {
      path: getSystemPath(projectRoot),
    });

   return supportES2015 && !caniuse.isSupported('es6-module', browsersList.join(', '));
}

[manfredsteyer]

Thanks!

[alan-agius4]

Comments above.

[alan-agius4]

@manfredsteyer is this absolute in favor of the other PR or not?

[manfredsteyer]

@manfredsteyer is this absolute in favor of the other PR or not?

Yes, it is needed by the other one, @alan-agius4

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}