ng-refs

Practice better dependency injection of browser APIs within your Angular codebase!

Are we missing a browser API that your project uses?.. suggestions and contributions are welcomed!

Type of use	Code Example
❌ Direct-use
✅ Via reference

Similar to Angular's own DOCUMENT token, the ng-refs package includes some other commonly used browser APIs wrapped up as Angular providers:

• AnimationFrameRef
• ConsoleRef
• GetComputedStyleRef
• IntervalRef
• LocalStorageRef
• LocationRef
• SessionStorageRef
• TimeoutRef
• WindowRef

In this Nx monorepo, you can find the following:

• The library source code [libs]
• An example consuming Angular application and unit tests [apps]
• An e2e test suite [apps]

Install ng-refs for Angular references

Install these references via NPM or Yarn into your Angular project.

npm install ng-refs

yarn add ng-refs

You can then import NgRefsModule into your Angular application. You can find an example here in this repository. You can also import and provide the references directly in your own Angular modules.

Serve the demo for development

Run start for a dev server. Navigate to http://localhost:4200/.

Build the library for production

Run ng build ng-refs --prod to build the library for publishing. The build artifacts will be stored in the dist/libs/ng-refs directory.

Run all required unit tests

Run affected:test to execute the unit tests affected by a change.

Run all required end-to-end tests

Run affected:e2e to execute the end-to-end tests affected by a change.