ng-packagr | 易学教程

Pack/Import a local developed module into a project

阅读更多关于 Pack/Import a local developed module into a project

问题 I am trying to import a locally developed Angular project/module into an angular application without publishing it into npm repository. First, I followed this tutorial to build my module in UMD format (I skipped the publish part): https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464 Then, I tried to install my module in the final application by executing this command line: npm install ../path-to-my-module --save This added successfully my module as @myscope

Packaging an Angular library with i18n support

阅读更多关于 Packaging an Angular library with i18n support

问题 Angular's i18n is great, and tools like ng-packagr makes component library packaging extremely easy, but can they be combined? What if i want to package and distribute a component library having translatable components? Is it possible? How do I package such a library? Will translation files be shipped together with the package, or should they be defined in the main app? It'd be great if someone could point me at some doc. Thanks 回答1: When you generate a translation file for the main app with

Packaging an Angular library with i18n support

阅读更多关于 Packaging an Angular library with i18n support

angular-cli library create secondary entry point

阅读更多关于 angular-cli library create secondary entry point

问题 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

Setting angular package development setup

阅读更多关于 Setting angular package development setup

问题 I've an angular UI component project and another angular app which is consuming it. So every time if anything is changing on that package I need to do npm uninstall --save @my-lib/package-one and npm install --save @my-lib/package-one Which is too time-consuming. I have tried npm link but it's not working. Is there any other way in which I can achive this setup? Using ng-packagr for packaging and angular version 5. EDIT 1 Also tried to use the approach explained in this video, but

Disable TypeScript mismatch in ng-packagr

阅读更多关于 Disable TypeScript mismatch in ng-packagr

问题 In an Angular CLI project, when using an unsupported version of TypeScript you may get the following warning: @angular/compiler-cli@6.1.0 requires typescript@'>=X.X.X <Y.Y.Y' but Z.Z.Z was found instead. Using this version can result in undefined behaviour and difficult to debug problems. It is possible to disable the TypeScript mismatch warning for the default project with the following command: ng config cli.warnings.typescriptMismatch false Now, when building an Angular library, ng-packagr

Angular error while building because external library - Unexpected value “BannerModule…”

阅读更多关于 Angular error while building because external library - Unexpected value “BannerModule…”

问题 I created a library in order to share some components between two different projects, using ng-packagr module. The structure of the lib is In my library The src/package.json : { "name": "my-ng-library", "version": "0.0.0", "license": "MIT", "ngPackage": { "$schema": "./node_modules/ng-packagr/ng-package.schema.json", "lib": { "entryFile": "index.ts" }, "dest": "../dist" }, "private": false, "dependencies": {}, "peerDependencies": { "@angular/platform-browser": "^5.2.0", "@angular/platform

Configuration 'production' could not be found in project 'my-lib'

阅读更多关于 Configuration 'production' could not be found in project 'my-lib'

问题 I am building a library with Angular 6.1.0 ng new lib-demo ng generate library my-lib All the articles advise running the build for the library with a --prod flag like so: ng build my-lib --prod However, this throws an error Configuration 'production' could not be found in project 'my-lib'. Which is probably correct because when I look at the angular.json there is no definition for a production build configuration in the library project. It is present for the application project only. the

Include assets when building library using ng-packagr

阅读更多关于 Include assets when building library using ng-packagr

Could anyone give a hint where to start to include images and css files into Angular library using ng-packagr? There's an official issue for that question here . It's actually quite simple to include images and the like to your library: You can just copy them to the dist folder manually after ng-packagr has done its thing. However, it's more difficult to automate the extraction of those files in projects that'll use your library. In the issue referenced above BenjaminDobler suggests to add the following mapping to the .angular-cli.json file of any consumer project: { "glob": "**/*", "input": "

How do you debug an Angular 6 library

阅读更多关于 How do you debug an Angular 6 library

问题 I'm writing an Angular 6 Library and cannot figure out how to step into the typescript. I generated the app using: ng new mylibapp I then added the library using: ng g library @abc/cool-lib -p abc when I perform: ng build @abc/cool-lib it generates the code in the mylibapp/dist/abc/cool-lib folder How can I now debug this code and set breakpoints in the ts file located at mylibapp/projects/abc/cool-lib/src/lib 回答1: Looking at the Angular CLI docs on libraries, it mentions the following: Some