Magic xpa Web Client
お疲れ様です。
Magic xpa Web Clientを勉強しているのですが、「ng serve --open」しても真っ白な画面に
なります。
解決策をご存知の方いらっしゃいますでしょうか。
タスクをRIAに変更すると、実行できます。
Angular側に「Hello World」と書くと、「ng serve --open」後に表示されるブラウザに表示されます。
入門なのでどこを確認しても良いか分からない状態です。
ここを教えてもらわないと困るという事であれば教えてください。
Magic xpa 4.6.1 PT3
Angular CLI:8.3.29
Node :12.14.1
Angular :8.2.14
-
ISHIJIMA様
コメントありがとうございます。
教材は最初はPETSHOPでした。実行出来なかった(実行時に画面が真っ白)ので、MOSにあるWebclientの動画に挑戦しましたがダメでした。
※同じく画面は真っ白 -
ちなみに、WebアプリケーションのスタートプログラムをAPG(WebClient)にしても表示されない(画面は真っ白)です。
-
出力されたAngularプロジェクト側の \app\magic\magic.gen.lib.
module.tsファイルの中身を 差し支えなければ、コメントに張り付けて頂けませんでしょうか？
-
SiziU様
コメントありがとうございます。
以下になります。
----------------------------------------------------
import {NgModule, NgModuleRef} from '@angular/core';
import {RouterModule} from '@angular/router';
import {ReactiveFormsModule} from '@angular/forms';
import {CommonModule} from "@angular/common";
import {DynamicModule} from 'ng-dynamic-component';
import {InfiniteScrollModule} from 'ngx-infinite-scroll';import {ComponentListMagicService, MagicModule, ExitMagicService} from "@magic-xpa/angular";
import {magicGenComponents, magicGenCmpsHash, title, LazyLoadModulesMap} from './component-list.g';
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";@NgModule({
declarations: [
...magicGenComponents
],
exports: [
...magicGenComponents,
MagicModule
],
imports: [
// Angular Modules
CommonModule,
ReactiveFormsModule,
RouterModule,// Magic Modules
MagicModule,
DynamicModule,
InfiniteScrollModule,// Material Modules
MatTableModule,
MatPaginatorModule,
MatInputModule,
MatButtonModule,
MatListModule,
MatCheckboxModule,
MatTabsModule,
MatDialogModule,
MatSelectModule,
MatSortModule,
MatTooltipModule,
MatCardModule,
MatRadioModule,
MatDatepickerModule,
MatNativeDateModule,
MatFormFieldModule,
MagicAngularMaterialModule
],
providers: [ExitMagicService],
})
export class MagicGenLibModule {
constructor(componentList: ComponentListMagicService, private moduleRef: NgModuleRef<any>) {
componentList.addComponents(magicGenCmpsHash, moduleRef);
componentList.title = title;
componentList.lazyLoadModulesMap = LazyLoadModulesMap;
}
}----------------------------------------------------------------------------------------
-
ISHIJIMA様
セットアップ手順通りにしても動かないです。
＞動作環境の実行モードがＢ＝バックグラウンドになっていますか？
バックグラウンドにしていますが、変わらずです。
-
真っ白な画面で「F１２」を押すとこのようなエラーが表示されます。
-
すいません。
画像大きくならないですね
------------------------------------------------------------------------------------------------------------------------------------
core.js:191 Could not find HammerJS. Certain Angular Material components may not work correctly.
_checkHammerIsAvailable @ core.js:191
core.js:38781 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
magic-xpa-engine.js:52192 Magic Web Client. Version : 4.601.0
magic-xpa-utils.js:6558 08:26:24.5 MagicWeb [ERROR]: in Environment.fillData(): unknown attribute: SpecialReuseTableEditor
WriteToLog @ magic-xpa-utils.js:6558
magic-xpa-utils.js:6558 08:26:24.5 MagicWeb [ERROR]: in Environment.fillData(): unknown attribute: SpecialExpReturnNull
WriteToLog @ magic-xpa-utils.js:6558
MagicShellComponent.html:3 ERROR Error: No component factory found for GettingStarted. Did you add it to @NgModule.entryComponents?
at noComponentFactoryError (:4200/vendor.js:87652)
at CodegenComponentFactoryResolver.resolveComponentFactory (:4200/vendor.js:87717)
at DynamicComponent.createDynamicComponent (:4200/vendor.js:296863)
at DynamicComponent.ngOnChanges (:4200/vendor.js:296853)
at checkAndUpdateDirectiveInline (:4200/vendor.js:92279)
at checkAndUpdateNodeInline (:4200/vendor.js:103617)
at checkAndUpdateNode (:4200/vendor.js:103556)
at debugCheckAndUpdateNode (:4200/vendor.js:104578)
at debugCheckDirectivesFn (:4200/vendor.js:104521)
at Object.eval [as updateDirectives] (ng:///MagicModule/MagicShellComponent.ngfactory.js:19)
View_MagicShellComponent_1 @ MagicShellComponent.html:3
MagicShellComponent.html:3 ERROR CONTEXT DebugContext_------------------------------------------------------------------------------------------------------------------------------------
-
Compiled successfully.
と表示されているので、正常終了していると思っています。
-
\app\magic\magic.gen.lib.
module.tsファイルの中身を拝見いたしました。 このファイルの46行目を以下のように修正してから再度ご確認してみてください。// DynamicModule,DynamicModule.withComponents(magicGenComponents), どうぞ、よろしくお願いします。 -
VSCの画面です
-
SiziU様
教えて頂いた通りに修正したところ、以下のように表示されるようになりました。
ありがとうございました。
後学の為に教えていただきたいのですが、今回の件は何がいけなかったのかご存知でしたら教えていただけますでしょうか。
※インストールの仕方がいけなかったなど
-
ISHIJIMA様
「テクニカル情報のNo.2003881」ですが、記述はされておりました。
※SiziU様の作業前に確認しました。
-
何故なのでしょうね。
私自身も何かしらのインストール時や設定時の不備であるのなら知りたいと思っています。
-
せっかく動いたので、今すぐ再インストールっていうのは気が乗らないので後日試してみようと思います。
ちなみに会社のマジシャンが、「magic.gen.lib.module.ts」を修正後に再インストールして、outputを全削除→Webアプリケーションの作成を行った所、「magic.gen.lib.module.ts」を再修正したとの事でした。
-
再インストール後もダメで、SiziU様のコメントされた変更をしないといけないみたいです。
-
先ほどとは別の弊社マジシャンは4.7.1で試して、私と同じ現象が出たようです。
※同じ対処方法で改善
-
会社のマジシャンから
Angular CLIを8.3.29→9以上にしたら、例の記述がデフォルトで入ったと先ほど聞きました。
ISHIJIMA様はAngular CLIは9以上でしょうか？
9以上であれば、Angular CLIが原因なのかなと思っております。
-
最新にされているって事ですね。
ならAngular CLIの可能性が高そうです。
-
でも、教材の通り8.3.29でインストールして問題なかった方とかも居ると思うので
これだけが原因というのもないのかもしれませんね
-
今回のケースで言えば、皆さん困られていないようだったので本当に大変でした。
バージョン管理は大変そうですよね
あっちを上げたらこっちもあげないとというのが発生しそうです
-
Magicのクラサバだと動かないという経験もほぼ無かった為、今後は意識していきたいと思います。
-
以下の記述が必要になるという事でしょうか。// DynamicModule,DynamicModule.withComponents(magicGenComponents),やはり原因は知りたい所ですね。Angularのバージョンは関係ないのかもしれませんね。
-
今回の記述(DynamicModule...)に関しては以下のpdfの22ページ(pdfファイルでは18ページ)に類似？合致？した内容が書いてありました。
でも、自動で追記されるケースとそうでないケースがあるようなので原因はやっぱり気になります。
-
出力されたコードをよんだところたぶん
フォルダを作った場合のmagic.gen.lib.module.tsなどもたぶん修正対象になりますー。
遅延ロードモジュール新規作成の場合修正点を送付させていただき
ます。 magic.gen.lib.module.ts
Before
DynamicModule,
→
After
DynamicModule.withComponents(magicGenComponents),
あと、なんとなくですが遅延モジュール部分にも？？？なところがありました＾－＾。
app.routes.ts
Before
import { RouterContainerMagicComponent } from "@magic-xpa/angular";
→
After
import { RouterContainerMagicComponent,LoadOnDemandModuleMagicCompone } from "@magic-xpa/angular";nt
Before
component: RouterContainerMagicComponent,
→
After
component: LoadOnDemandModuleMagicComponent, 一応自己責任でｗ -
竹本様
app.routes.tsは以下のようになっていました。
お教えいただいた箇所がないのですが、これはこれで問題はないのでしょうか。
-------------------------------------------------------------------------------------------------
import {Routes, RouterModule} from '@angular/router';
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";export const routes: Routes= [
];
@NgModule({
imports: [CommonModule,RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class MagicRoutingModule { }-------------------------------------------------------------------------------------------------
-
＞フォルダを作った場合のmagic.gen.lib.module.tsなどもたぶん修正対象になりますー。
修正対象なのですね。
webの知識がない為か、セットアップ手順書とかMOSの教材で載ってないと私には全然気付きませんでした。
-
Kokubo さん。
{path: '**',component: RouterContainerMagicComponent,
},などルーティング作ったときにでてくるかもですー。ルーティングや遅延ロードが出てきたときにこのスレッドをおもいだすとよいかもですー。 -
＞ルーティング作ったときにでてくるかもですー。
＞ルーティングや遅延ロードが出てきたときにこのスレッドをおもいだすとよいかもですー。
今、「変数を貼り付けだけの画面」、「APG」でテストをしていたので、今後はMOSの「６章ルーティングの活用」に入っていくので、その時に思い出しながらやってみたいと思います。
-
＞マニュアル通りに作業して生成すればそのまま動くという事が動かないという事が問題だと思っています。
セットアップマニュアルに追加して欲しいですね。
今回かなり困ったので。。。
-
そうなんです。
SiziUさんがいなかったら困ってました。
でも、最後はサポートに問い合わせてたでしょうけど。
サインインしてコメントを残してください。
コメント
39件のコメント