Angular 13，类型错误：_angular_core__WEBPACK_IMPORTED_MODULE_12__。ɵɵstartElement(...) 不是函数

Question

应用程序成功构建并且 ng 服务运行。应用程序将无法成功运行/初始化。

从工作时到发生故障时，没有明显的打字稿代码更改，因此我专注于 html 模板和带有上下文的 tsconfig。

当生成的 main.js 的 html 模板逻辑运行时，在第二个子元素 elementStart 函数执行时，执行在某处/以某种方式失败。

core.mjs:6461 ERROR TypeError: _angular_core__WEBPACK_IMPORTED_MODULE_12__.ɵɵelementStart(...) is not a function
    at AppComponent_Template (app.component.html:2:1)
    at executeTemplate (core.mjs:9593:9)
    at renderView (core.mjs:9396:13)
    at renderComponent$1 (core.mjs:10677:5)
    at renderChildComponents (core.mjs:9261:9)
    at renderView (core.mjs:9421:13)
    at ComponentFactory.create (core.mjs:21574:13)
    at ApplicationRef.bootstrap (core.mjs:26377:42)
    at core.mjs:26060:64
    at Array.forEach (<anonymous>)

app.component.html（d-xxx 元素来自自定义构建角度库，我还构建/管理该库，该库已经过其他消费客户端的测试，并且正在其他项目上工作）

<div>
  <d-layout [staticNavItems]="navItems" [dynamicNavItems]="contextMenuItems" [subMenuButtonLabel]="subMenuLabel"
    subMenuButtonIcon="folder" [loadingMessage]="loadingMessage">
    <div>
      <d-nav-header>
        <div class="d__logo"></div>
        <span class="d__title">
          Some Title
        </span>
      </d-nav-header>
    </div>
    <div>
      <d-content-header class="d__header">
        <d-context-subject></d-context-subject>
        <d-header></d-header>
      </d-content-header>
    </div>
    <div>
      <d-content>
        <router-outlet></router-outlet>
      </d-content>
    </div>
  </d-layout>
</div>

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "module": "esnext",
    "importHelpers": true,
    "target": "es2020",
    "lib": [
      "es2015",
      "es2018",
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Answer 1

尽管 package.json 文件中为所有角度库指定的版本应该在整个板上产生相同的版本，但角度/编译器和角度/核心（以及其他关键角度库）之间存在版本不匹配。

Angular: 13.1.3    <===================
... animations, common, core, forms, platform-browser

Package                             Version
-------------------------------------------------------------
@angular-devkit/architect           0.1302.5
@angular-devkit/build-angular       13.2.5 <================
@angular-devkit/core                13.2.5
@angular-devkit/schematics          13.2.5
@angular/cdk                        13.2.5
@angular/cli                        13.2.5
@angular/compiler                   13.2.5
@angular/compiler-cli               13.2.5
@angular/language-service           13.2.5
@angular/material                   13.2.5
@angular/material-moment-adapter    13.2.5
@angular/platform-browser-dynamic   13.2.5
@angular/router                     13.2.5
@schematics/angular                 13.2.5
ng-packagr                          13.2.1
rxjs                                7.5.4
typescript                          4.5.5

尽管包锁定文件中有一些指示符表明所有版本都匹配，但它们并不匹配。

这可以通过运行此命令或类似命令来有针对性地进行验证：

npm ls @angular/core

我要感谢 Angular 团队帮助我解决此问题。这是答案和主题的链接。
https://github.com/angular/angular/issues/45265

Answer 2

我在使用 Angular 16 应用程序时遇到以下错误：

angular_core__WEBPACK_IMPORTED_MODULE_0_.ɵɵtemplate(...) 不是函数

在遵循 Daniel Hokanson 的响应并运行 npm ls @angular/core 后，我注意到我有 [电子邮件受保护]。

将该软件包安装到 ^16.0.0 清除了该错误。

我希望对某人有帮助