Angular-cli: ์˜ค๋ฅ˜: 'MyComponent'๋ฅผ ๋กœ๋“œํ•  ๊ธฐ๋ณธ ์ฝ˜์„ผํŠธ๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2016๋…„ 10์›” 10์ผ  ยท  2์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: angular/angular-cli

๋‹ค์Œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•ด ์ฃผ์‹ญ์‹œ์˜ค.

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#! #๋ฆฌ์กธ๋ธŒ๊ฐ€๋“œ

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค -- ์ฐจ๋“œ

๋ชจ๋“  2 ๋Œ“๊ธ€

์•Œ๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฌผ์„ ์˜ค์—ผ์‹œ์ผœ ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค... ์ด๊ฒƒ์€ ๋ผ์šฐํŒ…์˜ ๋™์ž‘ ๋ณ€๊ฒฝ์œผ๋กœ ํŒ๋ช…๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์‚ฌ๋žŒ์—๊ฒŒ ๋„์›€์ด ๋ ๊นŒ ํ•˜์—ฌ ์—ฌ๊ธฐ์— ๋‚จ๊ฒจ ๋‘ก๋‹ˆ๋‹ค.

๋‚ด <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#! #๋ฆฌ์กธ๋ธŒ๊ฐ€๋“œ

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค -- ์ฐจ๋“œ

์ด ๋ฌธ์ œ๋Š” ํ™œ๋™์ด ์—†์–ด ์ž๋™์œผ๋กœ ์ž ๊ฒผ์Šต๋‹ˆ๋‹ค.
์œ ์‚ฌํ•˜๊ฑฐ๋‚˜ ๊ด€๋ จ๋œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์ƒˆ ๋ฌธ์ œ๋ฅผ ์ œ์ถœํ•˜์‹ญ์‹œ์˜ค.

์ž๋™ ๋Œ€ํ™” ์ž ๊ธˆ ์ •์ฑ… ์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณด์„ธ์š”.

_์ด ์ž‘์—…์€ ๋ด‡์— ์˜ํ•ด ์ž๋™์œผ๋กœ ์ˆ˜ํ–‰๋˜์—ˆ์Šต๋‹ˆ๋‹ค._

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰