質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

0回答

249閲覧

Laravel 5.4 with Angular4について

MoreZou

総合スコア12

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2019/02/11 10:33

前提

現在、勉強のためにLaravel 5.4 with Angular4で客室管理システムを作っております。

work要素にworkcomponentファイルのテンプレートを適用したいが別のコンポーネントファイル(app.component.ts)が読み込まれてエラーが発生します。
色々調べたりしましたが、解決方法がわからないです

###実現したいこと
work要素にwork.component.tsのテンプレートを適用したい。

該当のソースコード

#####ファイル名:clean_work_app.blade.php (laravelのルーティング/WorkAppで表示させる)

<html> <head> <base href="/CreanWorkApp"> <title>管理画面</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"> </head> <body> <work></work><!**--ここの部分です--**> <script type="text/javascript" src="http://localhost:8000/js/app.js"></script> </body> </html>

#####ファイル名:work.component.ts (book要素にtemplateを表示させる)
import{ Component }from '@angular/core';

@Component({
selector:'work',
template:require('./work.component.html'),
styles: [${require('./work.component.scss')}]
})
export class WorkComponent{ }

#####**ファイル名:work.component.html(templateから読み込むhtml)

<h1>これを表示したい</h1>

#####**ファイル名:app.modules.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LoginComponent }from './login/login.component';
import { WorkComponent } from './work.component';
@NgModule({
imports: [
BrowserModule
],
declarations: [
AppComponent,
LoginComponent,
WorkComponent
],
bootstrap: [ AppComponent]
})
export class AppModule { }

####エラーコード

AppComponent_Host.html:1 ERROR Error: The selector "my-app" did not match any elements
at DefaultDomRenderer2.selectRootElement (app.js:20850)
at DebugRenderer2.selectRootElement (app.js:15249)
at createElement (app.js:10795)
at createViewNodes (app.js:13760)
at createRootView (app.js:13689)
at callWithDebugContext (app.js:15074)
at Object.debugCreateRootView [as createRootView] (app.js:14378)
at ComponentFactory_.create (app.js:11468)
at ComponentFactoryBoundToModule.create (app.js:4940)
at ApplicationRef_.bootstrap (app.js:6375)
at app.js:6153
at Array.forEach (<anonymous>)
at PlatformRef_.moduleDoBootstrap (app.js:6153)
at app.js:6115
at ZoneDelegate.invoke (app.js:89274)
at Object.onInvoke (app.js:5497)
at ZoneDelegate.invoke (app.js:89273)
at Zone.run (app.js:89033)
at app.js:89772
at ZoneDelegate.invokeTask (app.js:89306)
at Object.onInvokeTask (app.js:5488)
at ZoneDelegate.invokeTask (app.js:89305)
at Zone.runTask (app.js:89078)
at drainMicroTaskQueue (app.js:89484)
View_AppComponent_Host_0 @ AppComponent_Host.html:1
proxyClass @ app.js:49992
DebugContext
.logError @ app.js:15014
ErrorHandler.handleError @ app.js:2687
(anonymous) @ app.js:6016
ZoneDelegate.invoke @ app.js:89274
Zone.run @ app.js:89033
NgZone.runOutsideAngular @ app.js:5451
(anonymous) @ app.js:6016
ZoneDelegate.invoke @ app.js:89274
onInvoke @ app.js:5497
ZoneDelegate.invoke @ app.js:89273
Zone.run @ app.js:89033
(anonymous) @ app.js:89772
ZoneDelegate.invokeTask @ app.js:89306
onInvokeTask @ app.js:5488
ZoneDelegate.invokeTask @ app.js:89305
Zone.runTask @ app.js:89078
drainMicroTaskQueue @ app.js:89484
Promise.then (async)
scheduleMicroTask @ app.js:89467
ZoneDelegate.scheduleTask @ app.js:89296
Zone.scheduleTask @ app.js:89121
Zone.scheduleMicroTask @ app.js:89141
scheduleResolveOrReject @ app.js:89762
ZoneAwarePromise.then @ app.js:89895
PlatformRef_.bootstrapModuleWithZone @ app.js:6144
PlatformRef
.bootstrapModule @ app.js:6129
(anonymous) @ app.js:34740
webpack_require @ app.js:20
(anonymous) @ app.js:92239
webpack_require @ app.js:20
(anonymous) @ app.js:66
(anonymous) @ app.js:69
13:15:19.186 AppComponent_Host.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}
View_AppComponent_Host_0 @ AppComponent_Host.html:1
proxyClass @ app.js:49992
DebugContext_.logError @ app.js:15014
ErrorHandler.handleError @ app.js:2692
(anonymous) @ app.js:6016
ZoneDelegate.invoke @ app.js:89274
Zone.run @ app.js:89033
NgZone.runOutsideAngular @ app.js:5451
(anonymous) @ app.js:6016
ZoneDelegate.invoke @ app.js:89274
onInvoke @ app.js:5497
ZoneDelegate.invoke @ app.js:89273
Zone.run @ app.js:89033
(anonymous) @ app.js:89772
ZoneDelegate.invokeTask @ app.js:89306
onInvokeTask @ app.js:5488
ZoneDelegate.invokeTask @ app.js:89305
Zone.runTask @ app.js:89078
drainMicroTaskQueue @ app.js:89484
Promise.then (async)
scheduleMicroTask @ app.js:89467
ZoneDelegate.scheduleTask @ app.js:89296
Zone.scheduleTask @ app.js:89121
Zone.scheduleMicroTask @ app.js:89141
scheduleResolveOrReject @ app.js:89762
ZoneAwarePromise.then @ app.js:89895
PlatformRef_.bootstrapModuleWithZone @ app.js:6144
PlatformRef
.bootstrapModule @ app.js:6129
(anonymous) @ app.js:34740
webpack_require @ app.js:20
(anonymous) @ app.js:92239
webpack_require @ app.js:20
(anonymous) @ app.js:66
(anonymous) @ app.js:69
13:15:19.188 app.js:89565 Unhandled Promise rejection: The selector "my-app" did not match any elements ; Zone: <root> ; Task: Promise.then ; Value: Error: The selector "my-app" did not match any elements
at DefaultDomRenderer2.selectRootElement (app.js:20850)
at DebugRenderer2.selectRootElement (app.js:15249)
at createElement (app.js:10795)
at createViewNodes (app.js:13760)
at createRootView (app.js:13689)
at callWithDebugContext (app.js:15074)
at Object.debugCreateRootView [as createRootView] (app.js:14378)
at ComponentFactory_.create (app.js:11468)
at ComponentFactoryBoundToModule.create (app.js:4940)
at ApplicationRef_.bootstrap (app.js:6375)
at app.js:6153
at Array.forEach (<anonymous>)
at PlatformRef_.moduleDoBootstrap (app.js:6153)
at app.js:6115
at ZoneDelegate.invoke (app.js:89274)
at Object.onInvoke (app.js:5497)
at ZoneDelegate.invoke (app.js:89273)
at Zone.run (app.js:89033)
at app.js:89772
at ZoneDelegate.invokeTask (app.js:89306)
at Object.onInvokeTask (app.js:5488)
at ZoneDelegate.invokeTask (app.js:89305)
at Zone.runTask (app.js:89078)
at drainMicroTaskQueue (app.js:89484) Error: The selector "my-app" did not match any elements
at DefaultDomRenderer2.selectRootElement (http://localhost:8000/js/app.js:20850:19)
at DebugRenderer2.selectRootElement (http://localhost:8000/js/app.js:15249:49)
at createElement (http://localhost:8000/js/app.js:10795:23)
at createViewNodes (http://localhost:8000/js/app.js:13760:44)
at createRootView (http://localhost:8000/js/app.js:13689:5)
at callWithDebugContext (http://localhost:8000/js/app.js:15074:42)
at Object.debugCreateRootView [as createRootView] (http://localhost:8000/js/app.js:14378:12)
at ComponentFactory
.create (http://localhost:8000/js/app.js:11468:46)
at ComponentFactoryBoundToModule.create (http://localhost:8000/js/app.js:4940:29)
at ApplicationRef_.bootstrap (http://localhost:8000/js/app.js:6375:57)
at http://localhost:8000/js/app.js:6153:81
at Array.forEach (<anonymous>)
at PlatformRef_._moduleDoBootstrap (http://localhost:8000/js/app.js:6153:44)
at http://localhost:8000/js/app.js:6115:27
at ZoneDelegate.invoke (http://localhost:8000/js/app.js:89274:26)
at Object.onInvoke (http://localhost:8000/js/app.js:5497:33)
at ZoneDelegate.invoke (http://localhost:8000/js/app.js:89273:52)
at Zone.run (http://localhost:8000/js/app.js:89033:43)
at http://localhost:8000/js/app.js:89772:34
at ZoneDelegate.invokeTask (http://localhost:8000/js/app.js:89306:31)
at Object.onInvokeTask (http://localhost:8000/js/app.js:5488:33)
at ZoneDelegate.invokeTask (http://localhost:8000/js/app.js:89305:60)
at Zone.runTask (http://localhost:8000/js/app.js:89078:47)
at drainMicroTaskQueue (http://localhost:8000/js/app.js:89484:35)

気づいたこと

<script type="text/javascript" src="http://localhost:8000/js/app.js"></script>で毎回app.component.tsが読み込まれる

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問