search

netanelgilad / meteor-angular2-typescript

6 stars 7 forks source link

Uncaught ReferenceError: require is not defined #2

Open firebait opened 9 years ago

firebait commented 9 years ago

Hi @netanelgilad I just created a new meteor angular2 applications and had an issue when I added this package.

Here is my package list:

meteor-platform autopublish insecure angular:angular2 netanelgilad:angular2-typescript

And here is my typescript code:

import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
    selector: 'my-app'
})
@View({
    template: '<h1>Hello {{ name }}</h1>'
})
class MyAppComponent {
    name: string;

    constructor() {
        this.name = 'Alice';
    }
}
bootstrap(MyAppComponent);

The compiled code in the browser is this:

(function(){if (typeof __decorate !== "function") __decorate = function (decorators, target, key, desc) {
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
    switch (arguments.length) {
        case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
        case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
        case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
    }
};
var angular2_1 = require('angular2/angular2');
var MyAppComponent = (function () {
    function MyAppComponent() {
        this.name = 'Alice';
    }
    MyAppComponent = __decorate([
        angular2_1.Component({
            selector: 'my-app'
        }),
        angular2_1.View({
            template: '<h1>Hello {{ name }}</h1>'
        })
    ], MyAppComponent);
    return MyAppComponent;
})();
angular2_1.bootstrap(MyAppComponent);

})();

This fails on: var angular2_1 = require('angular2/angular2');

I will try to read through your code to see if I can help but I'm new to meteor and angular 2 so can't promise much in the short term :)

dalcib commented 9 years ago

It needs the last version of Typescript to use 'module=system'. I just submitted a PR e86a92b1af405f9e138c03818a45f93a019e2f37 to update this package.

firebait commented 9 years ago

Awesome, thanks! I'll test it out.

firebait commented 9 years ago

Ok, I tried it out and it got rid of the require problem but the served .js file is served as html 

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.1.0.2%22%2C%22ROOT_URL%22%3A%22http%3A%2F%2Flocalhost%3A3000%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22appId%22%3A%221y2w4b81bdbbhca8ufhx%22%2C%22autoupdateVersion%22%3A%228e35e079804be99b091b96e3c36ca7f6817fc191%22%2C%22autoupdateVersionRefreshable%22%3A%22c0ffbdd5828c080e154065c2b43859f2d1c4aa19%22%2C%22autoupdateVersionCordova%22%3A%22none%22%7D"));</script>

  <script type="text/javascript" src="/packages/underscore.js?0a80a8623e1b40b5df5a05582f288ddd586eaa18"></script>
  <script type="text/javascript" src="/packages/meteor.js?43b7958c1598803e94014f27f5f622b0bddc0aaf"></script>
  <script type="text/javascript" src="/packages/json.js?e22856eae714c681199eabc5c0710b904b125554"></script>
  <script type="text/javascript" src="/packages/base64.js?1a63019243b73298e2964e6d4680f25bca657726"></script>
  <script type="text/javascript" src="/packages/ejson.js?71047b64b5196348bdbe5fd5eea9ac97a5a9eb14"></script>
  <script type="text/javascript" src="/packages/logging.js?07e201b648f16be8435a4f666156995eeda0c750"></script>
...
...

So the error I get is Potentially unhandled rejection [2] Error loading "client/applications-list" at http://localhost:3000/client/applications-list.js Error evaluating http://localhost:3000/client/applications-list.js Uncaught SyntaxError: Unexpected token < (WARNING: non-Error used)

I have 3 files in the client directory: applications-list.html applications-list.ts index.html

applications-list.html

<head>
    <title>Brain</title>
</head>
<body>
    <my-app>
        <span class="loading">Loading...</span>
    </my-app>
    <script>System.import('client/applications-list');</script>
</body>
applications-list.ts

import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'my-app'
})
@View({
    templateUrl: 'client/applications-list.ng.html'
})
class MyAppComponent {
    name: string;

    constructor() {
        this.name = 'Alice';
    }
}
applications-list.ng.html

Hello World
yanickrochon commented 9 years ago

I don't know if this helps, but there are two (same) scripts being executed;

The first one is requested as (for example) : app.js?8271bca1c7998affb332f2d34c33267f3ffe8008 which causes the error.

The second one is served as is (i.e. app.js) and is wrapped inside 

(function(global, exports, module, require, __filename, __dirname) {
....
}).call(_g.exports, _g.global, _g.exports, _g.module, _g.require, _g.__filename, _g.__dirname);

Obviously, the second runs just fine. Which makes me wonder why the file is fetched twice, but only one is served fine?

(Linked reference with ShMcK/Meteor-Angular2)

firebait commented 9 years ago

Thanks @yanickrochon but I created a new application and started over and it worked fine with the new version of typescript.

yanickrochon commented 9 years ago

@firebait what new version of typescript? I started a brand new project yesterday and still got the problem I described!

firebait commented 9 years ago

I created a packages directory and checkout this PR https://github.com/netanelgilad/meteor-angular2-typescript/commit/e86a92b1af405f9e138c03818a45f93a019e2f37 That would remove the issue.

ilianaza commented 9 years ago

I see the same error. It would be nice if this PR is merged.

netanelgilad commented 9 years ago

Hey guys, I have been traveling for the last 3 months, so I'm not that up to date with things in angular and meteor. I think there is a new version of angular 2 for meteor with the package here https://github.com/Urigo/Meteor-Angular2. I'm thinking of deprecating this package, so let me know if you are still using this package.

mohyeid commented 8 years ago

The second comment "It needs the last version of Typescript to use 'module=system'.", what do I need to do? I use eclipse and the option system is not available!