Hilfe bei der Programmierung, Antworten auf Fragen / Eckig / ng-blitz mit angular2 + systemjs und NgModule - angular, ng-blitz

ng-blitz mit angular2 + systemjs und NgModule - angular, ng-blitz

Ich habe versucht, ng-blitz (0.24.0) mit angular2 (2.0.2) und systemjs modul loader. Das Laden des Bundles ist in Ordnung, aber wenn ich versuche, eine ng-blitz-Vorlage in einem ngModule aufzurufen, habe ich einen Template-Parse-Fehler. Von einer einzelnen Komponente ist es workink, aber in einem ngModule nicht.

Mein Paket.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 { }

Und in TestModule gibt es eine Testkomponente und in der Testkomponentenvorlage das Template-Tag.

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 {}

Ich habe diesen Fehler:

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:

ist die Hauptkomponente der App-Vorlage. Wenn ich das Tag aus meiner Testkomponentenvorlage lösche, funktioniert die App einwandfrei. Was ist das Problem? ng-lightning.umd.js wurde korrekt geladen, wie ich auf der Registerkarte Netzwerk sehe und kein Fehler nach TSC-Kompilierung. Also verstehe ich nicht.

Antworten:

1 für die Antwort № 1

Angular ist im Hinblick auf Modularität konzipiert: Das bedeutet, dass jedes Modul jede Komponente, Richtlinie und Pipe deklarieren oder importieren soll, die es verwenden möchte.

Damit der Parser eine Komponente erkennt, Muss wurden im aktuellen Modul deklariert oder von einem anderen Modul exportiert, das das aktuelle Modul importiert. Deshalb mussten Sie zum Beispiel importieren FormsModule in beiden Modulen im OP.

Daher erhalten Sie Parsing-Fehler, wenn Sie versuchen zu verwenden ngl-badge im TestComponent weil du es nicht gesagt hast Angular das du verwenden willst ngl-badge wenn du erstellt hast TestModule

Im Grunde importieren Sie einfach, was Sie brauchen TestModule

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

0 für die Antwort № 2

Dein Fehler spricht darüber my-app, das ist keine bekannte eckige Komponente. Sind Sie sicher, dass Sie die richtige Komponente in Ihren Tests bootstrappen und dass sie zu den Deklarationen eines Ihrer Module gehört?

Auch ich sehe, dass der Selektor Ihres TestComponent ist testcompVielleicht ist dies die Komponente, die Sie verwenden möchten.

ng-blitz mit angular2 + systemjs und NgModule - angular, ng-blitz

Antworten:

Verwandte Fragen