Angular: बेज़ेल के तहत ट्री-शेकेबल प्रदाताओं द्वारा लिखा गया गलत आयात

ट्री-शेकेबल प्रदाता उपयोगकर्ता के कोड में आयात विवरण पेश करने के लिए एंगुलर कंपाइलर को ट्रिगर करते हैं, जो हमने पहले नहीं किया था। यह पता चला है कि हमारे पास ऐसे स्थान हैं जहां हम मॉड्यूल नामों के साथ डिस्क पर मॉड्यूल पथों को मिलाते हैं (कंपाइलर के पहले के संस्करणों में यह अंतर नहीं था)
तो हम जैसे आयात लेखन अंत import {} from 'wksp/packages/path/to/thing' कि किया जाना चाहिए था import {} from '@pkg_name/path/to/thing'

जहाँ तक हम जानते हैं, यह समस्या केवल Bazel उपयोगकर्ताओं को प्रभावित करती है जो ngc साथ संकलित करते हैं और ट्री-शेकेबल प्रदाताओं का उपयोग करते हैं। अब तक हमने इस मुद्दे को केवल कोणीय में आंतरिक रूप से देखा है।

यह #20030 . के हिस्से के रूप में पाया गया

रिप्रो के लिए, एक पेड़ को हिलाने योग्य प्रदाता जोड़ें जैसे packages/common/src/common_module.ts में पेस्ट करें

import {Injectable, PLATFORM_ID} from '@angular/core';
import {DOCUMENT, isPlatformBrowser} from '@angular/common';

export function viewportScrollerFactory(platformId: string, document: any) {
  return isPlatformBrowser(platformId) ? null: null;
}

@Injectable(
    {providedIn: 'root', useFactory: viewportScrollerFactory, deps: [PLATFORM_ID, DOCUMENT]})
export abstract class ViewportScroller {}

फिर npm पैकेज बनाएं

bazel build //packages/common:npm_package

और आउटपुट में स्ट्रिंग angular/packages की तलाश करें:

$ export bin=$(bazel info bazel-bin)
$ find $bin -type f -exec fgrep -l angular/packages {} \; | grep -v ngsummary | grep -v ngfactory

हम ngsummary फ़ाइलों को हटा देते हैं क्योंकि इनमें हमेशा डिस्क पर मॉड्यूल पहचानकर्ता के रूप में पथ होते हैं।
ngfactory फ़ाइलें पैकेज के साथ नहीं भेजी जाती हैं, इसलिए ये शायद हानिरहित भी हैं।

दिलचस्प बात यह है कि हम ES2015 आउटपुट में खराब आयात पाते हैं:

bin/packages/common/src/common_module.closure.js

/**
 * <strong i="28">@fileoverview</strong> added by tsickle
 * <strong i="29">@suppress</strong> {checkTypes} checked by tsc
 */
/**
 * <strong i="30">@license</strong>
 * Copyright Google Inc. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */
import { NgModule } from '@angular/core';
import { COMMON_DIRECTIVES } from './directives/index';
import { DEPRECATED_PLURAL_FN, NgLocaleLocalization, NgLocalization, getPluralCase } from './i18n/localization';
import { COMMON_DEPRECATED_I18N_PIPES } from './pipes/deprecated/index';
import { COMMON_PIPES } from './pipes/index';
import { Injectable, PLATFORM_ID } from '@angular/core';
import { DOCUMENT, isPlatformBrowser } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "@angular/core/src/application_tokens";
import * as i2 from "angular/packages/common/src/dom_tokens";  // <-------------------------

लेकिन ES5 आउटपुट में नहीं

bin/packages/common/src/common_module.js

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define("@angular/common/src/common_module", ["require", "exports", "tslib", "@angular/core", "@angular/common/src/directives/index", "@angular/common/src/i18n/localization", "@angular/common/src/pipes/deprecated/index", "@angular/common/src/pipes/index", "@angular/core", "@angular/common", "@angular/core", "@angular/core/src/application_tokens", "@angular/common/src/dom_tokens"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var tslib_1 = require("tslib");
    var core_1 = require("@angular/core");
    var index_1 = require("@angular/common/src/directives/index");
    var localization_1 = require("@angular/common/src/i18n/localization");
    var index_2 = require("@angular/common/src/pipes/deprecated/index");
    var index_3 = require("@angular/common/src/pipes/index");
    var core_2 = require("@angular/core");
    var common_1 = require("@angular/common");
    var i0 = require("@angular/core");
    var i1 = require("@angular/core/src/application_tokens");
    var i2 = require("@angular/common/src/dom_tokens");