2

我尝试将 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 中有一个测试组件，在测试组件模板中有模板标签。

测试模块.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 { }

测试组件.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 编译后没有错误。所以我不明白。

4

2 回答 2

2

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

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

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

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

@NgModule({
    imports:      [ CommonModule, FormsModule, 
                    TestRoutingModule, NglModule ],
    declarations: [ TestComponent ],
    exports:      [ ],
    providers:    [ ]
})
export class TestModule { }
于 2016-10-19T00:52:06.077 回答
0

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

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

于 2016-10-19T15:19:51.843 回答