Problem loading angular2 app written in TS #434
Comments
|
Did you include your |
|
How would I write that? Sry I am just starting out with this stuff. |
|
GitHub Wiki, YouTube, tests - all should help. What's happening is that systemjs doesn't know where your modules are. BTW take a look at jspm which can generate and update the config for. |
|
Uncaught ReferenceError: require is not defined(anonymous function) @ angular2.js:1 I installed jspm and changed the script tags in the header: <script src="../jspm_packages/system.js"></script> <script src="../config.js"></script>... <script src="angular2/angular2.js"></script> <script> System.import('../scripts/main.js'); </script>System.config({ config.js: System.config({ I don't get this whole system thing. Since I am using typescript nothing works but the angular2-bundle.js from ngconf2015demo and System.import without any systemconfig or jspm stuff. |
|
Can you provide more context on what are you trying to do and maybe share the code that shows the problem? |
|
Paths should be wildcards |
|
So I use angular2 (npm install angular2), I used angular2-bundle.js from ngconf2015demo before and it worked. With the "normal" angular2 repo I get the errors I posted before on code like this: todo.ts: import {Component, View, bootstrap, For, If} from 'angular2/angular2'; @component({ @view({ class TodoList{ } bootstrap(TodoList); index.html: <!doctype html> Errors loading this in chrome devtool: T http://localhost:8080/angular2/angular2-bundle.js |
|
My advice is to start with something small. Create some files and get them to load. Using systemjs isn't difficult, but you need to roughly understand how everything fits together first. Once you're ready bring angular into the mix. |
|
Uncaught TypeError: Cannot read property 'exports' of undefined So atm systemjs loads everything just fine until I start using angular2 and typescript together then I run into these problems with traceur. Everythings loads up just fine but then... |
|
Ok, I think I know what what is going on.
DISCLAIMER: At this point you should be aware that any changes in the demo code will most likely make it non-compatible with future version of Angular2. If you are willing to keep the modified code - be ready to fix it when new version of Angular2 will be avaiable since the code will most likely be broken First, get a clean copy of ngconf2015demo: Second, install angular2 and its dependencies (rx, zone.js, reflect-metadata). For convinience you can create 'package.json' with the following content {
"name": "ngconf2015demo",
"version": "1.0.0",
"dependencies": {
"angular2": "2.0.0-alpha.21",
"rx": "2.5.2",
"zonejs": "angular/zone.js",
"reflect-metadata": "rbuckton/ReflectDecorators"
}
}in the root of ngconf2015demo repo and then run: NOTE: Currently this code in bundled in 'angular2-bundle.js'. Version of angular2 from npm uses commonjs however for some modules SystemJS fails to detect the format correctly and loads them as globals. This happens because Traceur converts export class OpaqueToken {
/// more code here
}into Object.defineProperties(module.exports, {
OpaqueToken: {get: function() {
return OpaqueToken;
}},
__esModule: {value: true}
});
// more code hereand this usage of // require('...') || exports[''] = ... || exports.asd = ... || module.exports = ...As a workaround we'll rebuild angular2 to use Go to 'node_modules/angular2'. First run to install dev dependencies for angular2 then this command will run pre-packages script 'es5build.js' that will convert 'angular2' code to 'system' modules and drop results in 'system' folder. 'angular2-bundle.js' already includes both classes for annotations and decorator functions that will attach these annotation to targets. Angular2 2.0.0-alpha.21. has only annotation classes but no decorators meaning that we have to add them. Create a file named 'annotations.ts' in the root of the repo /// annotations.ts
import {Component as ComponentAnnotation, View as ViewAnnotation} from 'angular2/angular2';
declare module Reflect {
function getMetadata(metadataKey: string, target: Object): any;
}
function addAnnotation(c: any, annotation: any): any {
(c.annotations || (c.annotations = [])).push(annotation);
return c;
}
export function Component(arg?: { selector: string, injectables: any[] }) {
return (c) => {
let paramTypes = Reflect.getMetadata("design:paramtypes", c);
if (paramTypes) {
c.parameters = paramTypes.map(p => [p]);
}
else {
c.parameters = [];
}
addAnnotation(c, new ComponentAnnotation(arg))
return
}
}
export function View(arg: { templateUrl: string, directives: any[] }) {
return c => addAnnotation(c, new ViewAnnotation(arg));
}Fix 'todo.ts' to use our custom annotations // replace this line in todo.ts
import {Component, View, bootstrap, For} from 'angular2/angular2';
// with these two lines
import {Component,View} from 'annotations'
import {bootstrap, For} from 'angular2/angular2';Fix 'firebase/angularfire.js': currently this code in this file correctly picks // Replace this line
define(["require", "exports", 'angular2/angular2'], function (require, exports, angular2_1) {
// with this line
define(["require", "exports", 'annotations'], function (require, exports, annotations_1) {
// also replace this line
angular2_1.Component(),
// with this line
annotations_1.Component(), Finally make changes in 'index.html'
<script src="node_modules/reflect-metadata/reflect.js"></script>
<script src="/node_modules/zone.js/zone.js"></script>
System.paths = {
'*': '*.js',
'angular2/*': 'node_modules/angular2/system/*.js',
'rx/*': 'node_modules/rx/*.js',
};Almost done, what is left is adding 'annotations.ts' into 'tsconfig.json' and compiling '.ts' -> '.js' Errors from tsc can be ignored since we don't have proper typing for Angular2 2.0.0-alpha.21. Run everything should work. |
|
Okay thanks a lot for your time. I'll try this out as soon as I can. Thanks again. I'll let you know if it worked. |
|
@vladima your idea isnt work. ( |
|
@friktor ok, can you share your code in its current state (when it is not working) so I can take a look? |
|
@vladima the components of the angular boot normally. And System.js works fine, but on the anotation.ts swears. |
|
@friktor for some reason in your repo I don't see any .js files including 'tsc/tsc.js', 'firebase/firebase.js' and 'firebase/angularfire.js' and as a consequence nothing will work. If I copy them from the original ngconfdemo repo and make necessary changes in 'angularfire.js' - demo works like charm |
|
Closing, but feel free to continue discussion. |
|
hi, Test also from ngconf...same |
|
Hi, |
|
I have the same problem. Here are the errors I have. And that is strange. I am using JSPM to install angular2. Here is my <html>
<head>
<title>Angular 2 Quickstart</title>
<script src="assets/jspm/github/jmcriffey/[email protected]/traceur-runtime.js"></script>
</head>
<body>
<my-app></my-app>
<script src="assets/jspm/system.js"></script>
<script src="config.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script>
<script>
System.import('build/app');
</script>
</body>
</html>and here is my import {Component, View, bootstrap} from 'angular2';
@Component({
selector: 'my-app'
})
@View({
template: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyAppComponent {
name: string;
constructor() {
console.log(123);
this.name = 'Alice';
}
}
bootstrap(MyAppComponent);And this works just fine. But as soon as I delete this <script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script>I get those errors. Although in the log I can see that all JS files loaded correctly. I suspect that there is something missing that is installed with JSPM and decorators are not supported. When I use If I delete angular from jspm then it also works fine. I think that |
|
@Serhioromano I would like to chime in that i am experiencing the exact same issue see: http://stackoverflow.com/questions/30911861/angular2-jspm-io-reflect-metadata-shim-is-required-when-using-class-decorato And the code: https://bitbucket.org/schippie/angular-2-jspm-hello-world/src/8af83f2066e5?at=master |
|
I've posted an issue at jspm/registry#432 for getting Angular2 to work. The instructions I've provided there will work fine for now though too. |
|
@robwormald Ah thank you for your detailed explanation / guide |
|
I am following @robwormald's instructions above and it works great for dev mode (no bundling) and for regular bundling (to dist/main.js). The problem is when trying to bundle an sfx. I get the following error: Oddly the sourcemap is generated and it points back correctly to [email protected]. I am using Typescript as my transpiler. My config.js looks like this: My package.js looks like this: And main.html looks like this: |
|
Per @robwormald in jspm/registry#432 (comment) it looks like the bundling issue is being tracked in systemjs/builder#206 and microsoft/TypeScript#2233 (comment) My impression is that basically SystemJS needs to throw an error since bundling is not currently supported in TypeScript. |
|
The quickstart guide has a bug and will not show the |
|
Well in my case the error is coming from systemjs fetch method i guess, its stated at the end of these files: Customer.ts file: import {Address} from './src/Address' export class Customer { } Address.ts file: <script src="node_modules/systemjs/dist/system.js"></script> Error from System.imports Catch method on google chrome console: GET http://localhost:8000/src/Address 404 (Not Found) @ fetch.js:32 Would require a little help for the above mentioned error. |
GET http://localhost:8000/angular2/angular2.js
[email protected]:2605 GET https://registry.jspm.io/scripts/main.js 404 (Not Found)i @ [email protected]:2605$__Object$defineProperty.value @ [email protected]:2780n @ [email protected]:377t @ [email protected]:365$__Object$defineProperty.value @ [email protected]:2779$__global.upgradeSystemLoader.e.fetch @ [email protected]:731$__global.upgradeSystemLoader.e.fetch @ [email protected]:1754$__global.upgradeSystemLoader.e.fetch @ [email protected]:1851(anonymous function) @ [email protected]:1525D @ [email protected]:1183I @ [email protected]:11427.O.when @ [email protected]:9307.w.run @ [email protected]:8213.e._drain @ [email protected]:973.e.drain @ [email protected]:62t @ [email protected]:268
[email protected]:140 Potentially unhandled rejection [3] Error loading "scripts/main" at https://registry.jspm.io/scripts/main.js
Not Found: https://registry.jspm.io/scripts/main.js (WARNING: non-Error used)
Why is the uri for my main.js set to "https://registry.jspm.io/scripts/main.js"?
Where does this error come from and how to resovle it?
I am using the newest angular2 release and typescript 1.5beta.
The text was updated successfully, but these errors were encountered: