ng-lightning 与 angular2+systemjs 和 NgModule

Question

我尝试将 ng-lightning (0.24.0) 与 angular2 (2.0.2) 和 systemjs 模块加载器一起使用。我认为捆绑加载没问题，但是当我尝试在 ngModule 中调用 ng-lightning 模板时，我遇到了模板解析错误。从单个组件它是 workink 但在 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 中有一个测试组件，在测试组件模板中有模板标签。

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">
"): TestComponent@21:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:

是主要的应用程序组件模板。当我从我的测试组件模板中删除标签时，该应用程序运行正常。问题是什么？ ng-lightning.umd.js 正确加载，正如我在网络选项卡中看到的那样，并且在 tsc 编译后没有错误。所以没看懂。

Answer 1

Angular 构建时考虑了模块化：这意味着每个模块都应该声明或导入它要使用的每个组件、指令和管道。

要让解析器识别组件，它必须已在当前模块中声明，或由当前模块导入的另一个模块导出。这就是为什么——例如——你必须在 OP 的两个模块中导入 FormsModule。

因此当您尝试在 TestComponent 中使用 ngl-badge 时会出现解析错误，因为您在创建时没有告诉 Angular 您打算使用 ngl-badge TestModule

基本上，只需将您需要的内容导入 TestModule

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

Answer 2

您的错误是在谈论 my-app，那不是已知的 Angular 组件。您确定 bootstrap 测试中的组件正确并且它属于您的模块之一的声明吗？

另外，我看到你的 TestComponent 的选择器是 testcomp，也许这就是你要使用的组件。

ng-lightning 与 angular2+systemjs 和 NgModule

ng-lightning with angular2+systemjs and NgModule

angular

ng-lightning