Web library létrehozása, Angular 4

Nem tudom, hogy mennyire friss ez az ng-cytoscape.
Most fent van nekem a /usr/local/lib/node_modules mappában cytoscape néven.
Ebben egy angular projekt van. Amiben van src, dist, node_modules… stb.
Próbáltam berakni a package.json fájlba a dependencies alá:

"cytoscape.js": "3.2.2"

és előtte js nélkül is.

"cytoscape": "3.2.2"

A build nem dobott hibát egyikkel sem. Legalábbis amikor futtattam az ng serve --open paranccsal, akkor egyik esetben sem írt ki hibát. De ami még érdekes, hogy akkor sem dob hibát, ha elírom a nevét.

Hogy tetted bele a projektbe?

Még sehogy, mert bármilyen importra hibát dobott.
Most másképp próbálkozok:
az app mappa mellé csináltam egy javascripts mappát. Ezt a .angular-cli.json fájlban bejegyeztem assetsnél és a scripts-hez hozzáadtam a javascripts/cytoscape.min.js fájlt.
Ezután a typings.d.ts fájlban próbálom most importálni :D

declare var cytoscape:any;

Meg ezután importálni akarom:

import * as cytoscape from 'cytoscape';

De még így sem jó :D

Cannot find module 'cytoscape'

hibával elszáll.

Ahhoz, hogy belekerüljön a projektbe, a projekt root folderében kell kiadni az

npm install --save cytoscape

parancsot.

Itt talaltam egy cytoscape typings repot:

Ezt nem értem, hiszen ezzel kezdtem. Bár így utólag belegondolva volt egy hiba amikor rákerestem, hogy milyen package van telepítve a projekthez (npm list). Ekkor találtam egy leírást, hogy először szedjem le a korábbi verziót és a globálhoz adjam hozzá. Ezután már nem dobott hibát, az npm list -g, viszont már nem működött az import.
Most ott tartok, hogy nem dob hibát az importra.
Ez a cy.service.ts fájlom:

import { Injectable }	from '@angular/core';
import * as cytoscape from 'cytoscape';

@Injectable()
export class Cy {
	private cy;
	ngOnInit(): void {
		this.cy = cytoscape({
			container: document.getElementById('cy'),
			...
		});
	}
}

Ez importálva van az app.component.ts fájlba:

import { Component } from '@angular/core';
import { Cy } from '../../services/cy.service';

@Component({
	selector: 'app-root',
	template: `
		<h1>
			Welcome to {{title}}!!
		</h1>
		<router-outlet></router-outlet>
	`,
	styles: []
})

export class AppComponent {
	title = 'app';
	constructor(private cy: Cy ) {}
}

És még nem dob hibát :smiley:
Köszi, már ez is jó, hogy így eljutottam idáig!

szerk: vagyis a fordító nem dob hibát, a weboldal még igen :smiley:

A global cuccokat nem tudja behuzni az app, a sajat root foldereben talalhato node_modules mappat hasznalja.

Igen, van még mit tanulni.

Amúgy a hiba oka is megvan, be kellett raknom az app.modules.ts fájl providersbe a Cy modult. Így már lefordult az oldal.

Igen, ezt utolag irtam bele a peldaba, bocsanat.

1 kedvelés

Már csak egy kérdésem van.
Ennek a cytoscapenek akkor kell betöltődnie, miután már betöltődött a html oldal.
Tehát most

export class Cy implements OnInit

és

ngOnInit(): void {
	// init
	this.cy = cytoscape({
		container: document.getElementById('cy'),

Itt a document.getElementById alapján veszi, hogy “hova kell dolgoznia”.
A cy div elem az létezik, mert a styles.css-ben megadtam, hogy legyen piros a háttere meg fix szélességet, magasságot állítottam be. Szóval meg is jelenik pirosan, de valószínűleg hamarabb töltődik be a service, mint az oldal és emiatt nem jó a “binding” vagy mi a fene :D.

Az app.component-be raknék OnInit-et, a Cy-be meg egy sima functiont, mondjuk runInit néven, ami megcsinálja azt, amit most az OnInitben csinálsz. Az app component ngOnInitjeben meg hivnék egy this.Cy.runInit() callt.

app.component:

constructor(private cy: Cy) {}

ngOnInit(){
  this.cy.runInit()
}

Ez feltételezi, hogy a cy dived az app component template-jében van.

Köszönöm, működik!

1 kedvelés

https://angular.io/guide/lifecycle-hooks#afterview

Igazabol neked az ngAfterViewInit kellene, azt hiszem.

ngAfterViewInit()
Respond after Angular initializes the component’s views and child views.
Called once after the first ngAfterContentChecked().
A component-only hook.

Szuper!!!

Akkor megyek aludni, jo ejt! :)

Igazából ez egy egyszerű app lesz.
A főablakon kívül talán még egy vagy max két oldal lesz, ahol már amúgy sem kell a cytoscape.
Még azért ezt a lifecycle-t át kellene néznem rendesen, bár innen már nem lesz gond!
Nagyon szépen köszönöm a segítséget és neked is jó éjt!

1 kedvelés

Megint elakadtam egy egyszerű dologban. Van egy Page osztályom, ami egyszerű:

import { Condition } from './condition';

export class Page {
	public id: number;
	public title: string;
	public conditions: [Condition];
	public node: any;
}

Van a service, amiben egy arrayba menteném el a több oldal adatait:

private pages: [Page];

És hiába próbálok meg hozzáadni egy új page elemet

var page = new Page();
...
this.pages.push(page);

kiírja:

undefined is not an object (evaluating 'this.pages.push')

Itt valamiért olyan érzésem van, hogy maga az array nincs inicializálva. Megnéztem a példakódot, amit megcsináltam a minap és ott sem látom inicializálást sehol sem.
Mi lehet a baj?

Most nézem, hogy a példakódban mégis csak inicializálva van, csak egy másik service-ben történik az inicializálás (pontosabban az alap elemeket a másik serviceből kapja).

Ok, látom már a hibát. Ez van amikor hozzászoktam a Swift szintaktikához…

 private pages: Page[];
 public conditions: Condition[];

Igen, közben ez leesett :)