CODEWITHSUNDEEP
typescriptangular
Nemeas
Nemeas

Reputation: 129

Failing to import an export class using angular2

So I've been trying to follow the tutorial by egghead.io. However I can't seem to get the step2 to work.

I've created the TodoInput class like this:

import {Component, View} from 'angular2/angular2';
@Component({
    selector: 'todo-input'
})

@View({
    template: `
        <div>This is written in the todoInput export class</div>
    `   
})

export class TodoInput{}

And using it in the helloWorld.ts like this:

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

@Component({
    selector: 'hello-world'
})

@View({
    directives: [TodoInput],
    template: `
        <div>
            <h1>This is a heading!</h1>
            <todo-input/>
        </div>
    `
})

class HelloWorld{}

bootstrap(HelloWorld);

and finally using the hello-world tag in the index.html like this:

<html>
    <head>
        <title>Angular 2 Quickstart</title>
        <script src="node_modules/traceur/bin/traceur.js"></script>
        <script src="node_modules/systemjs/dist/system.js"></script>
        <script src="node_modules/angular2/bundles/angular2.min.js"></script>
    </head>
    <body>
        <hello-world></hello-world>
        <script>
            System.import('src/helloWorld.js');
        </script>
    </body>
</html>

When I try to run this I get an error: "GET /src/TodoInput" Error (404): "Not found". What am I doing wrong?

I am running on this version of angular2:

"angular2/angular2.d.ts": {
  "commit": "78d36dd49b6b55b9fdfe61776a12bf05c8b07777"
}

Upvotes: 0

Views: 626

Answers (2)

Nemeas
Nemeas

Reputation: 129

The problem was with the order in which the statements in the index.html file was written. The following was my solution:

<html>
    <head>
        <title>Angular 2 Quickstart</title>
        <script src="node_modules/traceur/bin/traceur.js"></script>
        <script src="node_modules/systemjs/dist/system.js"></script>
    </head>
    <body>
        <hello-world></hello-world>
        <script>
            System.config({defaultJSExtensions:true});    
        </script>
        <script src="node_modules/angular2/bundles/angular2.min.js"></script>
        <script>
            System.import('src/helloWorld').catch(console.error.bind(console));
        </script>
    </body>
</html>

I also added the System.config({defaultJSExtensions:true}) to make the src/helloWorld (with no extension) work.

Upvotes: 1

micronyks
micronyks

Reputation: 55443

Look at this working example

Demo

You need to have .ts file extension for helloWorld file. 

System.import("src/helloWorld").catch(console.error.bind(console));

Rest is fine. Look at link given above.

Upvotes: 1

Related Questions