๋ค์ ์ ๋ณด๋ฅผ ์ ๊ณตํด ์ฃผ์ญ์์ค.
OS?
๋งฅ OS X
๊ฐ๋-cli: 1.0.0-beta.17
๋
ธ๋: 6.7.0
์ด์ ์ฒด์ : ๋ค์ x64
์ถ์ํ RC4 ์ฑ ๋ง์ด๊ทธ๋ ์ด์ . ng new๋ก ์ค์ผ๋ ํค์ ์์ฑํ์ผ๋ฉฐ ๊ธฐ์กด ํ๋ก์ ํธ์์ ์ฝ๋๋ฅผ ๋ง์ด๊ทธ๋ ์ด์ ํ๊ณ ์์ต๋๋ค.
์คํจ๋ก ์ธํ ๋ก๊ทธ์ ๋๋ค.
๋ด ๊ฒฝ๋ก๋ก ์ด๋ํ๋ ค๊ณ ํ ๋ ๊ตฌ์ฑ ์์๊ฐ ์กด์ฌํ์ง ์๋๋ค๊ณ ๋งํฉ๋๋ค.
logging-error-handler.ts:58Uncaught(์ฝ์): ์ค๋ฅ: 'StyleGuideComponent'๋ฅผ ๋ก๋ํ ๊ธฐ๋ณธ ์ฝ์ผํธ๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค.LoggingErrorHandler.handleError @ logging-error-handler.ts:58
logging-error-handler.ts:59์ค๋ฅ: ์กํ์ง ์์(์ฝ์ ์ค): ์ค๋ฅ: 'StyleGuideComponent'๋ฅผ ๋ก๋ํ ๊ธฐ๋ณธ ์ฝ์ผํธ๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค.
resolvePromise(zone.js:429)์์
zone.js:406์์
ZoneDelegate.invoke์์ (zone.js:203)
Object.onInvoke์์ (ng_zone_impl.js:43)
ZoneDelegate.invoke์์ (zone.js:202)
Zone.run์์ (zone.js:96)
zone.js:462์์
ZoneDelegate.invokeTask(zone.js:236)
Object.onInvokeTask์์(ng_zone_impl.js:34)
ZoneDelegate.invokeTask(zone.js:235)์์
๋ด app-routing.module.ts(๊ฐ์ฒด)๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StyleGuideComponent } from './assets/style-guide/style-guide.component';
const routes: Routes = [
{ path: '', redirectTo: '/style-guide', pathMatch: 'full' },
{ path: 'style-guide', component: StyleGuideComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class MyAppRoutingModule { }
๊ทธ๋ฆฌ๊ณ ๋ด app.module.ts (๋ค์, ๋จ์ํ)
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { MaterialModule } from '@angular/material';
import { MyAppRoutingModule } from './app-routing.module';
import { StyleGuideComponent } from './assets/style-guide/style-guide.component';
@NgModule({
declarations: [
AppComponent,
StyleGuideComponent
],
imports: [
BrowserModule,
FormsModule,
RouterModule,
HttpModule,
MaterialModule.forRoot(),
MyAppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
๋ค๋ฅธ ๊ตฌ์ฑ ์์๋ก ๋ผ์ฐํ ํ๋ ค๊ณ ํด๋ ๋์ผํ ๋ฌธ์ ๊ฐ ๋ฐ์ํฉ๋๋ค. ์์ด๋์ด๊ฐ ์์ต๋๊น?
์๊ฒ ์ต๋๋ค. ๋ฌผ์ ์ค์ผ์์ผ ์ฃ์กํฉ๋๋ค... ์ด๊ฒ์ ๋ผ์ฐํ ์ ๋์ ๋ณ๊ฒฝ์ผ๋ก ํ๋ช ๋์์ต๋๋ค. ๋ค๋ฅธ ์ฌ๋์๊ฒ ๋์์ด ๋ ๊น ํ์ฌ ์ฌ๊ธฐ์ ๋จ๊ฒจ ๋ก๋๋ค.
๋ด <router-outlet>
์ฃผ์์ ์กฐ๊ฑด๋ถ๊ฐ ์์๋๋ฐ ๋ ์ด์ ์๋ํ์ง ์์ต๋๋ค.
<div class="main-body" *ngIf="user && user.authorized">
<router-outlet></router-outlet>
</div>
๊ฐ/๊ฐ#11100
๊ฒฝ๋ก ๊ฐ๋๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
https://angular.io/docs/ts/latest/guide/router.html#! #๊ทผ์ ์ฐ๋
https://angular.io/docs/ts/latest/guide/router.html#! #๋ฆฌ์กธ๋ธ๊ฐ๋
๊ฐ์ฌํฉ๋๋ค -- ์ฐจ๋
์ด ๋ฌธ์ ๋ ํ๋์ด ์์ด ์๋์ผ๋ก ์ ๊ฒผ์ต๋๋ค.
์ ์ฌํ๊ฑฐ๋ ๊ด๋ จ๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ฉด ์ ๋ฌธ์ ๋ฅผ ์ ์ถํ์ญ์์ค.
์๋ ๋ํ ์ ๊ธ ์ ์ฑ ์ ๋ํด ์์ธํ ์์๋ณด์ธ์.
_์ด ์์ ์ ๋ด์ ์ํด ์๋์ผ๋ก ์ํ๋์์ต๋๋ค._
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์๊ฒ ์ต๋๋ค. ๋ฌผ์ ์ค์ผ์์ผ ์ฃ์กํฉ๋๋ค... ์ด๊ฒ์ ๋ผ์ฐํ ์ ๋์ ๋ณ๊ฒฝ์ผ๋ก ํ๋ช ๋์์ต๋๋ค. ๋ค๋ฅธ ์ฌ๋์๊ฒ ๋์์ด ๋ ๊น ํ์ฌ ์ฌ๊ธฐ์ ๋จ๊ฒจ ๋ก๋๋ค.
๋ด
<router-outlet>
์ฃผ์์ ์กฐ๊ฑด๋ถ๊ฐ ์์๋๋ฐ ๋ ์ด์ ์๋ํ์ง ์์ต๋๋ค.๊ฐ/๊ฐ#11100
๊ฒฝ๋ก ๊ฐ๋๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
https://angular.io/docs/ts/latest/guide/router.html#! #๊ทผ์ ์ฐ๋
https://angular.io/docs/ts/latest/guide/router.html#! #๋ฆฌ์กธ๋ธ๊ฐ๋
๊ฐ์ฌํฉ๋๋ค -- ์ฐจ๋