ng-lightning с angular2 systemjs и NgModule

ProgramBox

ng-lightning с angular2 systemjs и NgModule

Post author:admin
Запись опубликована:25 марта, 2023
Post category:Вопросы по программированию

#angular #ng-lightning

Вопрос:

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

Мой пакет.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 есть тестовый компонент, а в шаблоне тестового компонента есть тег template.

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. Так что я не понимаю.

Ответ №1:

Angular построен с учетом модульности: это означает, что каждый модуль должен объявлять или импортировать каждый компонент, директиву и канал, который он хочет использовать.

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

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

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

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

1. Спасибо. Я попробовал это с помощью простого NglModule и не сработало, но я думаю, вы правы. К сожалению, в ng-lightning нет NglModule.forChild().forChild(). Так что, может быть, это ошибка в ng-lightning?

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

3. NglModule — это правильная форма, как написано в документе ngl 🙂

4. @Dragi спасибо, я обновил ответ. для использования NglModule

Ответ №2:

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

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

1. Я уверен, потому что, когда я использую только простые html-теги, мое приложение работает нормально. Эта ошибка возникает, когда я пишу тег <ngl-…> в шаблоне. Так что ошибка, я думаю, неправильная.

2. Еще один, я использую маршрутизацию angular2, поэтому модуль route загружает TestComponent, и он работает нормально, пока я не использую теги <ngl-…>.