angular - 类型“{}”上不存在属性“nodeQuery”
问题描述
在尝试在 Angular 和 Apollo 上创建一个简单的应用程序时,我在尝试构建应用程序时偶然发现了一个问题,ng build
尽管该应用程序在localhost:4200
. 该应用程序连接到 Drupal 8 GraphQL 服务器并且连接正常。
这是构建时的错误:
ERROR in app/idea-list/idea-list.component.ts(27,37): error TS2339: Property 'nodeQuery' does not exist on type '{}'.
app/idea-list/idea-list.component.ts(28,36): error TS2339: Property 'loading' does not exist on type '{}'.
这是graphql.ts
文件:
import {Article} from './type';
import gql from 'graphql-tag';
export const ALL_ARTICLES_QUERY = gql `
query {
nodeQuery {
entities {
title: entityLabel
... on NodeArticle {
body {
value
}
}
}
}
}
`;
export interface AllArticlesQueryResponse {
allArticles: Article[];
loading: boolean;
}
这是 GraphQL 服务器的结果:
{
"data": {
"nodeQuery": {
"entities": [
{
"title": "Article title.",
"body": {
"value": "<p>Article body value.</p>\r\n"
}
}
]
}
}
}
这是app/idea-list/idea-list.component.ts
文件:
import { Component, OnInit } from '@angular/core';
import { Apollo } from 'apollo-angular';
import {Article } from '../type';
import {ALL_ARTICLES_QUERY, AllArticlesQueryResponse} from '../graphql';
@Component({
selector: 'app-articles-list',
templateUrl: './articles-list.component.html',
styleUrls: ['./articles-list.component.css']
})
export class ArticlesListComponent implements OnInit {
allArticles: Article[] = [];
loading: boolean = true;
constructor(private apollo: Apollo) { }
ngOnInit() {
this.apollo.watchQuery({
query: ALL_ARTICLES_QUERY
}).valueChanges.subscribe((response) => {
console.log(response);
this.allArticles = response.data.nodeQuery.entities;
this.loading = response.data.loading;
});
}
}
更新:浏览器的控制台没有错误,应用程序运行良好。但是,在构建应用程序时(当我更改代码中的某些内容时),这发生在终端窗口中:
webpack: Compiling...
Date: 2018-04-25T09:09:23.622Z - Hash: b0a12071eaf44c16d874 - Time: 626ms
4 unchanged chunks
chunk {main} main.bundle.js (main) 36.3 kB [initial] [rendered]
webpack: Compiled successfully.
ERROR in src/app/articles-list/articles-list.component.ts(22,40): error TS2339: Property 'nodeQuery' does not exist on type '{}'.
src/app/articles-list/articles-list.component.ts(23,36): error TS2339: Property 'loading' does not exist on type '{}'.
同样的错误使我无法构建应用程序 ( ng build
)。
附加信息(配置文件):
tsconfig.ts
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom",
"esnext"
]
}
}
app/tsconfig.app.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
package.json
{
"name": "petiangular",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"apollo-angular": "^1.0.1",
"apollo-angular-link-http": "^1.0.3",
"apollo-cache-inmemory": "^1.1.12",
"apollo-client": "^2.2.8",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"graphql": "^0.13.2",
"graphql-tag": "^2.9.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "~1.7.4",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
.angular.cli.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "petiangular"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
解决方案
这个编译错误可能是由于很多原因造成的,但我怀疑它是在转译期间发生的。
该错误很可能源自 Drupal 8 GraphQL。
但是,通过摆弄 ECMAscript 级别和/或 JIT 与 AOT 编译设置,您可能会摆脱它。
但首先我建议您尝试部署该应用程序。
做一个生产构建,看看这个轻微的故障是否真的会成为一个阻碍并让你的编译过程崩溃。
如果没有,那么您只需在此处将其报告给 Drupal 8 GraphQL。
之后停止关心它,因为它不会影响您的应用程序的生命周期并且不会显示在浏览器控制台中(因此最终用户实际上不会存在它)。
如果它确实使生产编译崩溃,那么我们将尝试不同的编译选项。
推荐阅读
- python - 如何按索引添加两个字符串
- node.js - 为什么 webpack 不完全编译文件?
- android - MPAndroidChart - 折线图不显示线条
- android - NativeScript TabView 图标定位
- php - PDO 中的“无效参数号”
- javascript - 单选按钮复选框
- python - 使用 WTForms RadioField 子字段在 Flask 中显示图像
- unicode - 如何确定一个字符(Unicode 代码点)是从左到右还是从右到左?
- ruby - 在部署新版本的 Sinatra 应用程序时停止特定作业
- android - Flutter应用程序中Firebase数据库上的ValueEventListener