Enable use ng-forward with TypeScript in Visual Studio

tolemac commented 8 years ago

I don't know where to start ... I will try to summarize ...

I'm trying to use ng-forward in Visual Studio. I have added ng-forward.dist.js and I have created a .d.ts file and I can't use it, I think the problem is System.js, seems that ng-forward.dist.jsuse AMD (require) and system.js try to load 'ng-forward' module and not find it.

This is html:

    <!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="scripts/systemjs.js"></script>
        <script src="scripts/jquery-2.1.4.js"></script>
        <script src="scripts/angular.js"></script>
        <script src="scripts/ng-forward.dist.js"></script>
    </head>
    <body>
        <script>
            // set our baseURL reference path
            System.config({
                baseURL: '/TypeScript'
            });

            // loads /app/main.js
            System.import('app.js');
        </script>
        <h1>TypeScript HTML App</h1>

        <div id="content">
            <starting></starting>
        </div>
    </body>
    </html>

I'm not sure I have to do work it.

I tried to transpile the source code from Ts to es5 directly using module: "system" but I have got several errors ...

I have seen the plunkr where use typescript but you use on line transpiler I would like to continue with my workflow where I have typescript code transpiled to es5 an use it in my application.

I would like to know how to do it from ng-forward code, I would like to add it to gulp file.

Any ideas?

tolemac commented 8 years ago

Well I have a progress, following the plunker I have changed the system configuration:

<!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="scripts/systemjs.js"></script>
    <script src="scripts/jquery-2.1.4.js"></script>
    <script src="scripts/angular.js"></script>
</head>
<body>
    <script>
        System.config({
            defaultJSExtensions: true,
            map: {
                'ng-forward': '/scripts/ng-forward.dist.js'
            },
            baseURL: "/TypeScript"
        });

        System.import('app.js');
    </script>
    <h1>TypeScript HTML App</h1>

    <div id="content">
        <starting></starting>
    </div>
</body>
</html>

and App.ts:

import {bootstrap, Component} from "ng-forward";

@Component({
    selector: 'starting',
    template: '<h3>Starting app</h3>'
})
class Starting { }

bootstrap(Starting);

Now I get these error in the browser:

systemjs.js:4 GET http://localhost:54263/TypeScript/crypto.js 404 (Not Found)
A @ systemjs.js:4
(anonymous function) @ systemjs.js:4
(anonymous function) @ systemjs.js:4
(anonymous function) @ systemjs.js:4
(anonymous function) @ systemjs.js:5
(anonymous function) @ systemjs.js:5
(anonymous function) @ systemjs.js:5
(anonymous function) @ systemjs.js:5
(anonymous function) @ systemjs.js:5
(anonymous function) @ systemjs.js:4
systemjs.js:4 Uncaught (in promise) Error: XHR error (404 Not Found) loading http://localhost:54263/TypeScript/crypto.js(…)
t @ systemjs.js:4
g @ systemjs.js:4
(anonymous function) @ systemjs.js:4

Any ideas?

panjiesw commented 8 years ago

I think you need to properly configure your system.js module loader first. If you use system.js, you should also use JSPM. Install jspm globally, then run jspm init in your workspace's directory. Follow the configuration step, use TypeScript as transpiler. Then install ng-forward with jspm install npm:ng-forward. Depends on your answers when configuring jspm, you will get a config.js script. Link it instead of defining System.config() directly in your html.

panjiesw commented 8 years ago

And btw, if you install ng-forward into your dependency with either npm install ng-forward or jspm install npm:ng-forward, you will also get definition files for each module.

I am working on some samples to use ng-forward in several use cases, including TypeScript + SystemJS. Hopefully I can share it after my vacation ends :smile:

tolemac commented 8 years ago

I have used system.js in other projects without JSPM.

I would like to find a way to use ng-forward with Visual Studio, and I would like use it without transpiler in run time.

I have tried Angular 2 Beta and I succeeded, but I can not do it with ng-forward, I hope to do, hopefully get it after the holidays.

Thank you @panjiesw.

tolemac commented 8 years ago

Close it, I have sumarized on #127

ngUpgraders / ng-forward

Enable use ng-forward with TypeScript in Visual Studio #124