Typescript with angular2 and grunt error TS2304: Cannot find name

Question

In my angular2 Project am using grunt to automate compile my typescript files.

All is doing well my files are compiling but am always getting errors

app/webapp/ng2/audit_logs/auditLogs.ts(2,3): error TS2304: Cannot find name 'app'.
app/webapp/ng2/audit_logs/auditLogs.ts(3,3): error TS2304: Cannot find name 'http'.
app/webapp/ng2/audit_logs/auditLogs.ts(3,10): error TS2304: Cannot find name 'ng'.
app/webapp/ng2/audit_logs/auditLogs.ts(6,3): error TS2304: Cannot find name 'app'.
app/webapp/ng2/audit_logs/auditLogs.ts(7,5): error TS2304: Cannot find name 'ng'.
app/webapp/ng2/main.ts(16,24): error TS2304: Cannot find name 'upgradeAdapter'.

I've tried Definetlytyped but am not getting success.

I don't know why?

Please help me to fix this below is my main.ts and auditLogs.ts files take a look and let me know where am doing wrong

Main.ts file

/// <reference path="../../../node_modules/angular2/typings/browser.d.ts" />


var window: any = {
    giddh: undefined
};

import {UpgradeAdapter} from 'angular2/upgrade';

var adapter = new UpgradeAdapter();
var app = window.giddh.webApp;

adapter.bootstrap(document.body, ['giddhWebApp']);

// downgrade ng2 components to ng1 directives
app.directive('myApp', upgradeAdapter.downgradeNg2Component(app.AppComponent));

auditLogs.ts file

(function(giddh: any) {
  app = giddh.webApp
  http = ng.http


  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      templateUrl: ''
    }).Class({
      constructor: function(http: any) {
        this.test = new test(1020);
      }
    });

  class test {
    val: string;
    constructor(data: any){
      this.val = data;
    }
  }

})(window.giddh || (window.giddh = {}));

var window: any = {
  giddh: undefined
}
declare var require: any;
import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '/public/webapp/ng2/audit_logs/audit-logs.html'
})

export class AppComponent { 
}

I guess you will need to initialize the vairable. `var app = giddh.webApp` instead of just using `app` — Subash, Apr 06 '16 at 06:41

score 1 · Answer 1 · answered Apr 06 '16 at 06:49

The following is wrong on a number of levels

(function(giddh: any) {
  app = giddh.webApp
  http = ng.http


  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      templateUrl: ''
    }).Class({
      constructor: function(http: any) {
        this.test = new test(1020);
      }
    });

  class test {
    val: string;
    constructor(data: any){
      this.val = data;
    }
  }

})(window.giddh || (window.giddh = {}));

var window: any = {
  giddh: undefined
}

You file is a module. You don't need an iffee. And you don't need to use window . More: https://basarat.gitbooks.io/typescript/content/docs/project/modules.html

Also you cannot use http globally. You must let angular inject it for your.

Also ng is just for type information and doesn't actually exist at runtime.

1

so how can i fix it. – The Mechanic Apr 06 '16 at 07:09

Typescript with angular2 and grunt error TS2304: Cannot find name

1 Answers1