Angular 无法分配给引用或变量的产品构建错误
Angular prod build error in Cannot assign to a reference or variable
我无法构建我的 angular 应用程序的生产版本。
并且 IDE 控制台中只有这条消息：
ERROR in Cannot assign to a reference or variable!
所以只有添加这些选项我才能构建：
--aot=false --buildOptimizer=false
但是，即使有这些选项，应用程序在部署后也会失败，并在浏览器控制台中显示以下消息：
ERROR TypeError: Cannot read property 'init' of undefined
可以通过添加一个选项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\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.Whosebug 的相同问题：https://ru.whosebug.com/questions/1025395
SOVLED:
最后我有错误原因（所以用户 https://whosebug.com/users/10123947/shadow 找到了）：试图更改模板中变量的值，在模板中借助自制指令定义。
这里的问题是糟糕的错误消息。提到的用户仅通过调试编译器收到详细信息（据我所知）。有一些细节（俄语）：https://ru.whosebug.com/a/1025417/17609
更新：
我将问题和 PR 添加到 angular 存储库以修复它。
看起来像是出现问题的变量名称之一，真的很难假设是哪个变量出现问题，而且调试这对这里的任何人来说都非常耗时。我建议您检查所有 ngIf、ngModel、ngFor 等...很可能您正试图在项目的某个地方使用相同的变量名称。
碰巧大多数AST解析器的异常都让人头疼。只是因为它们没有携带任何有用的东西，除了一条消息：
ERROR in Cannot assign to a reference or variable!
哦，真的吗？
例如，链接器(ViewBuilder)总是写入它不能构建模板表达式的地方。
谷歌搜索可能是解决方案之一。但是，由于大多数答案会提供检查模板中的 ngModel 指令用法这一事实，整个圈子将被关闭。
第二个选项有点硬编码。值得进入编译器本身并进行调试。 Angular 在编译期间使用 node_modules/@angular/compiler/bundles/compiler.umd.js。
让我们打开这个文件并尝试搜索文本 Cannot assign to a reference or variable!。我们会找到 _AstToIrVisitor class 和 visitPropertyWrite 方法。有这么一行代码
// Otherwise it's an error.
throw new Error('Cannot assign to a reference or variable!');
在没有任何信息的情况下抛出异常
让我们在异常前添加console.log(ast)，其中ast是visitPropertyWrite函数的参数。解析器会将 PropertyWrite class 的实例记录到控制台：
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 不是 class 属性。它是在 *ngVar 指令中隐式访问的局部 ng-template 变量。
我会在组件内部创建一些类似 changeTranslation 的方法，并在那里使用 article.translations[indexOfCorrectArticleTranslation(article)] 进行操作。
至少你知道该走哪条路:)
如果我可以添加...我遇到了这个错误，当我将模板控件命名为与我的 class 的绑定 属性 相同时。像这样：
<input type="password" class="form-control" name="passwordConfirmation" #passwordConfirmation="ngModel" [(ngModel)]="passwordConfirmation"/>
"passwordConfirmation" 是模板中控件的名称和组件 class 的 property/variable 的名称。这似乎让编译器感到困惑，因为它试图绑定到模板变量而不是 class 属性.
在我的例子中，使用 [(ngValue)] 而不是 [ngValue]
我无法构建我的 angular 应用程序的生产版本。
并且 IDE 控制台中只有这条消息：
ERROR in Cannot assign to a reference or variable!
所以只有添加这些选项我才能构建：
--aot=false --buildOptimizer=false
但是，即使有这些选项，应用程序在部署后也会失败，并在浏览器控制台中显示以下消息：
ERROR TypeError: Cannot read property 'init' of undefined
可以通过添加一个选项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\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.Whosebug 的相同问题：https://ru.whosebug.com/questions/1025395
SOVLED:
最后我有错误原因（所以用户 https://whosebug.com/users/10123947/shadow 找到了）：试图更改模板中变量的值，在模板中借助自制指令定义。
这里的问题是糟糕的错误消息。提到的用户仅通过调试编译器收到详细信息（据我所知）。有一些细节（俄语）：https://ru.whosebug.com/a/1025417/17609
更新：
我将问题和 PR 添加到 angular 存储库以修复它。
看起来像是出现问题的变量名称之一，真的很难假设是哪个变量出现问题，而且调试这对这里的任何人来说都非常耗时。我建议您检查所有 ngIf、ngModel、ngFor 等...很可能您正试图在项目的某个地方使用相同的变量名称。
碰巧大多数AST解析器的异常都让人头疼。只是因为它们没有携带任何有用的东西，除了一条消息：
ERROR in Cannot assign to a reference or variable!
哦，真的吗？
例如，链接器(ViewBuilder)总是写入它不能构建模板表达式的地方。
谷歌搜索可能是解决方案之一。但是，由于大多数答案会提供检查模板中的 ngModel 指令用法这一事实，整个圈子将被关闭。
第二个选项有点硬编码。值得进入编译器本身并进行调试。 Angular 在编译期间使用 node_modules/@angular/compiler/bundles/compiler.umd.js。
让我们打开这个文件并尝试搜索文本 Cannot assign to a reference or variable!。我们会找到 _AstToIrVisitor class 和 visitPropertyWrite 方法。有这么一行代码
// Otherwise it's an error.
throw new Error('Cannot assign to a reference or variable!');
在没有任何信息的情况下抛出异常
让我们在异常前添加console.log(ast)，其中ast是visitPropertyWrite函数的参数。解析器会将 PropertyWrite class 的实例记录到控制台：
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 不是 class 属性。它是在 *ngVar 指令中隐式访问的局部 ng-template 变量。
我会在组件内部创建一些类似 changeTranslation 的方法，并在那里使用 article.translations[indexOfCorrectArticleTranslation(article)] 进行操作。
至少你知道该走哪条路:)
如果我可以添加...我遇到了这个错误，当我将模板控件命名为与我的 class 的绑定 属性 相同时。像这样：
<input type="password" class="form-control" name="passwordConfirmation" #passwordConfirmation="ngModel" [(ngModel)]="passwordConfirmation"/>
"passwordConfirmation" 是模板中控件的名称和组件 class 的 property/variable 的名称。这似乎让编译器感到困惑，因为它试图绑定到模板变量而不是 class 属性.
在我的例子中，使用 [(ngValue)] 而不是 [ngValue]