Webアプリケーション生成後にSmartUXにてデザイン構築を行うには

1

VisualStudioCodeを開く

VisualStudioCodeで行う必要があります。

\output\プロジェクト名\package.jsonの修正

“@smartux/xpa-bridge”: “4.1000.5-MSJ”

という行がありますので後方にカンマをつけ右のように変更してください。

"@smartux/xpa-bridge": "4.1000.5-MSJ",
"@coreui/angular": "4.4.9",
"@coreui/coreui": "4.2.6",
"@coreui/icons": "3.0.1",
"@coreui/icons-angular": "4.4.7"
      

2

コマンドラインを開く

変更後、コマンドラインにて右コードを入力し実行してください。

npm install

3

ファイルを作成する

「\output\プロジェクト名\src\app\widget.module.ts」

というファイルを作成して下の内容をコピーアンドペーストして下さい。

import { BadgeModule, ButtonModule, ButtonGroupModule, CardModule, DropdownModule, GridModule, ListGroupModule, SharedModule, AccordionModule } from "@coreui/angular";
import { NgModule } from "@angular/core";

import { MagicAngularMaterialModule } from "@magic-xpa/angular-material-core";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatSelectModule } from "@angular/material/select";
import { MatPaginatorModule } from "@angular/material/paginator";
import { MatListModule } from "@angular/material/list";
import { MatInputModule } from "@angular/material/input";
import { MatRadioModule } from "@angular/material/radio";
import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatSortModule } from "@angular/material/sort";
import { MatTableModule } from "@angular/material/table";
import { MatCheckboxModule } from "@angular/material/checkbox";
import { MatDialogModule } from "@angular/material/dialog";
import { MatCardModule } from "@angular/material/card";
import { MatNativeDateModule } from "@angular/material/core";
import { MatTabsModule } from "@angular/material/tabs";
import { MatTooltipModule } from "@angular/material/tooltip";
import { MatButtonModule } from "@angular/material/button";
import { MatToolbarModule } from "@angular/material/toolbar";
import { MatSidenavModule } from "@angular/material/sidenav";
import { MatIconModule } from "@angular/material/icon";
import { MatGridListModule } from "@angular/material/grid-list";

import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';

const widgetModules = [BadgeModule,
ButtonModule,
ButtonGroupModule,
CardModule,
DropdownModule,
GridModule,
ListGroupModule,
SharedModule,
AccordionModule];

@NgModule({

imports: [ MagicAngularMaterialModule,
MatFormFieldModule,
MatSelectModule,
MatPaginatorModule,
MatListModule,
MatInputModule,
MatRadioModule,
MatDatepickerModule,
MatSortModule,
MatTableModule,
MatCheckboxModule,
MatDialogModule,
MatCardModule,
MatNativeDateModule,
MatTabsModule,
MatTooltipModule,
MatButtonModule,
MatToolbarModule,
MatSidenavModule,
MatIconModule,
MatGridListModule,
  ],
exports: [...widgetModules,],
providers: [],
schemas: [CUSTOM_ELEMENTS_SCHEMA]

})
export class WidgetModule {
}

}
    

4

tsファイルに行を追加する①

「\output\プロジェクト名\src\app\magic\magic.gen.lib.module.ts」

の最後のimport文の次に右の行を追加してください。

import { WidgetModule } from "../widget.module";

5

tsファイルに行を追加する②

「NgxMaskModule.forRoot()」の次の行に右のコードを追加してください。

NgxMaskModule.forRoot()の後方にカンマがついていない場合は付与してください。

WidgetModule

6

tsファイルに行を追加する③

「\output\プロジェクト名\src\magic-styles.cssの2行目に」の次の行に右のコードを追加してください。

@import "../node_modules/@coreui/coreui/dist/css/coreui.css";