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。

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

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

即可

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

Answer 2

您的错误在于my-app，这不是已知的Angular组件。您确定在测试中引导正确的组件并且它属于您的某个模块的声明吗？

另外，我发现TestComponent的选择器是testcomp，也许这是您要使用的组件。

带有angular2 + systemjs和NgModule的ng-lightning

2 个答案: