无法分配给引用或变量中的角度产品构建错误答案

【问题标题】：Angular prod build error in Cannot assign to a reference or variable无法分配给引用或变量中的角度产品构建错误
【发布时间】：2020-01-18 13:37:10
【问题描述】：

我无法构建我的 Angular 应用程序的 prod 版本。

并且在 IDE 控制台中只有这条消息：

无法分配给引用或变量的错误！

所以我只有添加这些选项才能构建：

--aot=false --buildOptimizer=false

但是，即使使用这些选项，应用程序在部署后也会失败，并在浏览器控制台中显示此消息：

错误类型错误：无法读取未定义的属性“init”

通过添加一个选项可以是fixed：

--optimization=false

当我尝试用

构建时

npm run ng build -- --prod

我有一个包含一些信息的日志文件：

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Backend\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\USER_NAME\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'ng',
1 verbose cli   'build',
1 verbose cli   '--',
1 verbose cli   '--prod' ]
2 info using npm@6.10.2
3 info using node@v10.15.3
4 verbose run-script [ 'preng', 'ng', 'postng' ]
5 info lifecycle dont-play-with-gp-web@0.0.2~preng: dont-play-with-gp-web@0.0.2
6 info lifecycle dont-play-with-gp-web@0.0.2~ng: dont-play-with-gp-web@0.0.2
7 verbose lifecycle dont-play-with-gp-web@0.0.2~ng: unsafe-perm in lifecycle true
8 verbose lifecycle dont-play-with-gp-web@0.0.2~ng: PATH: C:\Users\USER_NAME\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\DEV\WebStormProjects\dont-play-with-gp-web\node_modules\.bin;C:\DEV\WebStormProjects\dont-play-with-gp-web\node_modules\.bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\Backend\IntelliJ IDEA 2018.3.5\jre64;C:\Backend\PostgreSQL\10\bin;C:\Backend\nodejs;C:\Backend\WinSCP\;C:\Android\sdk\platform-tools;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Users\USER_NAME\AppData\Local\Microsoft\WindowsApps;
9 verbose lifecycle dont-play-with-gp-web@0.0.2~ng: CWD: C:\DEV\WebStormProjects\dont-play-with-gp-web
10 silly lifecycle dont-play-with-gp-web@0.0.2~ng: Args: [ '/d /s /c', 'ng "build" "--prod"' ]
11 silly lifecycle dont-play-with-gp-web@0.0.2~ng: Returned: code: 1  signal: null
12 info lifecycle dont-play-with-gp-web@0.0.2~ng: Failed to exec ng script
13 verbose stack Error: dont-play-with-gp-web@0.0.2 ng: `ng "build" "--prod"`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\USER_NAME\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:326:16)
13 verbose stack     at EventEmitter.emit (events.js:189:13)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\USER_NAME\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:189:13)
13 verbose stack     at maybeClose (internal/child_process.js:970:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid dont-play-with-gp-web@0.0.2
15 verbose cwd C:\DEV\WebStormProjects\dont-play-with-gp-web
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\\Backend\\nodejs\\node.exe" "C:\\Users\\USER_NAME\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "ng" "build" "--" "--prod"
18 verbose node v10.15.3
19 verbose npm  v6.10.2
20 error code ELIFECYCLE
21 error errno 1
22 error dont-play-with-gp-web@0.0.2 ng: `ng "build" "--prod"`
22 error Exit status 1
23 error Failed at the dont-play-with-gp-web@0.0.2 ng script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

我尝试更新所有内容，但无济于事。

这是ng version的结果：

Angular CLI: 8.3.4
Node: 10.15.3
OS: win32 x64
Angular: 8.2.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.4
@angular-devkit/build-angular     0.803.4
@angular-devkit/build-optimizer   0.803.4
@angular-devkit/build-webpack     0.803.4
@angular-devkit/core              8.3.4
@angular-devkit/schematics        8.3.4
@angular/cdk                      8.2.0
@angular/cli                      8.3.4
@angular/flex-layout              8.0.0-beta.27
@angular/material                 8.2.0
@ngtools/webpack                  8.3.4
@schematics/angular               8.3.4
@schematics/update                0.803.4
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

还有我的package.json：

{
  "name": "dont-play-with-gp-web",
  "version": "0.0.2",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.2.6",
    "@angular/cdk": "^8.2.0",
    "@angular/common": "~8.2.6",
    "@angular/compiler": "~8.2.6",
    "@angular/core": "~8.2.6",
    "@angular/flex-layout": "8.0.0-beta.27",
    "@angular/forms": "~8.2.6",
    "@angular/material": "^8.2.0",
    "@angular/platform-browser": "~8.2.6",
    "@angular/platform-browser-dynamic": "~8.2.6",
    "@angular/router": "~8.2.6",
    "angular-markdown-editor": "^2.0.2",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "ngx-infinite-scroll": "^8.0.0",
    "ngx-markdown": "^8.1.0",
    "ngx-material-file-input": "^2.0.0",
    "rxjs": "~6.5.3",
    "tslib": "^1.9.0",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.4",
    "@angular/cli": "~8.3.4",
    "@angular/compiler-cli": "~8.2.6",
    "@angular/language-service": "~8.2.6",
    "@types/jasmine": "~3.4.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.31",
    "@types/node": "~12.7.5",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0",
    "typescript": "^3.5.3"
  }
}

那么，在这种情况下我该怎么办？如何找到错误原因以及如何解决？

如果有帮助的话-有我的源代码：

https://bitbucket.org/mohaxspb/gp-web/commits/tag/ATTEMPT_TO_FIX_PROD_BUILD_WITH_DEPS_UPDATE

ru.stackoverflow 上的相同问题：https://ru.stackoverflow.com/questions/1025395

SOVLED：

最后我有错误原因（SO用户https://stackoverflow.com/users/10123947/shadow找到它）：尝试更改模板中变量的值，在自制指令的帮助下在模板中定义。

这里的问题是错误消息很差。提到的用户仅通过调试编译器收到详细信息（据我了解）。有一些细节（俄语）：https://ru.stackoverflow.com/a/1025417/17609

更新：

我将问题和 PR 添加到 Angular 存储库以修复它。

错误消息中没有详细信息：issue、PR
为模板变量赋值会导致产品构建崩溃：issue、PR

【问题讨论】：

标签： angular typescript npm angular-cli

【解决方案1】：

看起来像是给出问题的变量的名称之一，真的很难假设是哪个变量给出了问题，并且在这里为任何人进行调试会耗费大量时间。我建议您检查所有ngIf、ngModel、ngFor 等...很可能您正尝试在项目中的某个地方使用相同的变量名称。

【讨论】：

感谢您的建议。我会尝试找到类似的东西。现在我尝试删除所有组件，它有帮助 - 产品构建成功。所以我会尝试添加组件，直到它们破坏构建。
最后我有错误原因（所以用户stackoverflow.com/users/10123947/shadow找到它）：尝试更改模板中变量的值，在自制指令的帮助下在模板中定义。这里的问题是错误消息。提到的用户仅通过调试编译器（据我了解）收到详细信息。有一些细节（俄语）：ru.stackoverflow.com/a/1025417/17609
是的，正如我所说的，我建议你只是注释掉具有ngIf、ngModel、ngFor 的部分然后尝试编译它是一个乏味的过程，所以我认为没有人可以在这里为您提供帮助。
是的，模板中有很多ng，所以很难找到一个，这会引发错误。但在我的情况下，错误出现在(change)。我使用自制指令，它允许在模板中定义变量，并在(change) 中尝试更改其值。类似(change)= "myTemplateVariable = someValue"

【解决方案2】：

碰巧 AST 解析器的大多数异常都令人头疼。只是因为他们没有携带任何有用的东西，除了一条消息：

无法分配给引用或变量中的错误！

真的吗？

例如，链接器 (ViewBuilder) 总是写它无法构建模板表达式的地方。

谷歌搜索可能是解决方案之一。但是整个圈子都将关闭，因为大多数答案都会提供检查模板中 ngModel 指令的使用情况。

第二个选项有点硬编码。值得进入编译器本身并进行调试。 Angular 在编译期间使用node_modules/@angular/compiler/bundles/compiler.umd.js。

让我们打开这个文件并尝试搜索文本Cannot assign to a reference or variable!。我们将找到_AstToIrVisitor 类和visitPropertyWrite 方法。有这么一行代码

// Otherwise it's an error.
throw new Error('Cannot assign to a reference or variable!');

在没有任何信息的情况下抛出异常?

让我们在异常前添加console.log(ast)，其中ast是visitPropertyWrite函数的参数。解析器会将PropertyWrite 类的实例记录到控制台：

PropertyWrite {
  span: ParseSpan { start: 0, end: 73 },
  receiver: ImplicitReceiver { span: ParseSpan { start: 0, end: 0 } },
  name: 'translation',
  value: MethodCall {
    span: ParseSpan { start: 14, end: 73 },
    receiver: ImplicitReceiver { span: [ParseSpan] },
    name: 'getTranslationForLanguageFromArticle',
    args: [ [PropertyRead], [PropertyRead] ]
  }
}

我们得出的结论是，我们必须了解translation 属性和getTranslationForLanguageFromArticle 方法调用之间的关系。当我试图从 Bitbucket 克隆您的示例时，我查找了“getTranslationForLanguageFromArticle”用法，并在 feed.component.html 中找到了这一行：

(change)="translation = getTranslationForLanguageFromArticle($event.value, article)"

这是解析器无法理解的，因为translation 不是类属性。它是在 *ngVar 指令中隐式访问的本地 ng-template 变量。

我会在组件内部创建一些类似changeTranslation 的方法，并在那里使用article.translations[indexOfCorrectArticleTranslation(article)] 进行操作。

至少你知道该走哪条路:)

【讨论】：

我找到了一种方法来使用我的指令并且不会破坏产品构建。但这需要编辑编译器脚本here
检查模板if (localExpr instanceof ReadPropExpr)中的表达式类型，如果再添加一个条件|| localExpr instanceof ReadVarExpr)，一切正常（产品构建成功，以便在浏览器中部署和运行）。明天我将尝试通过示例创建对编译器的拉取请求。还有一种方法可以通过在错误消息中添加JSON.stringify(ast) 在error 中提供更多信息。
这帮助我们找到了一些绑定错误，非常感谢您的详细解释！
第二个选项对我来说效果很好。在我的情况下，问题是双向数据绑定 [(property)]，而子组件中没有 propertyChange 输出。

【解决方案3】：

如果我可以添加...当我将模板控件命名为与我的类的绑定属性相同时，我收到了这个错误。像这样：

<input type="password" class="form-control" name="passwordConfirmation" #passwordConfirmation="ngModel" [(ngModel)]="passwordConfirmation"/>

“passwordConfirmation”是模板中控件的名称和组件类的属性/变量的名称。这似乎让编译器感到困惑，因为它试图绑定到模板变量而不是类属性。

【讨论】：

【解决方案4】：

在我的情况下，使用 [(ngValue)] 而不是 [ngValue]

【讨论】：