Я пытаюсь загрузить свой веб-сайт на основе 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
Вы используете «Angular-cli» для своего проекта Angular2? –
Нет, я не использую Angular-cli –