Question

我正在尝试将基于Angular 2的网站上传到服务器并在我的浏览器上运行。这是一个正常的网站，没什么特别的，我只是想了解Angular 2。

那么，我之前做了什么？
基本上，我在localhost中使用AngularJS构建了相同的网站。之后，我将网站（使用登录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);
                });
            });
    }

}

为了解释代码，我认为这已经足够了。

错误：
我使用FileZilla将ftp上的所有文件上传到服务器。该页面显示以下错误：

uncaught SyntaxError：意外的令牌＆lt;
系统未定义System.config

Answer 1

如果您对Angular 2感兴趣，使用angular-cli将是非常有利的。此外，它将简化您的部署：）

如何部署Angular 2网站？

1 个答案: