前提
現在、勉強のために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が読み込まれるあなたの回答
tips
プレビュー