2016-06-28 2 views
1

Я пытаюсь загрузить свой веб-сайт на основе Angular 2 на сервер и запустить его в своем браузере. Это обычный сайт, ничего особенного, я просто пытаюсь узнать об Угловом 2.Как развернуть Угловой 2 веб-сайт?

Итак, что я делал раньше?
В принципе, я строил тот же сайт, используя AngularJS в localhost. После этого я загружаю веб-сайт (ведьма использовал логин для Facebook и других фьючерсов) для хост-провайдера (я использую бесплатный субдомен). Приложения работают отлично, без проблем.

Итак, что я делаю? (или пытаться сделать)
Я приспособил этот же веб-сайт выше к Angular2. Просто так. Но когда я попытался загрузить его на сервер, это не сработало. Во-первых, я строю в localhost. Без проблем. Но в Интернете это не сработало.

Приложение

директории:

__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 

примеры Код:

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.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(); 
    } 

} 

приложения/услуги/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); 
       }); 
      }); 
    } 

} 

Для объяснения код, я думаю, что это достаточно.

Ошибка:
Я загрузил все файлы по FTP на сервер с помощью FileZilla. На странице представлены следующие ошибки:

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

+0

Вы используете «Angular-cli» для своего проекта Angular2? –

+0

Нет, я не использую Angular-cli –

ответ

0

Если вы заинтересованы в угловых 2, это будет большим преимуществом для использования угловой консоли. Кроме того, это облегчит ваше развертывание :)

Смежные вопросы