CODEWITHSUNDEEP
angular
Buckrogerz
Buckrogerz

Reputation: 131

Angular 2 quickstart app

So I am starting to learn Angular and I am starting with 2.0 since it will break 1 to that point I am trying to get the quick start application from the angular web site to work

I set up the code as instructed and setup a web site in IIS to point to source code directory but I am getting an error.

Uncaught (in promise) Error loading "app" at http://localhost:88/app.js
http://localhost:88/app.js:1:46: Unexpected token angular2

Has anyone set up this app in IIS and if so can you help?

File app.js:

import {Component, Template, bootstrap} from angular2/angular2;

//Annotation section
@Component({
    selector: 'my-app'
})

@Template({
    inline: '<h1>Hello {{name}}</h1>'
})

//Component controller
class MyAppConponent{
    constuctor(){
        this.name = 'Alice';
    }
}

bootstrap(MyAppConponent);

file index.html

<!-- index.html -->
<html>
    <head>
        <title>Angular 2 Quickstart</title>
        <script src="/quickstart/dist/es6-shim.js"></script>
    </head>
    <body>
        <!-- The app component created in app.es6 -->
        <my-app></my-app>

        <script>
            // Rewrite the paths to load the files
            System.paths = {
                'angular2/*':'/quickstart/angular2/*.js', // Angular
                'rtts_assert/*': '/quickstart/rtts_assert/*.js', // Runtime assertions
                'app': 'app.js' // The my-app component
            };
            // Kick off the application
            System.import('app');
        </script>

    </body>
</html>

Additionally - I did name the app file app.es6 as the site has indicated but I was seeing if the extension made a difference since es6 is the new javascript standard and the browse may not support it yet and I get

GET http://localhost:88/app.es6 404 (Not Found)

as an error with that extension.

I am using Chrome Canary for my browser

Upvotes: 3

Views: 3290

Answers (3)

Llewellyn Collins
Llewellyn Collins

Reputation: 2341

app.js should be app.ts. Make sure your typescript watcher is setup then restart the app.

Upvotes: 0

Alex J
Alex J

Reputation: 3193

Here is the final product that I came up with.

In app.ts

/// <reference path="typings/angular2/angular2.d.ts" />
///<reference path="typings/es6-promise/es6-promise.d.ts"/>
///<reference path="typings/rx/rx.d.ts"/>

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

@Component({
    selector : 'my-app'
})
@View({
    templateUrl: '<h1>Hello {{name}}<h1>'
})
// Component controller
class MyAppComponent {
    name : string;
    constructor(){
        this.name = 'Alice';
    }
}

bootstrap(MyAppComponent);

In index.html

<!DOCTYPE html>
<!-- index.html -->
<html>
  <head>
    <title>Angular 2 Quickstart</title>
    <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
    <script src="https://jspm.io/[email protected]"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script>
  </head>
  <body>

    <!-- The app component created in app.ts -->
    <my-app></my-app>
    <script>System.import('app');</script>
  </body>
</html>

I don't think it affected the integrity of your code, but you spelled component wrong with your controllers.

Upvotes: 0

maximumcallstack
maximumcallstack

Reputation: 2917

Looks like a syntax error

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

Should fix it

Upvotes: 2

Related Questions