I have developed an Angular library, named 'mylib', where I have utilized only the mylib.component.ts file. The HTML element codes are included inside the template variable of this file, along with the functions responsible for modifying these elements. After successfully building and publishing the library to npm, I encountered a problem while trying to install and use it in a new project. The error message stated that the functions were not recognized. What could be the issue here? I need guidance on how to access functions declared within the component.ts file of an Angular library. And if direct access is not possible, what steps should be taken to utilize these functions after installing the library in another project?
mylib.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'srr-mylib',
template: `
<h1> Random Text </h1>
`,
styles: [
]
})
export class ElapsedtimerComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
startTrans(){
//some code here
}
}
mylib.module.ts
import { NgModule } from '@angular/core';
import { MylibComponent } from './mylib.component';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
declarations: [MylibComponent],
imports: [
CommonModule,
BrowserModule
],
exports: [MylibComponent]
})
export class MylibModule { }
public.api.ts
/*
* Public API Surface of mylib
*/
export * from './lib/mylib.service';
export * from './lib/mylib.component';
export * from './lib/mylib.module';
This is how I attempted to use the above library in a new project:
app.component.html
<srr-mylib></srr-mylib>
app.component.ts
import { Component } from '@angular/core';
import { MylibModule } from '@somename/mylib'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(
private libz:MylibModule
) {
libz.startTrans() //<----- This does not work. It gives the error "Property 'startTrans' does not exist on type 'MylibModule'.ts(2339)"
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MylibModule } from '@somename/mylib'
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MylibModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }