What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
For most published Angular libraries, run ng add <lib_name> from your workspace root, then import the library’s exported functionality where your application uses it. Angular’s official guide recommends this command because it installs the package and runs the schematic the library ships with, which can add imports, styles or other project setup. The package’s own README remains the authority for package-specific steps.
An Angular library is reusable code meant to be imported into an application; it does not run on its own. Angular’s official overview states it plainly: “A library must be imported and used in an application.” Most published libraries are distributed as npm packages, and Angular Material is a first-party example.
Install a library with ng add
Start with the library’s installation instructions. Most packages document a single command, and ng add is the one Angular’s official guide names for most published libraries.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errors- Open the package’s README or documentation and confirm the library name and any stated requirements, such as a minimum Angular version.
- From the root of your workspace, run
ng add <lib_name>. - Review what the schematic changed. Depending on the package, it may add module imports, fonts, theme files or other configuration. Check your
package.jsonfor the new dependency and inspect any files the schematic reports editing. - Start the development server with
ng serve, or restart it if it was already running, so the new configuration is picked up.
When a package has no add schematic
Not every package provides an ng add schematic. In that case, install it with your package manager, for example npm install <lib_name>, and follow the maintainer’s documented imports and setup steps by hand. The installation itself is the same either way; the difference is whether the setup is automated.
#1 Best Overall
Import the API where you use it
Installing a package and using its API are separate steps. Angular’s official overview illustrates this with @angular/forms: after installation, the component that needs reactive forms imports ReactiveFormsModule directly.
In a standalone component, the import goes into the component’s imports array:
import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-signup',
standalone: true,
imports: [ReactiveFormsModule],
templateUrl: './signup.component.html',
})
export class SignupComponent {}Import only from the path the package documents. Deep imports into a package’s internal folders can break on the next update, because those files are not part of its supported public surface.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Fix missing type errors
Libraries typically ship TypeScript .d.ts declaration files. If your editor reports that a module has no types, work through these checks in order:
- Look at the package’s
package.jsonfor atypesortypingsfield. If it is present, the declarations are shipped and the problem is more likely an import path or a stale editor session. Restart the TypeScript server in your editor and try again. - If the package ships no declarations, install a matching typings package when one exists, such as
@types/<lib_name>. Angular’s official example for the d3 charting library installs bothd3and@types/d3. - If no typings package exists, declare the module yourself. A minimal declaration in a
.d.tsfile that your TypeScript configuration includes can silence the error:declare module '<lib_name>';. This removes type checking for that module, so treat it as a stopgap.
Update libraries
To update one library, run ng update <lib_name>. Angular’s guide also asks you to check library versions when you upgrade Angular itself, since a library may not yet support the new Angular release. Libraries that depend on each other may need updating in an order their maintainers document; updating them in an arbitrary sequence can leave you with mismatched versions.
Load a legacy script globally
Some older libraries are written to be loaded with a traditional script tag and expect a global object such as $ or Popper to exist. Angular CLI can load these files for you without changing your code.
Rank #3
Add the script and stylesheet paths
- Open
angular.jsonand find your project underprojects. - In that project’s build target options, add the file paths to the
scriptsarray and any CSS files to thestylesarray. Paths are relative to the workspace root, for examplenode_modules/<package>/dist/<file>.js. - Restart
ng serveafter the change. Configuration edits are not hot-reloaded.
Angular’s guide uses Bootstrap 4 with jQuery and Popper.js as its illustration. That example shows the mechanism only; it is not a recommendation for those package versions, which are long out of date.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Do not also import the same library as a module
Once a library is loaded through scripts, do not add an import statement for it as well. Angular’s guide warns that this can load two separate copies. For plugin-based libraries, a plugin may extend one copy while your application code uses the other, and the result looks like a silent failure. Declare typings separately, either through an @types package listed in your TypeScript configuration’s compilerOptions.types array or with manually declared globals.
Create and publish your own library
Angular’s CLI can scaffold a library inside a workspace. The official example starts with a workspace that has no application:
ng new my-workspace --no-create-application
cd my-workspace
ng generate library my-libDecide whether code belongs in a library
A separate library is worthwhile when the feature is reused across applications. Keeping it apart can also encourage decoupling from application business logic. The trade-off is maintenance: a library has its own versioning, build and update work, so splitting out code used by only one application usually adds cost without a clear benefit.
Define the public API
The library’s public-api.ts file defines what consumers can import. Export only the components, services and types you intend to support. Anything not re-exported from that file is effectively private, even if it sits in the same folder.
Build and publish to npm
Build the library with its production configuration, then publish the packaged output rather than the source workspace:
ng build my-lib --configuration production
cd dist/my-lib
npm publishThe format you publish matters for consumers. Angular’s guide recommends Partial-Ivy for npm libraries:
| Format | Who can consume it | Angular version constraint | Use when |
|---|---|---|---|
| Partial-Ivy (recommended) | Ivy applications | Stated as portable for applications using Angular v12 or later | Publishing a library for general use across applications |
| Full-Ivy | Applications built with the same Angular version | Requires the exact Angular version to match the library’s build; relies on private instructions | Only when the library and the consuming application are built with the same exact Angular version |
The v12 threshold is a compatibility statement from Angular’s documentation, not a usage figure. Because version-specific guidance changes between Angular releases, check the current release’s documentation before relying on these details for a new library.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common failures
| Symptom | Likely cause | What to check |
|---|---|---|
| Cannot find module after install | Package not installed in the workspace, or the import path is wrong | Confirm the entry in package.json and the path in the import statement |
| Module has no exported member | The name is not exported by the package’s public surface, or the import reaches into internal files | Use the import path shown in the package documentation |
| Missing types in the editor | No shipped declarations and no typings package | The typings checks in the section above |
| Plugin or extension has no effect | The library is loaded both as a global script and as a module, creating two copies | Remove the import or the scripts entry so only one loading method remains |
| Errors after upgrading Angular | A library does not yet support the new Angular version, or dependent libraries are out of step | Check each library’s compatibility, then update dependent libraries in their documented order |
For ordinary library use there is a single recommended path, so the decision is usually between two cases: a package that provides an add schematic, which you install with ng add, and one that does not, which you install with your package manager and configure by hand.
Recommended Free Tools
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
