CODEWITHSUNDEEP
typescriptangular
Paulo H. Tokarski Glinski
Paulo H. Tokarski Glinski

Reputation: 404

How to Deploy Angular 2 Web Site?

I'm trying to upload my website based in Angular 2 to a server and run it on my browser. It's a normal site, nothing special, I'm just trying to learn about Angular 2.

So, What did I do before?
Basically, I build the same website using AngularJS in localhost. After, I upload the website (witch used a login to Facebook and others futures) to a Host Provider (I'm using a free subdomain). The applications running perfectly, no problem.

So, What am I doing? (or trying to do)
I adapted the same web site above to Angular2. Simple like that. But when I tried to upload it to server it didn't work. First, I build in localhost. OK!, no problem. But on the web it didn't work.

The App

Directories:

__app-folder
|____app
    ||____bootstrap
    ||____classes
    ||____services
    ||____tests
    || app.component(.ts, .js, .js.map)
    || app.html
    || boot(.ts, .js, .js.map)

|____node_modules
    || ____a lot of things...
|____orbit-root

index.html
npm-debug.log.xxx
package.json
tsconfig.json
typings.json

Code examples:

Index.html

<html>
  <head>
    <title>Login</title>

    <script>
      // Facebook
      window.fbAsyncInit = function() {
        FB.init({
          appId   : '666',
          xfbml   : false,
          version : 'v2.6'
        });
      };

      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/en_US/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
    </script>

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot').then(null, console.error.bind(console));
    </script>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="app/bootstrap/css/bootstrap.min.css">
    <script src="app/bootstrap/js/jquery-2.2.4.min.js"></script>
    <script src="app/bootstrap/js/bootstrap.min.js"></script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

app/app.component.ts

import {Component} from 'angular2/core';
import {User} from '../app/classes/user';
import {UserService} from '../app/services/user.service';
import {VirtueComponent} from '../app/tests/virtue/virtue.component';
import {SoulAnimalComponent} from '../app/tests/soul-animal/soul-animal.component';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.html',
  directives: [VirtueComponent],
  providers: [UserService, SoulAnimalComponent]
})

export class AppComponent implements OnInit { 

    private token: any;
    private user: any;
    private loged: boolean = false;

    constructor(private userService: UserService) { }

    ngOnInit() {
        this.userService.login();
        this.user = this.userService.getUser();
    }

}

app/services/user.service.ts

import {Injectable, NgZone} from 'angular2/core';
import {User} from '../classes/user';

declare const FB: any;

@Injectable()
export class UserService {

    private user = new User();
    private token: any;

    constructor(private ngZone: NgZone) {}

    setUser(res: any) {
        this.user.setName(res.name);
        this.getUser(); // ----
    }

    getUser() {
        return this.user;
    }

    login() {
        FB.login((result: any) => {
            this.token = result;
            this.me();
        }, { scope: 'user_friends' });
    }

    me() {
        FB.api('/me?fields=id,name,first_name,gender,picture.width(150).height(150),age_range,friends',
            (res: any) => {
                this.ngZone.run(() => {
                    this.setUser(res);
                });
            });
    }

}

To explain the code, I think that is the enough.

The Error:
I uploaded all the files by ftp to the server using FileZilla. The page presented the following errors:

uncaught SyntaxError: Unexpected token <
System is not defined System.config

Upvotes: 1

Views: 447

Answers (1)

pd farhad
pd farhad

Reputation: 6432

If you are interested in Angular 2, it will be great advantage for you to use angular-cli. Also, it will ease your deployment :)

Upvotes: 1

Related Questions