Angular: Falsche Importe, die von Tree-Shakable-Anbietern unter Bazel . geschrieben wurden

Tree-shakable-Anbieter lösen den Angular-Compiler aus, um Importanweisungen in den Code des Benutzers einzuführen, was wir zuvor nicht getan haben. Es stellt sich heraus, dass wir Orte haben, an denen wir Modulpfade auf der Festplatte mit Modulnamen verschmelzen (frühere Versionen des Compilers hatten diese Unterscheidung nicht).
Am Ende schreiben wir also Importe wie import {} from 'wksp/packages/path/to/thing' , die import {} from '@pkg_name/path/to/thing'

Soweit wir wissen, betrifft dieses Problem nur Bazel-Benutzer, die mit ngc kompilieren und Tree-Shakable-Anbieter verwenden. Bisher haben wir dieses Problem nur intern in Angular gesehen.

Dies wurde als Teil von #20030 gefunden

Um zu reproduzieren, fügen Sie einen baumschüttelbaren Anbieter hinzu, z. B. fügen Sie in 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 {}

dann baue das npm-Paket

bazel build //packages/common:npm_package

Und suchen Sie in der Ausgabe nach der Zeichenfolge angular/packages :

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

Wir entfernen ngsummary-Dateien, da diese immer Pfade auf der Festplatte als Modulbezeichner hatten.
ngfactory-Dateien werden nicht mit dem Paket geliefert, daher sind diese wahrscheinlich auch harmlos.

Interessanterweise finden wir den schlechten Import in der Ausgabe von 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";  // <-------------------------

aber nicht im ES5-Ausgang

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");