<div id="readability-page-1" class="page"><div>
                                <div id="SE-b65f0e69-d1f2-43df-be21-5b6b71dd6fe4">

                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-b65f0e69-d1f2-43df-be21-5b6b71dd6fe4&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMDAzMjNfMjk2/MDAxNTg0OTU0NTczNTUz.qKbJ-I5GP57bWBrLAT-X7K5pEpZBeDFQ8QefrhXoV3wg.-4USibyLY9PN231kWiY9hzt0B7308pzj-qR_mZe-QcQg.PNG.chowin21/image.png&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDAzMjNfMjk2/MDAxNTg0OTU0NTczNTUz.qKbJ-I5GP57bWBrLAT-X7K5pEpZBeDFQ8QefrhXoV3wg.-4USibyLY9PN231kWiY9hzt0B7308pzj-qR_mZe-QcQg.PNG.chowin21/image.png?type=w80_blur" data-lazy-src="https://mblogthumb-phinf.pstatic.net/MjAyMDAzMjNfMjk2/MDAxNTg0OTU0NTczNTUz.qKbJ-I5GP57bWBrLAT-X7K5pEpZBeDFQ8QefrhXoV3wg.-4USibyLY9PN231kWiY9hzt0B7308pzj-qR_mZe-QcQg.PNG.chowin21/image.png?type=w800" data-width="693" data-height="753" alt="">
                                    </a>
                                </p>
                            <p id="SE-53f8ffe4-18bc-4dbc-b64a-4b3fc1b5092f"><span id="SE-c18a4833-c989-4344-ba42-df4f03ee3ec7">결과물</span></p>
                        </div>                <div id="SE-dfb7fdc4-931c-42ac-bb75-3a46f1d5884b">

                                    <p id="SE-b5fa0fb8-a8e8-4de7-9861-c69d43bc817c"><span id="SE-b45c1a7f-50bd-4d36-b3e6-dc63f1d4562c">ng 명령어가 안된다면, 파일을 새로 만드셔셔 하는 방법도있습니다.</span></p><p id="SE-fd3462f5-ecc4-4e98-b475-5914788423a5"><span id="SE-fb85b7fd-f71a-4bda-be93-13edcca57171">약간 번거로울수있지만, 에러메시지 나오는걸 잘 읽어보면 해결이 됩니다.</span></p><p id="SE-4a1b1102-09c5-441c-9654-1fd33387c7b3"><span id="SE-50ebdb36-1d79-4b75-8e0e-b44156cd3ca0">​</span></p><p id="SE-e27e6b94-73bb-4f9f-82f6-ca1f80c511c1"><span id="SE-6bedd132-7634-4ed1-a9be-012146d51d3d">빈페이지 만드려면 아래의 절차를 하세요</span></p><p id="SE-625c15f6-5d52-4592-89c4-372ae819f9f8"><span id="SE-341e128f-b8be-4b16-9178-26646c9a9f35">​</span></p><p id="SE-b85b95ad-14c0-4dbe-b6f1-7f371ef0c8ca"><span id="SE-5be56e71-e9bb-4b1d-88b2-e3d88d5111b6">1. 생성 blank.component.html</span></p><p id="SE-ff1534b0-514f-49e0-9d02-61b8024c8e72"><span id="SE-16271def-cf55-46b5-a492-a3d17019a162">2. 생성 blank.component.scss </span></p><p id="SE-a982ee5b-0a32-4942-bc43-4352c0963ddb"><span id="SE-c9eb7326-30ee-4283-920f-1494db39bf4c">​</span></p><p id="SE-4604a7c1-51e0-4adc-97b0-e18d9996e92e"><span id="SE-51e05b17-3a98-4c72-ab9e-fac86a416e3d">여기까지는 어려운점이없지요</span></p><p id="SE-7514fa8b-a726-438d-924b-8ae4141dfcff"><span id="SE-0ab4a00c-78eb-4119-af27-fa7e78c062f4">다음부터 혼동이 될겁니다. 하지만 아래대로 하면 쉬워요 </span></p><p id="SE-6a6b589f-ac63-4d30-877c-3aabb47bf2db"><span id="SE-5fd5564b-d35b-45ae-b797-6ba077f0f445">​</span></p><p id="SE-fed831b8-caa6-4108-86b0-0e73a6d60579"><span id="SE-a3bbb6e9-cf23-4d02-beac-bafc7f6a3160">3. 생성 blank.component.ts </span></p>
                            </div>                <div id="SE-e81c36cb-7f03-4e53-bb85-2527aa5faec0">
                                    <p>import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'blank',
  templateUrl: './blank.component.html',
  styleUrls: ['./blank.component.scss']
})
export class BlankComponent implements OnInit {

  ngOnInit() {
    
  }

}
</p>
                                </div>                                <div id="SE-2a032eda-3d9c-4f60-8b69-4c99d468bf12">
                                    <p>import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BlankComponent } from './blank.component';
import { BlankRoutingModule } from './blank.routing.module';
import { LayoutModule } from '../../core/layouts/layout/layout.module';

@NgModule({
  declarations: [
    BlankComponent,
  ],
  imports: [
    CommonModule,
    LayoutModule,
    BlankRoutingModule,
  ],
  exports: [
    BlankComponent
  ]
})
export class BlankModule { }
</p>
                                </div>                <div id="SE-fe690ead-235b-43c5-934f-8ce49fb62b2b">

                                    <p id="SE-bbab4c2f-b82d-4da0-80b2-307fed51cdf9"><span id="SE-1552a039-c4ed-4755-85ac-740bc4250b5d">import하는것들이 다있어야겠죠? 없다면 impot를 삭제해주세요.</span></p><p id="SE-2ad37988-e901-4355-b29a-ebb2d79c1f8f"><span id="SE-b8bb4038-bd89-4011-b17c-8c1bc25ba68b">​</span></p><p id="SE-328e68d8-a8ee-492d-9620-c9db72cce6ad"><span id="SE-f3611379-e83a-4115-bc2d-6c3b99b8bc62">5. 생성 blank.routing.module.ts</span></p>
                            </div>                <div id="SE-50ca2853-da45-45d0-bfd2-baed6cb94b41">
                                    <p>import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BlankComponent } from './blank.component';
import { LayoutComponent } from '../../core/layouts/layout/layout.component';

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: '',
        component: LayoutComponent,
        
        children: [
          { path: '', component: BlankComponent },
        ],
      },
    ]),
  ],
  exports: [RouterModule],
})
export class BlankRoutingModule {
}
</p>
                                </div>                <div id="SE-025f633b-26a2-48a8-905b-96b08995cd9e">
                            <p id="SE-a5411c53-179c-4498-9840-d065a69bc952"><span id="SE-f8a89d3a-406b-4dc3-8ee0-9d18de3983ae">6. 수정 app-routing.module.ts</span></p>
                        </div>                <div id="SE-9367cc55-4114-41b1-b247-a5a27dbeaff3">
                                    <p>import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'main', pathMatch: 'full' },

  { path: 'main', loadChildren: () =&gt; import('./modules/main/main.module').then(m =&gt; m.MainModule) },
  { path: 'blank', loadChildren: () =&gt; import('./modules/blank/blank.module').then(m =&gt; m.BlankModule) },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {
}
</p>
                                </div>                <div id="SE-c4b673eb-56fa-4a59-9919-5c3ed0e783d0">

                                    <p id="SE-9fe57074-4ef1-4d4f-b449-f7cbb47e48ff"><span id="SE-6727abcb-25ca-41a8-9402-33874b8e0e4b">끝</span></p><p id="SE-0d9bce10-fa0e-4bb6-bb8f-68f7f0edc838"><span id="SE-f675c815-a8aa-462d-8a11-f9f051280386">​</span></p><p id="SE-fbe156aa-9ed7-47d2-bbed-51cd294102be"><span id="SE-a1334b5a-0fc7-4357-944f-5453fe1cc311"><span>#마케팅하는개발자</span> </span></p><p id="SE-9bc2fc9a-17b5-48f1-a0bf-3ad4f358242e"><span id="SE-be2e04fd-8172-418e-8ee2-5fa2b3ddb555"># angular create new page</span></p><p id="SE-0d125a8f-1796-4dbb-abaf-5d85b17cfbc8"><span id="SE-723a8c46-102a-4783-9555-d138cff8ae43"># create new page in angular</span></p><p id="SE-ffa8b75e-b3d4-4550-b18f-70645303a947"><span id="SE-2d6fc287-25e8-4614-b578-a13a0f6db9ed">​</span></p>
                            </div>                                <div id="SE-93722d09-84a1-490b-a918-6a630ff1f746">

                                    <p id="SE-b925da83-d7e6-408a-b29e-22deda04b389"><span id="SE-1f1896b8-a398-41b5-be33-d893ecd6a24d">두번째 방법 </span></p><p id="SE-18bf71c5-b500-4dcd-9d3f-98e6f6e1ab47"><span id="SE-7670a9ae-a3d2-4412-9f0b-ff116e5a1199">-ng 사용안하고싶다.</span></p><p id="SE-3f6d45c6-1b46-4055-afb1-77b14fffb1f1"><span id="SE-33b30dc2-bffd-4362-a96b-ba570e932c4d">-routing 파일과 module파일을 따로따로 만들어서 관리 하고 싶지않다. 한곳에서 모두 모아서 관리 하고싶다.</span></p><p id="SE-d68e28b8-5904-47c1-819b-a2f4a379fa4f"><span id="SE-eb93df14-3a41-4a5c-98a3-954365cf2898">​</span></p><p id="SE-cbf1d36e-bbfb-4d22-9def-5a9bdba3410b"><span id="SE-b1372220-c2d5-466a-b1fd-13e40a67bd11">이럴때 하는방법.</span></p><p id="SE-3b21e097-97f4-48b5-b850-28b92f119de4"><span id="SE-647e548e-8f6a-4eb1-a709-d3d15fb9157d">​</span></p>
                            </div>                <div id="SE-b6d16972-a28b-4218-87f3-b50db4c31798">

                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-b6d16972-a28b-4218-87f3-b50db4c31798&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMDAzMzFfMTkw/MDAxNTg1NjQyOTE3NDc2.8sLeKIiFbJR_SBkmCL7fk5gXC_qQCscilmVaX24fcDUg.xSCGj4Po79LlAtazASKJsf1a-DIN-CF8PhlIDUK7KOIg.PNG.chowin21/image.png&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDAzMzFfMTkw/MDAxNTg1NjQyOTE3NDc2.8sLeKIiFbJR_SBkmCL7fk5gXC_qQCscilmVaX24fcDUg.xSCGj4Po79LlAtazASKJsf1a-DIN-CF8PhlIDUK7KOIg.PNG.chowin21/image.png?type=w80_blur" data-lazy-src="https://mblogthumb-phinf.pstatic.net/MjAyMDAzMzFfMTkw/MDAxNTg1NjQyOTE3NDc2.8sLeKIiFbJR_SBkmCL7fk5gXC_qQCscilmVaX24fcDUg.xSCGj4Po79LlAtazASKJsf1a-DIN-CF8PhlIDUK7KOIg.PNG.chowin21/image.png?type=w800" data-width="682" data-height="194" alt="">
                                    </a>
                                </p>
                        </div>                <div id="SE-6f5137d0-ebde-4056-85a6-3d9c7b506dfb">
                            <p id="SE-3eef9745-78fe-4fa2-a159-11773d56e3d1"><span id="SE-01219377-8bef-4e43-8deb-8c8022f32800">폴더와 , html, scss , ts 만 만듭니다. </span></p>
                        </div>                <div id="SE-fac50d6b-1e68-4e07-9f68-521f30074fde">
                                    <p>import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-mypage-public-pr',
  templateUrl: './mypage_public_pr.component.html',
  styleUrls: ['./mypage_public_pr.component.scss'],
})
export class MypagePublicPRComponent implements OnInit  {

  constructor() {}
  public ngOnInit(): void {}
}
</p>
                                </div>                <div id="SE-1f7efc0e-aef3-4080-ac57-9a71efdaeec2">

                                    <p id="SE-719ff83c-9c2b-4227-b7f4-d0fc460a3dee"><span id="SE-337fce24-ea58-4c0f-a1ce-d69ae7de6343">ts 파일은 html, scss를 컴포넌트로 만들어서 사용 하겠다 라는 의미로서 선언을 해주기 때문에 이렇게 사용합니다.</span></p><p id="SE-c9c08ca7-7a07-4e08-b7c6-3bd2f44064fa"><span id="SE-5ff2ff58-53a0-4648-ad2e-6f0efcc563dd">(참고, component가 여러개 모이면 module입니다. angular8에서는 이렇게 사용해요) </span></p><p id="SE-23f12314-dc75-4c63-801c-25ccd3593979"><span id="SE-df0fd9d0-588c-4b38-89fd-910e9cb851d6">​</span></p><p id="SE-f96bd2ce-ae8c-48d1-b261-e3f5bdf461e8"><span id="SE-2fbd0641-4fc2-45da-915d-4466ab663527">-root 폴더에 app.module.ts 에 아래의 component 를 core module에 넣고 사용하겠다고 선언한다. </span></p>
                            </div>                <div id="SE-d24f905a-2b64-4fd9-a7bf-6c832595307b">
                                    <p>import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    MypagePublicPRComponent,
    </p>
                                </div>                <div id="SE-bd24f39c-65cc-4e58-8dd4-0781848321a6">

                                    <p id="SE-6a678568-7470-423b-8131-29b8d726b902"><span id="SE-09aa945c-81f2-4a57-ac86-cd64cc0ebf7a">이렇게 추가 해주면된다. </span></p><p id="SE-976072ad-52dd-4422-8fca-ba5db53eea14"><span id="SE-507a7ce7-877a-4a72-8b78-da47e5aa2b14">​</span></p><p id="SE-ecb89f4d-79bc-4ad4-acf2-f8fbcf627607"><span id="SE-632016b2-e6c4-46ee-b543-e419db61b172">-root 폴더에 routing.ts 에 아래를 component 를 특정 url 로 사용하겠다고 선언한다.</span></p>
                            </div>                <div id="SE-e623b11c-d889-45eb-8b41-d2ecb6b84fd8">
                                    <p>import { MypagePublicPRComponent } from './mypage_public_pr/mypage_public_pr.component'

const routes: Routes = [
{ path: 'pr', component: MypagePublicPRComponent},</p>
                                </div>                    </div></div>

그로스해킹

결과물화면 ng 명령어가 안된다면, 파일을 새로 만드셔셔 하는 방법도있습니다. 약간 번거로울수있지만, 에러메시지 나오는걸 잘 읽어보면 해결이 됩니다. 빈페이지 만드려면 아래의 절차를 하세요 1. 생성 blank.component.html 2. 생성 blank.component.scss 여기까지는 어려운점이없지요 다음부터 혼동이 될겁니다. 하지만 아래대로 하면 쉬워요 3. 생성 blank.component.ts 4. 생성 blank.module.ts import하는것들이 다있어야겠죠? 없다면 impot를 삭제해주세요. 5. 생성 blank.routing.module.ts 6. 수정 app-routing.module.ts 끝 #마케팅하는개발자 # angular create new page # create new page in angular 두번째 방법 -ng 사용안하고.......

앵귤러 새페이지 만들기 - ng 사용 안하기

댓글