Angular: Bazel에서 tree-shakable 제공자가 작성한 잘못된 가져오기

Tree-shakable 공급자는 Angular 컴파일러를 트리거하여 이전에는 수행하지 않은 사용자 코드에 import 문을 도입합니다. 디스크의 모듈 경로를 모듈 이름과 결합하는 위치가 있음이 밝혀졌습니다(이전 버전의 컴파일러에는 이러한 구분이 없었습니다).
따라서 import {} from '@pkg_name/path/to/thing' 여야 하는 import {} from 'wksp/packages/path/to/thing' 와 같은 가져오기를 작성하게 됩니다.

우리가 아는 한, 이 문제는 ngc 로 컴파일하고 tree-shakable 공급자를 사용하는 Bazel 사용자에게만 영향을 미칩니다. 지금까지 우리는 이 문제를 Angular에서 내부적으로만 보았습니다.

이것은 #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");