error TS2339: Property 'DEFAULT_TTS_HOST' does not exist on type 'typeof ApiAiConstants'

Question

I am following this tutorial for making chatbot with angular. I get following error:

ERROR in node_modules/api-ai-javascript/ts/Request/TTSRequest.ts(17,31): error TS2339: Property 'DEFAULT_TTS_HOST' does not exist on type 'typeof ApiAiConstants'.

I am using Angular & Angular CLI version: 6.0.3.

import {ApiAiClient} from "../ApiAiClient";
import {ApiAiConstants} from "../ApiAiConstants";
import {ApiAiClientConfigurationError, ApiAiRequestError} from "../Errors";
import {IRequestOptions} from "../Interfaces";
import XhrRequest from "../XhrRequest";
import Request from "./Request";

export class TTSRequest extends Request {

  private static RESPONSE_TYPE_ARRAYBUFFER = "arraybuffer";

  private static audioContext: AudioContext;

  constructor(protected apiAiClient: ApiAiClient, options: IRequestOptions = {}) {
    super(apiAiClient, options);
    // this.requestMethod = XhrRequest.Method.GET;
    this.uri = ApiAiConstants.DEFAULT_TTS_HOST;
    const AudioContext = window.AudioContext || webkitAudioContext;

    if (!TTSRequest.audioContext) {
      TTSRequest.audioContext = new AudioContext();
    }
  }
"TTSREquest.ts" 84L, 2506C

Answer 1

The error is correct, Typescript complains that you do not have a variable named DEFAULT_TTS_HOST in your ApiAiConstants file.

To fix this add a variable as follows,

export const DEFAULT_TTS_HOST: string = "https://api.api.ai/api/tts";

EXAMPLE PROJECT

In order to explain in detail, if you look at the original repo you posted it internally uses this library

import {ApiAiClient} from "api-ai-javascript";

if you look at the particular library it has the constant defined in the file

Answer 2

I got this error fixed in my app , but took a few changes to get it to work. My first issue was "ERROR in No NgModule metadata found for 'AppModule'.". Then I tried a few suggestions, but started to see the DEFAULT_TTS_HOST error. The various suggestions only worked to solve part of the issue. This combination of changes fixed the problem and I was able to build successfully.

I'm using Angular 6.0.9, Angular Cli 6.0.8, api-ai-javascript, 2.0.0-beta.21, typescript 2.7.2 ( I was using the latest version, but its appeared to not be supported for angular cli, had to go back 2.7.2)

1. First change: I did go in and fix the ApiAiConstants in the node_modules for api-ai-javascript. The differences were it had double quotes instead of single quotes around the defined values(changed to single quote), and added the DEFAULT_TTS_HOST line, so it ended up looking like this:

    export namespace ApiAiConstants { export enum AVAILABLE_LANGUAGES { EN = 'en' as any, DE = 'de' as any, ES = 'es' as any, PT_BR = 'pt-BR' as any, ZH_HK = 'zh-HK' as any,ZH_CN = 'zh-CN' as any, ZH_TW = 'zh-TW' as any, NL = 'nl' as any, FR = 'fr' as any, IT = 'it' as any, JA = 'ja' as any, KO = 'ko' as any, PT = 'pt' as any, RU = 'ru' as any, UK = 'uk' as any } export const VERSION = '2.0.0-beta.21'; export const DEFAULT_BASE_URL = 'https://api.api.ai/v1/'; export const DEFAULT_API_VERSION = '20150910'; export const DEFAULT_CLIENT_LANG: AVAILABLE_LANGUAGES = AVAILABLE_LANGUAGES.EN; export const DEFAULT_TTS_HOST = 'https://api.api.ai/api/tts'; } 

   Note: I had to change the version, I had 21 installed, but it was showing 20.

2. I then ran this build command:

    ng serve --aot 

   This was a suggestion that did not fix my issue, but I did get a different error message. It was complaining about my main.ts and polyfills missing from Typescript collection. For that I added both of those to the tsconfig.spec.json. Like this:

    }, "files": [ "test.ts", "polyfills.ts", "main.ts" ], 

I also added this to the tsconfig.app.json, but this may not be necessary. I didn't get rid of the error, until I added the settings above to the tsconfig.spec.json:

"include":[
    "../node_modules/api-ai-javascript/ts/*.ts",
    "../node_modules/api-ai-javascript/**/*.ts",
    "main.ts",
    "polyfills.ts"
  ],

Then it built successfully.

One added note, if it only works to build with ng serve --aot, add this to the tsconfig.app.json to fix that:

"files": [
         "../src/app/app.module.ts"
   ]

Answer 3

Remember, you should not make any changes in node_modules. Rather than making changes in node_modules, use more specific version of api-ai-javascript . Try re-installing this package with this command-

npm install api-ai-javascript@2.0.0-beta.16

In this version you don't need to add DEFAULT_TTS_HOST in your node_modules. This should solve your issue, to learn more about versions, you can visit

https://www.npmjs.com/package/api-ai-javascript#200-beta21