@ngtools/webpack - enable sourceMap generates different build

@ngtools/webpack produces different javascript output if you toggle the sourceMap setting. With source maps enabled, the compiler seems to include imports, that shouldn’t be there.

Angular: 8.0.0 (but issue is present in 7.2.x as well) Reproduction: https://github.com/sod/issue-ngtools-14617

Compare both dist-* folders. The only difference in the build is the --source-map flag. In one build the chunk big-dependency is missing and was inlined by webpack.

You can try to build it yourself with either one:

ng build --prod --aot --build-optimizer --source-map
ng build --prod --aot --build-optimizer

If you watch the output with --source-map of the ngtools/webpack loader in https://github.com/angular/angular-cli/blob/master/packages/ngtools/webpack/src/loader.ts#L104, I see for the file https://github.com/sod/issue-ngtools-14617/blob/master/src/app/lorem/lorem.service.ts this output:

import { BigDependencyOptions } from 'src/app/lorem/big-dependency';
import * as i0 from "@angular/core";
var bigDependencyLoader = function () { return import(/* webpackChunkName: "big-dependency" */ '../lorem/big-dependency'); };
var ɵ0 = bigDependencyLoader;
var LoremService = /** @class */ (function () {
    function LoremService() {
    }
    LoremService.prototype.load = function (options) {
        return bigDependencyLoader().then(function (m) { return new m.BigDependency().setOptions(options); });
    };
    LoremService.ngInjectableDef = i0.ɵɵdefineInjectable({ factory: function LoremService_Factory() { return new LoremService(); }, token: LoremService, providedIn: "root" });
    return LoremService;
}());
export { LoremService };
export { ɵ0 };

BigDependencyOptions is an Interface and only used as a type, that import should not be visible in javascript. If you throw the source into typescriptlang, you see that tsc wouldn’t include that import as well.

We use an error reporting tool where we can upload the source maps to get better reports. But this behavior increases our build by ~100kb so we compile without source maps right now.

[filipesilva]

https://github.com/angular/angular-cli/pull/16085 should fix this.

What happened was this:

• we remove angular decorators as a transformation to speed up builds by removing unneeded symbols
• when a transform removes references, TS doesn’t know it should remove their imports
• thus we manually add a pass to remove imports whenever we remove or modify nodes
• in this example our import removing pass identified both BigDependency and import {Injectable} from '@angular/core; for removal
• removing BigDependency altered the original import {BigDependency, BigDependencyOptions} from 'src/app/lorem/big-dependency'; and caused TypeScript to not identify BigDependencyOptions for removal anymore.

Now we correctly identify type references as not being a usage for an import, for eliding purposes.

[angular-automatic-lock-bot[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.}