angular-library

问题 Suppose there exists a Javascript library written in plain Javascript and commonly used on vanilla, non-frameworked websites. How does one go about creating an Angular library that can easily be npm install ed that would make the library seamless to use in an Angular app? I cannot find any good demonstrations of this process in the Angular docs or on the wider web. Just for instance, there is a fantastic Javascript library called p5.js , which is not straightforward to use with Angular. How

问题 I'm developing an Angular lib (GitHub repo link), there are lib module sources placed at ./src test App sources placed at ./app lib distributive at ./dist The build process uses rollup.js and is based on angular-library-starter. I also have a process that generates npm package from ./dist and installs it to ./node_modules . The issue is that the App works fine with the lib module imported from ./src and does not work when I imported it from ./dist or ./node_modules : // ./app/app/app.module

问题 In latest versions of Angular cli, we can use ng g library lib-name command to create library. As mentioned in the Angular docs : ng serve <project> And: <project> The name of the project to build. Can be an app or a library. So, we can serve library . But when I serve I get the following errors: Project 'ngx-tab-component' does not support the 'serve' target. Error: Project 'ngx-tab-component' does not support the 'serve' target. at ServeCommand.initialize (C:\Users\vahidnajafi\angular\ngx

问题 I was trying to add global styles in the same way like in angular app, but it totally does not work. My libraries' name is example-lib , so I added styles.css to /projects/example-lib/ . I added styles in main angular.json file: ... "example-lib": { "root": "projects/example-lib", "sourceRoot": "projects/example-lib/src", "projectType": "library", "prefix": "ngx", "architect": { "build": { "builder": "@angular-devkit/build-ng-packagr:build", "options": { "tsConfig": "projects/example-lib

问题 I am trying to convert an Angular 6 application in a reusable library; here is what I did: created a new Angular workspace created a new Angular library project inside that workspace copied the artifacts from the old application inside the library and adjusted the import statements When I try to compile the project with "ng build --project=.." I get a lot of these errors: "Property X is private and only accessible within class Y" I understand the errors and I will correct them but my question

问题 I am using Angular library and have the following folder structure: coollibrary - components - my.component.ts - services - my.service.ts public_api.ts In public_api, I export the component and service and make the library build. After that I can import the necessary things in my project using import { MyComponent } from 'coollibrary'; but I can not use the following path: import { MyComponent } from 'coollibrary/components' Can I somehow achieve this behavior? I generate library with

问题 I am trying to create what I believe is called a secondary entry point into my angular npm package. I want the following two entry points @scope/data-service @scope/data-service/models Using the angular-cli to generate the base package generates the following structure scope └───data-service │ karma.conf.js │ ng-package.json │ ng-package.prod.json │ package.json │ tsconfig.lib.json │ tsconfig.spec.json │ tslint.json │ └───src │ public_api.ts │ test.ts │ └───lib data-service.component.spec.ts

问题 The problem is that I'm calling a function inside forRoot method like this: app.module.ts import {environment} from '../environments/environment'; ... @NgModule({ imports: [ BrowserModule, MyModule.forRoot({ config: { sentryURL: environment.SENTRY_URL <-- This, calls the function } }), HttpClientModule, ... ]}) environemnt.ts export function loadJSON(filePath) { const json = loadTextFileAjaxSync(filePath, 'application/json'); return JSON.parse(json); } export function loadTextFileAjaxSync

问题 I have a component <p style="padding: 5px"> <select [(ngModel)]='thisDD' name="nameDD" id="idDD" (ngModelChange)="updateDD(thisDD)" class="form-control"> <option *ngFor="let thing of thingies" [value]="thing.thingID">{{thing.ThingName}} ({{thing.ThingCode}})</option> </select> </p> Which has an @OutPut @Output() selectedValue = new EventEmitter<object>(); And I use this in my app <my-dropdown (selectedValue)="setValue($event)"></my-dropdown> Which calls code in the component to "setValue"

问题 Angular 7 library html-template changes are not affected into Angular application when they are running concurrently in different cmd using "ng build library --watch" and "ng serve application". So I first start library with watch flag on, then I start application with ng serve. Changes in library into ts files will start HMR on application and changes are affected correctly. But when I change some components html or css files HMR will detect change and start to update application but changes