angular2 + systemjsとNgModuleでng-lightning

angular2（2.0.2）とsystemjsモジュールローダーでng-lightning（0.24.0）を使用しようとしました。バンドルのロードは大丈夫ですが、ngModuleでng-lightningテンプレートを呼び出そうとすると、テンプレートの解析エラーが発生します。単一のコンポーネントからはworkinkですが、ngModuleの内部では動作しません。angular2 + systemjsとNgModuleでng-lightning

マイpackage.json

"dependencies": { 
"@angular/common": "~2.0.2", 
"@angular/compiler": "~2.0.2", 
"@angular/core": "~2.0.2", 
"@angular/http": "~2.0.2", 
"@angular/forms": "~2.0.2", 
"@angular/platform-browser": "~2.0.2", 
"@angular/platform-browser-dynamic": "~2.0.2", 
"@angular/router": "~3.0.2", 
"@angular/upgrade": "~2.0.2", 
"reflect-metadata": "^0.1.8", 
"rxjs": "5.0.0-beta.12", 
"systemjs": "0.19.39", 
"zone.js": "^0.6.25", 
"core-js": "^2.4.1", 
"@salesforce-ux/design-system": "^2.1.2", 
"ng-lightning": "0.24.0", 
"tether": "^1.2.4", 
},

app.module.ts

import { NgModule }   from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule }  from '@angular/forms'; 
import { HttpModule, JsonpModule } from '@angular/http'; 
import { NglModule }  from 'ng-lightning/ng-lightning' 

import { AppRoutingModule } from './app.routing'; 
import { AppComponent }  from './app.component'; 
import { TestModule }  from './test/test.module'; 

@NgModule({ 
    imports:  [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     JsonpModule, 
     NglModule.forRoot(), 
     TestModule, 
     AppRoutingModule 
    ], 
    declarations: [ 
     AppComponent, 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { }

そしてTestModuleであっテストコンポーネントであり、テストコンポーネントテンプレートにテンプレートタグをtheresの。

test.module.ts

import { NgModule }   from '@angular/core'; 
import { CommonModule }  from '@angular/common'; 
import { FormsModule }  from '@angular/forms'; 
import { TestComponent }  from './test.component'; 
import { TestRoutingModule } from './test.routing'; 

@NgModule({ 
    imports:  [ CommonModule, FormsModule, TestRoutingModule ], 
    declarations: [ TestComponent ], 
    exports:  [ ], 
    providers: [ ] 
}) 
export class TestModule { }

test.component.ts

import { Component } from '@angular/core'; 
@Component({ 
    moduleId: module.id, 
    selector: 'testcomp', 
    template: '<ngl-badge></ngl-badge>' 
}) 
export class TestComponent {}

私はこのエラーを持っている：

zone.js:355 Unhandled Promise rejection: Template parse errors: 
'my-app' is not a known element: 
1. If 'my-app' is an Angular component, then verify that it is part of this module. 
2. If 'my-app' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" 
<body> 
<div class="slds"> 
    [ERROR ->]<my-app> 
     <div class="slds-grid slds-grid--align-center"> 
      <div class="slds-col"> 
"): [email protected]:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:

は、メインのアプリコンポーネントテンプレートです。テストコンポーネントテンプレートからタグを削除すると、アプリはうまく動作します。何が問題ですか？ ng-lightning.umd.jsがネットワークタブに表示されているとおりに正しく読み込まれ、tscコンパイル後にエラーは発生しません。だから私は理解していない。

出典

2016-10-18 Dragi

'template： '''タグを設定して削除しても問題ありませんか？ – Searching

いいえ、タグをテンプレートに使用しない場合は、他のhtmlタグのみを使用します。 – Dragi

Angularは、モジュール性を念頭に置いて構築されています。つまり、各モジュールは、使用するすべてのコンポーネント、ディレクティブおよびパイプを宣言またはインポートする必要があります。成分を認識するパーサーの

は、は現在のモジュールで宣言され、又はその現在のモジュールインポート別のモジュールによってエクスポートされていなければなりません。このため、たとえば、OP内の両方のモジュールにFormsModuleをインポートする必要がありました。したがって

あなたは基本的には、ちょうどあなたがTestModule

に必要なものをインポート TestModule

を作成したときに、あなたがAngularに語っていないので、あなたがngl-badgeを使用することTestComponentでngl-badgeを使用しようとすると、エラーを解析します

@NgModule({ 
    imports:  [ CommonModule, FormsModule, 
        TestRoutingModule, NglModule ], 
    declarations: [ TestComponent ], 
    exports:  [ ], 
    providers: [ ] 
}) 
export class TestModule { }

出典

2016-10-19 00:52:06 BeetleJuice

ありがとうございます。私は単純なNglModuleでそれを試しても動作しませんでしたが、あなたは正しいと思います。残念ながら、ng-lightningではNglModule.forChild（）はありません。だから多分稲妻の間違いでしょうか？ – Dragi

それは私のせいだった。完璧に動作します。助けてくれてありがとう。 – Dragi

@Dragi問題ありません。どちらが働いたのですか？ 'NglModule.forChild（）'または 'NglModule'？私は答えが正しいインポートを持っていることを確認したい – BeetleJuice

あなたのエラーはmy-appです。これは既知の角度成分ではありません。テストで正しいコンポーネントをブートストラップし、モジュールの1つの宣言に含まれていることを確認してください。

また、TestComponentのセレクタがtestcompであることがわかります。使用したいコンポーネントになっている可能性があります。

出典

2016-10-19 15:19:51 bekos

私は確信しています。なぜなら、単純なhtmlタグだけを使用すると、私のアプリはうまく動作するからです。テンプレートにタグを書き込むと、このエラーが発生します。だから、エラーは正しいとは思いません。 – Dragi

さらに、私はangle2ルーティングを使用するので、ルートモジュールはTestComponentをブートストラップし、タグを使用するまでうまく動作します。 – Dragi

angular2 + systemjsとNgModuleでng-lightning

答えて

関連する問題