Use ng-forward in Visual Studio with Typescript

tolemac commented 8 years ago

I open this issue summarizing other two issues #124 #123 that I have closed.

I need to make work ng-forward with Visual Studio.

I put here the steps I follow to try make work it in Visual Studio:

Create new Html with Typescript application called NgForwardVisualStudio
I enable @decorators for typescript editing project file, adding:

   <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>

 <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>

follow this post: http://bchavez.bitarmory.com/archive/2015/07/23/enabling-decorators-support-in-typescript-1-5-visual-studio-2015.aspx

From command line at the project root dir, install ng-forward and reflect-metadata: npm i ng-forward@latest reflect-metadata
Set on typescript project properties "CommonJS" as module System.
Add angularjs.TypeScript.DefinitelyTyped and angular-ui-router.TypeScript.DefinitelyTyped from nuget to get angularjs and angular-ui-router typings (definitions)
Write the index.html at the root of the project:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="https://npmcdn.com/ng-forward/ng-forward.dist.min.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <app></app>

    <script src="app.js"></script>
</body>
</html>

Write app.ts at the root of the project:

/// <reference path="scripts/typings/angularjs/angular.d.ts" />
import { Component, bootstrap } from 'ng-forward';

@Component({
    selector: 'app',
    template: '<h1>ng-forward Application</h1>'
})
class Nested { }

Then when I build the project get this errors:

1>C:\Users\jros\Desarrollo\Angular2\tests\NgForwardVisualStudio\NgForwardVisualStudio\node_modules\@reactivex\rxjs\dist\es6\CoreOperators.d.ts(21,70): error TS2304: Compilación: Cannot find name 'Promise'.
1>C:\Users\jros\Desarrollo\Angular2\tests\NgForwardVisualStudio\NgForwardVisualStudio\node_modules\@reactivex\rxjs\dist\es6\CoreOperators.d.ts(74,31): error TS2304: Compilación: Cannot find name 'PromiseConstructor'.
1>C:\Users\jros\Desarrollo\Angular2\tests\NgForwardVisualStudio\NgForwardVisualStudio\node_modules\@reactivex\rxjs\dist\es6\CoreOperators.d.ts(74,54): error TS2304: Compilación: Cannot find name 'Promise'.
1>C:\Users\jros\Desarrollo\Angular2\tests\NgForwardVisualStudio\NgForwardVisualStudio\node_modules\@reactivex\rxjs\dist\es6\Observable.d.ts(63,53): error TS2304: Compilación: Cannot find name 'PromiseConstructor'.
1>C:\Users\jros\Desarrollo\Angular2\tests\NgForwardVisualStudio\NgForwardVisualStudio\node_modules\@reactivex\rxjs\dist\es6\Observable.d.ts(63,74): error TS2304: Compilación: Cannot find name 'Promise'.
1>C:\Users\jros\Desarrollo\Angular2\tests\NgForwardVisualStudio\NgForwardVisualStudio\node_modules\@reactivex\rxjs\dist\es6\Observable.d.ts(74,38): error TS2304: Compilación: Cannot find name 'Promise'.
1>C:\Users\jros\Desarrollo\Angular2\tests\NgForwardVisualStudio\NgForwardVisualStudio\node_modules\@reactivex\rxjs\dist\es6\Observable.d.ts(97,69): error TS2304: Compilación: Cannot find name 'Promise'.
1>C:\Users\jros\Desarrollo\Angular2\tests\NgForwardVisualStudio\NgForwardVisualStudio\node_modules\@reactivex\rxjs\dist\es6\Observable.d.ts(149,30): error TS2304: Compilación: Cannot find name 'PromiseConstructor'.
1>C:\Users\jros\Desarrollo\Angular2\tests\NgForwardVisualStudio\NgForwardVisualStudio\node_modules\@reactivex\rxjs\dist\es6\Observable.d.ts(149,53): error TS2304: Compilación: Cannot find name 'Promise'.
1>C:\Users\jros\Desarrollo\Angular2\tests\NgForwardVisualStudio\NgForwardVisualStudio\node_modules\ng-forward\cjs\classes\metastore.d.ts(10,55): error TS2304: Compilación: Cannot find name 'Map'.

I need help to solve this and continue using ng-forward.

Thanks in advance.

timkindberg commented 8 years ago

Seems you need an es6 runtime polyfill. Not really a dependency of ngForward but required for transpired typescript or es6. We use the Babel browser polyfill: https://babeljs.io/docs/usage/polyfill/

coreinsideme commented 8 years ago

tolemac were you able to solve the problem with crypto.js. Because I've faced with the same problem and I don't know how it solve.

tolemac commented 8 years ago

I couldn't solve it, I wrote my own Ng2Emulator https://github.com/tolemac/Ng2Emulation, but I have discontinued the project.

ngUpgraders / ng-forward

Use ng-forward in Visual Studio with Typescript #127