수유산장

angular, primeng - p-overlayPanel 위치가 정상적이지 않을때

<div #overlayTarget>

    <button type="text" pButton label="Basic" (click)="op.toggle($event)"></button>

</div>
<p-overlayPanel #op [appendTo]="overlayTarget">
    <ng-template pTemplate>
        레이어 내용입니다.
    </ng-template>
</p-overlayPanel>

appendTo 속성에 타겟을 설정해 주면 된다.

angular, ie11에서 SCRIPT1002: 구문 오류 polyfills.js (25944,5) 오류로 흰 화면만 나오는 에러

ie11에서 아래와 같이 흰 화면과 

원인은 

.browserslistrc 파일에 있는 browserslist 에서 IE11이 지원 안되게 설정되어서 생긴 문제이다.

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

not IE 11에서 not 을 삭제하고 다시 빌드한다.

이래도 안되는 경우는 tsconfig.json 의

compilerOptions 의 "target": "es2015", 에서

es2015 를 es5로 변경하고 빌드 한다.

앵귤러 라우터 학습 중 

TS1206: Decorators are not valid here. 라는 에러에 봉착했다.

@NgModule 부분이 빨간색으로 표시되면서

컴파일 이후 에러가 발생했다.

데코레이터이 위치가 잘못되었다는 것이다.

아래는 에러나는 소스이다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { LayoutComponent } from './layout/layout/layout.component';

import { RouterModule, Routes, Router } from '@angular/router';
import { TempListComponent } from './page/temp-list/temp-list.component';
import { TempDetailComponent } from './page/temp-detail/temp-detail.component';
import { IndexComponent } from './page/index/index.component';
@NgModule({
  declarations: [
    AppComponent,
    LayoutComponent,
    IndexComponent,
    TempListComponent,
    TempDetailComponent
  ],
  imports: [
    RouterModule.forRoot(appRoutes),
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
const appRoutes: Routes = [
  {path: '', redirectTo: 'index', pathMatch: 'full'},
  {path: 'index', component: IndexComponent},
  {path: 'temp',
    children: [
      {path: '', component: TempListComponent},
      {path: ':id', component: TempDetailComponent},
    ]
  },
];
export class AppModule {}

ERROR in src/app/app.module.ts(11,1): error TS1206: Decorators are not valid here.

이는 데코레이터에 대한 이해가 부족해서 생긴 에러이다.

라우터 설정 값을 추가하면서 데코레이터 아래에 클래스 선언부 위, 두 중간에 삽입해서 생긴 문제이다.

데코레이터는 클래스의 역할을 정의하고 메타데이터를 정의하는데 사용된다.

따라서 decorator와 class는 붙어 있어야 된다.

아래와 같이 router 설정을 위로 이동하면 해결이 되는 문제다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { LayoutComponent } from './layout/layout/layout.component';

import { RouterModule, Routes, Router } from '@angular/router';
import { TempListComponent } from './page/temp-list/temp-list.component';
import { TempDetailComponent } from './page/temp-detail/temp-detail.component';
import { IndexComponent } from './page/index/index.component';
const appRoutes: Routes = [
  {path: '', redirectTo: 'index', pathMatch: 'full'},
  {path: 'index', component: IndexComponent},
  {path: 'temp',
    children: [
      {path: '', component: TempListComponent},
      {path: ':id', component: TempDetailComponent},
    ]
  },
];
@NgModule({
  declarations: [
    AppComponent,
    LayoutComponent,
    IndexComponent,
    TempListComponent,
    TempDetailComponent
  ],
  imports: [
    RouterModule.forRoot(appRoutes),
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

앵귤러에서 기본 포트는 4200입니다.

로컬에서 개발중이라면 

http://localhost:4200 으로 서비스 됩니다.

그런데 프로젝트를 2개를 동시에 작업중이거나

테스트용 프로젝트를 동시에 사용하면 4200 포트를 동시에 사용할 수 없으니

포트를 변경해야 하는 경우가 있습니다.

포트 변경 방법은 2가지가 있습니다.

1. 실행 단계에서 포트 설정

2. 설정파일에서 포트 설정

1. 실행 단계에서 포트 설정은 angular로 서버 시작시 포트 옵션을 설정합니다.

ng serve --port 4201 

와 같이 실행하면 4001번 포트로 실행됩니다.

2. 설정파일에서 포트 설정

4200번 기본 port를 변경하고자 한다면 

프로젝트 루트에 위치한

angular.json 파일에서 설정을 변경하면 됩니다.

architect > serve > options 항목에

"port": 포트번호(숫자)를 추가하면 됩니다.

프로젝트 기본 설정에는 해당 항목이 없으므로 추가해 주어야 합니다.

예 ) "port": 4202

그럼

http://localhost:4202 으로 접근이 가능합니다.