ng-lightning with angular2 + systemjs и NgModule

Я попытался использовать ng-lightning (0.24.0) с angular2 (2.0.2) и загрузчиком модуля systemjs. Загрузка пучка в порядке, я думаю, но когда я пытаюсь вызвать шаблон ng-lightning в ngModule, у меня есть ошибка анализа шаблона. Из одного компонента это рабочая область, но внутри ngModule нет.ng-lightning with angular2 + systemjs и NgModule

Мой 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 построен с учетом модульности: это означает, что каждый модуль должен объявлять или импортировать каждый компонент, директиву и трубу, которые он хочет использовать.

Чтобы анализатор распознал компонент, он должен был объявлен в текущем модуле или экспортирован другим модулем, который импортирует текущий модуль. Вот почему, например, вам пришлось импортировать FormsModule в оба ваших модуля в OP.

Таким образом, вы получаете разбор ошибок при попытке использовать ngl-badge в TestComponent, потому что вы не сказали Angular, что вы собираетесь использовать ngl-badge при создании TestModule

В принципе, просто импортировать то, что вам нужно в TestModule

@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(). Так может быть, это ошибка в ng-молнии? – Dragi

Это была моя ошибка. Он работает отлично. Спасибо за помощь. – Dragi

@Dragi проблем нет. Какой из них работал? 'NglModule.forChild()' или 'NglModule'?Я хочу убедиться, что ответ имеет правильный импорт. – BeetleJuice

Ваша ошибка говорит о my-app, что не является известным угловым компонентом. Вы уверены, что вы загрузите правильный компонент в свои тесты и что он принадлежит в объявлениях одного из ваших модулей?

Кроме того, я вижу, что селектор вашего TestComponent равен testcomp, может быть, это компонент, который вы хотите использовать.

источник

2016-10-19 15:19:51 bekos

Я уверен, потому что, когда я использую только простые теги html, мое приложение работает нормально. Эта ошибка возникает при написании тега в шаблоне. Так что ошибка неверна, я думаю. – Dragi

Еще один, я использую маршрутизацию angleular2, поэтому модуль маршрутизации загружает TestComponent, и он отлично работает, пока я не использую теги . – Dragi

ng-lightning with angular2 + systemjs и NgModule

ответ

Смежные вопросы