angular2-webpack-starterにモジュールを追加する


angular2-webpack-starter

ここに説明がある angular2 starter  /  リポジトリ repository

moduleの追加

赤字を編集、青字をコピー

  • app
  • +barrel
  • +detail
  • about <<< コピー
  • mypage <<< abautのペーストをrename
  • home
  • no-content
  • app.component.css
  • app.component.spen.css
  • app.component.ts
  • app.e2d.ts
  • app.module.ts
  • app.resolver.ts
  • app.routes.ts
  • environmemt.ts
  • index.ts

mypageフォルダ追加

file名変更
about.component.ts
about.component.spec.ts
>>>
mypage.component.ts
mypage.component.spec.ts
mypage.component.ts内の変更
@Component内編集
selector: 'about', >>> selector: 'mypage',
template:内
<h1>About</h1> >>> <h1>Mypage</h1>
コンポーネント名の変更
export class AboutComponent implements OnInit { >>> export class MypageComponent implements OnInit {
indext.ts内の変更
export * from './about.component';
>>>
export * from './mypage.component';

app.componet.ts編集

@component/templateの変更
<nav>タグ内に、
<a [routerLink]=" ['./mypage'] " routerLinkActive="active" [routerLinkActiveOptions]= "{exact: true}"> Mypage </a>
を追加。

app.module.ts編集

import追加
import { MypageComponent } from './mypage';
を追加。
@NgModule内追加
declarations:内に
MypageComponent,
を追加。

app.route.ts編集

import追加
import { MypageComponent } from './mypage';
を追加。
export const ROUTES内追加
{ path: 'mypage', component: MypageComponent },
を追加。 一番下(path: '**')より下に追加すると、リンクされなくなるので注意。

npm startで起動する。
a2_webpack_add_module

こんな感じに新ページとルーティングスイッチが追加される。