刚刚从 9.0 更新到 Angular 10

在我的代码中每次使用 Optional Chaining ( https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining ) 现在都会导致以下错误的实例

ERROR in ./src/app/app.component.ts 39:18
Module parse failed: Unexpected token (39:18)
File was processed with these loaders:
 * ./node_modules/@ngtools/webpack/src/index.js
You may need an additional loader to handle the result of these loaders.
|         this.title = 'my-app';
|         const x = this.GetObject();
>         let y = x?.myvar;
|     }

我确认此错误仅在按照我的 tsconfig.base.json 文件中的以下内容定位 es2020 时发生，但在定位 es2019 时没问题

"target": "es2020",  //If set to es2019 then all OK
"module": "es2020",
"lib": [
   "es2018", …

我正在使用 Angular Universal 10，我想预渲染我的网站。

我对生产环境的正确构建过程感到困惑。

Angular 给出了这两个命令：

"build:ssr": "ng build --prod && ng run my-app.spa:server:production",
"prerender": "ng run my-app.spa:prerender"

仅仅这样做就足以获得生产就绪的输出吗？

npm run prerender

或者我需要同时运行这两个？

npm run build:ssr
npm run prerender

有什么不同？

我和同事正试图弄清楚为什么编译时间不同。我们拥有完全相同的戴尔笔记本电脑 7030 型号、相同的固态硬盘、相同的硬盘、相同的内存和规格。我们的任务管理器流程看起来很相似。

公司订购相同型号的计算机。

我们正在从 Angular Git Repository 下载，带有配置和包 json，具有相同的节点大小内存。

问题是，我们的笔记本电脑之间的初始构建是 2 分钟，而 8 分钟。

当我们在同一个文件中编辑一个单词时，他只需要 5 秒重新编译，我需要 20 秒。只有在同一台计算机上运行的程序才是 Angular 命令 ng serve。

有没有人有解决这个问题的想法，编译时间很慢？

有什么我可以在我的工作站中改变编译速度的东西吗？

为所有同事尝试了解决方案，仍然很慢

• 我们有相同的 Node.js 版本
• 在公司项目 Git Repo 中从 Angular 8 更新到 10
• 试过了 npm cache clear
• 尝试卸载和重新安装 Angular 和 Nodejs
• 来自 Windows 的磁盘扫描程序不会在 SSD 驱动器上显示错误
• 将 package-lock.json 与同事进行比较，它们完全相同，在源代码控制差异中进行比较
• 在 Angular Git 文件夹上打开 Windows Defender 排除

资源：

Angular 编译很慢

如何加快 Angular 构建过程

更新：

刚刚注意到我的笔记本电脑在 style.scss 文件上真的停顿在 48%

将 Angular 项目升级到 Angular 10 后，ngRx 效果单元测试开始出现问题。升级后报错如下：

遇到同样的问题，按照解决方案。

谢谢，

当我对 mat-table 的一列进行排序时，我无法再扩展我的行，只有大约二分之一仍然有效。虽然在没有排序的情况下一切正常。\n我遇到了这个链接： https: //github.com/angular/components/issues/11990#issuecomment-421075196 \n但这根本不能解决任何问题

组件.html：

            <td mat-cell class="expandable-row" *matCellDef="let element" [attr.colspan]="displayedColumns.length">\n                <div *ngIf="element.codeTicket === expandedSymbol" class="container">\n                    <div class="row">\n                        <div class=" col-md-1"></div>\n                        <div class=" col-md-10">\n                            <mat-card >\n                                <p style="white-space: pre-wrap;"><span class="badge badge-pill badge-light" id="badge">Description :</span>{{element.description}}</p>\n                                <div>\n                                    <mat-chip-list #chipList aria-label="Mots Cl\xc3\xa9s">\n                                        <span class="badge badge-pill badge-light" id="badge">Label :</span>\n                                        <mat-chip *ngFor="let mot of element.motCles" matTooltip="{{mot.categorie.libelle}}"\n                                                  [ngClass]="{\'secondClass\': mot.codeCategorie === 1,\'firstClass\': mot.codeCategorie === 2,\'thirdClass\': mot.codeCategorie === 3,\'quatriemeClass\': mot.codeCategorie === 4,\'cinquiemeClass\': mot.codeCategorie === 5,\'sixiemeClass\': mot.codeCategorie === 6,\'spetiemeClass\': mot.codeCategorie === 7 }">{{mot.libelle}}</mat-chip>\n                                    </mat-chip-list>\n                                </div>\n …

我已将 angular 应用程序更新到最新版本，并不断收到来自@aws-amplify 的警告消息。我知道 angular 10 不建议使用 commonjs。由于@aws-amplify 就在那里，我该如何删除警告？

我尝试在 angular.json 中添加 allowedCommonJsDependencies

 "allowedCommonJsDependencies": [
          "crypto-js", "@aws-sdk/eventstream-marshaller", "buffer", "js-cookie", 
          "@aws-crypto", "zen-observable", "@aws-sdk/util-utf8-node", "@aws-crypto/sha256-js", "@aws-sdk/util-buffer-from",
          "@aws-sdk/smithy-client", "@aws-sdk/middleware-serde", "@aws-sdk/middleware-user-agent",
          "@aws-sdk/middleware-retry", "@aws-sdk/middleware-signing", "@aws-sdk/middleware-content-length",
          "@aws-sdk/middleware-host-header", "@aws-sdk/config-resolver", "@aws-sdk/s3-request-presigner",
          "@aws-sdk/util-format-url", "@aws-sdk/util-create-request", "@aws-sdk/property-provider",
          "axios", "@aws-sdk/fetch-http-handler", "@aws-sdk/protocol-http", "@aws-sdk/querystring-builder",
          "@aws-sdk/util-utf8-browser", "@aws-sdk/url-parser-browser", "@aws-crypto/sha256-browser",
          "@aws-sdk/url-parser-node", "@aws-sdk/util-uri-escape", "@aws-sdk/middleware-sdk-s3",
          "@aws-sdk/middleware-bucket-endpoint", "@aws-sdk/querystring-parser", "@aws-sdk/middleware-apply-body-checksum",
          "@aws-sdk/middleware-ssec", "@aws-sdk/middleware-expect-continue", "fast-xml-parser",
          "@aws-sdk/xml-builder", "@aws-sdk/md5-js", "@aws-sdk/hash-blob-browser",
          "@aws-sdk/eventstream-serde-browser", "@aws-sdk/middleware-location-constraint", "uuid",
          "@aws-sdk/credential-provider-cognito-identity", "@aws-sdk/eventstream-serde-config-resolver",
          "@aws-sdk/client-s3","@aws-sdk/client-pinpoint",
          "ulid", "zen-push", "lodash", "@aws-amplify/core", "@aws-amplify/analytics","@aws-amplify/ui-components"
          ]

警告

WARNING in /Users/macbook/Projects/src/app/shared/components/forms/datepicker/datepicker.component.ts depends on 'inputmask'. CommonJS or AMD dependencies can cause …

我有一个可观察量，我想在 ngIf 中创建一个变量，并且仅在值为 null 时返回 false （可观察量返回一个数字）

我需要显式检查 null，因为我的 observable 可以返回 0 作为触发 else 块的值。

我尝试过以下方法

*ngIf="(observable$ | async) as obs; obs !== null; esle #elseTemplate"

*ngIf="((observable$ | async) as obs) !== null; esle #elseTemplate"

*ngIf="(observable$ | async) !== null; $implicit = obs; else #elseTemplate"
// this returns the boolean 

我当前的解决方案看起来不太优雅是

*ngIf="(observable$ | async) !== null; esle #elseTemplate"
{{ observable$ | async }}

我正在使用 Angular 10。

我有一个 Angular 应用程序，可以通过ng serve. 该应用程序也可以通过 正确构建ng build --prod，但是当我在浏览器中运行生成的源时，出现以下错误：

TypeError: $m.Subject is not a constructor
    at new e (error-handling.service.ts:8)
    at core.js:21140
    at Rs (core.js:21136)
    at Os (core.js:21075)
    at Gs.get (core.js:21628)
    at pu (core.js:21997)
    at du (core.js:21876)
    at su (core.js:21753)
    at Xd (core.js:30266)
    at Yd (core.js:30175)
    at Object.dh [as createRootView] (core.js:30688)
    at Ns.create (core.js:21357)
    at io.create (core.js:19158)
    at e.bootstrap (core.js:28031)
    at core.js:27742
    at Array.forEach (<anonymous>)
    at e._moduleDoBootstrap (core.js:27742)
    at core.js:27712
    at l.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.js:27149)
    at l.invoke …

角度的新手，我正在尝试使用 ScrollTrigger 进行水平滚动。

它可以工作，但是当我提供或构建时，出现错误：“元素”类型上不存在属性“offsetWidth”。

这是 gsap 的代码：

gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".panel-container",
    pin: true,
    scrub: 1,
    snap: 1 / (sections.length - 1),
    end: () => "+=" + document.querySelector(".panel-container").offsetWidth
  }
});

即使我得到它工作的错误，当我控制台记录“document.query ..”时，我得到了很好的元素宽度。

但是该错误阻止我进行 ng build。我已经做了演员的事情，首先是：

let myElem = document.querySelector(".panel-container").offsetWidth as HTMLElement;

或者之前，但这不起作用，我有一条带有红色下划线的行，并带有错误消息：将类型“字符串”转换为类型“HTMLElement”可能是错误的，因为两种类型都与另一种类型没有充分重叠。

我的角度项目是 10.0.5。

在回复中尝试了解决方案：

(document.querySelector(".panel-container") as HTMLElement).offsetWidth;

但是在红色下划线上出现此错误，但在我发球时在控制台中没有。

将 'Element' 类型转换为 'HTMLElement' 类型可能是错误的，因为这两种类型与另一种类型都没有足够的重叠。如果这是故意的，请先将表达式转换为“未知”。“元素”类型缺少“HTMLElement”类型中的以下属性：accessKey、accessKeyLabel、autocapitalize、dir 和 105 more.ts(2352)

我有一个小 Angular 应用程序，我在其中使用PrimeNG components。由于我进行了 Angular 10 更新，我收到以下警告：

CommonJS 或 AMD 依赖项可能会导致优化救助。

对于不同的 PirmeNg 组件。

我已经试过了：

"allowedCommonJsDependencies": [
              "loadsh",
              "primeng/primeng",
              "primeicons",

这是官方主页上的建议

我做的另一个尝试是检查这篇文章中提到的导入

import { x } from '@auth/auth....'           // Warning
...to...
import { x } from '../auth/...'              // Warning goes away

但是由于我在开始时没有任何带有“@”的导入，我想知道如何修复或抑制此警告？

编辑：

详细错误：

'path' 中的警告取决于 'chartjs'。CommonJS 或 AMD 依赖项可能会导致优化救助。