Angular2, что я делаю неправильно?

Im обучение Angular2 рамки, и просто застрял в середине. Цель - простое приложение, которое загружает изображение из нужного компонента (Главная).Angular2, что я делаю неправильно?

Вот что у меня есть:

приложение/app.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule);

приложение/app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent }   from './app.component'; 
import { HomeComponent }  from './home/home.component'; 
import { DemoService }   from './services/demo.service'; 
import { routing }    from './app.routing'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing 
    ], 
    declarations: [ 
    AppComponent, 
    HomeComponent 
    ], 
    providers: [ 
    DemoService, 
    ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { 
}

приложение/app.component.ts

import {Component} from '@angular/core'; 
import {DemoService} from './services/demo.service'; 
import {HomeComponent} from './home/home.component'; 
import {routing, 
     appRoutingProviders} from './app.routing'; 

@Component({ 
    selector: 'app', 
    template: require('./app.component.html'), 
    providers: [DemoService] 
}) 

export class AppComponent {}

/app/app.component.html

<div>AppComponent</div>

../index.html

<!DOCTYPE html> 
<html> 
    <body> 
    <app>Loading...</app> 
    </body> 
</html>

приложение/дома/home.component.ts

import {Component, OnInit} from '@angular/core'; 
import {DemoService} from '../services/demo.service'; 

@Component({ 
    selector: 'home', 
    template: require('./home.component.html') 
}) 
export class HomeComponent implements OnInit { 
    title: string = 'Home Page'; 
    body: string = 'This is the about home body'; 
    message: string; 

    constructor(private _stateService: DemoService) { } 

    ngOnInit() { 
    this.message = this._stateService.getMessage(); 
    } 

    updateMessage(m: string): void { 
    this._stateService.setMessage(m); 
    } 
}

приложение/app.routing.ts

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { HomeComponent }  from './home/home.component'; 

const appRoutes: Routes = [ 
    { 
    path: '/', 
    component: HomeComponent 
    } 
]; 

export const appRoutingProviders: any[] = [ 

]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app/home/home.component.html

<div>HomeComponent</div>

Поскольку он исходит из определений компонентов, у меня есть соответствующая DemoSevice, которая на данный момент не существует. При запуске приложения я получил «Загрузка ...», и ничего больше не изменилось.

Не могли бы вы предложить мне правильный путь?

источник

2016-09-11 ArkadyB

вы могли бы проверить консоль браузера? – yurzui

есть ли у вас какие-либо ошибки? посмотрите на консоль, и вы уверены, что ваш './app.component.html' имеет' <маршрутизатор-выход> '? –

сначала удалите 'провайдеры: [DemoService]' из 'app/app.component.ts'. Затем проверьте консоль браузера и сообщите нам об ошибках. – micronyks

У вас должна быть директива router-outlet, размещенная внутри вашего app.component.html. Причина добавления этой директивы, оно будет держать трек браузера URL & Угловая маршрутизатор загрузит соответствующий Component внутри router-outlet директива

/app/app.component.html

<div>AppComponent</div> 
<router-outlet></router-outlet>

Кроме того, вы должны поставить различные файл сценария, связанные с angular2 на index.html

<head> 
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script> 

    <script src="https://unpkg.com/[email protected]?main=browser"></script> 
    <script src="https://unpkg.com/[email protected]"></script> 
    <script src="https://unpkg.com/[email protected]/dist/system.src.js"></script> 

    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
</head> 

<body> 
    <app>Loading...</app> 
</body>

источник

2016-09-11 09:09:25

Добавлено, без изменений. То же «загрузка ...» и ничего. – ArkadyB

@ Pankaj это должно быть ' Загрузка ...'. иначе OP может проверить часть скриптов. – micronyks

@Pankaj, однажды добавил

scripes, я получаю 404 в консоли - http: // localhost: 3000/app/main.js. Но у меня нет файла main.ts в любом месте ... – ArkadyB

1) Вы должны изменить template: require('./app.component.html') для templateUrl:'app/app.component.html'.

2) попытаться изменить его

const appRoutes: Routes = [ 
    { 
    path: '', 
    redirectTo:'home', 
    component: HomeComponent 
    }, 
    { 
    path: 'home', 
    component: HomeComponent 
    } 
];

3) приложение/app.componet.html

<div>AppComponent</div> 
<router-outlet></router-outlet> //<----added here..

источник

2016-09-11 09:11:00 micronyks

Пробовал это без везения. AppComponent, похоже, не загружается – ArkadyB

, а затем попытается удалить 'routing' из' import' и 'homeComponent' из' declarations' и удалить 'router-outlet'. Затем посмотрите, загружается ли «AppComponnent» по крайней мере или нет. – micronyks

Я обновил свой ответ, поскольку он сработал для вас. – micronyks

Angular2, что я делаю неправильно?

ответ

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