Add Angular Material to a custom library
You don't need to add it there.
You need to add it to your primary application:
ng add @angular/material
Then add "@angular/material" to the peerDependencies
of the projects/first-lib/src/package.json
(just copy a line with @angular/material
from your primary package.json
).
What you just did:
- You installed the library to the primary
package.json
and can now run your code locally, because locally angular cli would use the primarypackage.json
andnode_modules
- You set it as a library's dependency and after you publish it and install at another place it will ask you to also install the
peerDependencies
there (as npm warning)
You can, of course, also add it to dependencies
instead of peerDependencies
and get it automatically installed with your library, but this is not a good way of managing frontend dependencies (but could be still good for pure node.js packages)
Since Angular 7...
Since ng7 and ng CLI 7, we can follow the preferred method of Angular Library development is as follows.
- Create a workspace and leverage the
--create-application
flag set to false. - Create your library within your workspace.
- Create a test/sandbox project within your workspace to test your library as you develop it.
- Use a git subtree to push your
/dist/
folder of your library build out to a seperate repo that you can use as a source for distributing your new Library (either internally or publicly through npm, etc.)
This does a few things. 1. Keeps your library and sandbox project independent and also generates an end to end (e2e) testing project within your workspace. 2. Keeps all of your projects together, but independent.
So what does this change exactly? This is 'mostly' how we've been doing things.
Keep in mind, you will need to add the external schematic/library to your sandbox project, not to your workspace. In ng6, I believe this wasn't the case, as with ng6, you created a workspace and project at the same time and then you had to do some renaming magic. With ng7, you use the --create-application
flag set to false
and then create your sandbox/dev project. That said, when you use ng add
for the purpose of adding an external library/schematic to your sandbox project (like angular material), you will use the --project=
flag with the ng add
command. Let's run through the steps, now that we've [over]-explained everything.
NOTE: I always create my repo at my origin (gitlab/github/bitbucket/etc) and then clone it to my local before doing anything, I will assume you do the same.
For demo purposes, we will call this library 'Demo Library' and my repo will be named 'demo-workspace'
- Run
git clone $ssh_url_for_repo_here
- CD into your newly cloned workspace repo
cd demo-workspace
- Use ng new to create your workspace WITHOUT a project and in the same directory
ng new demo-workspace --directory=./ --create-application=false
- This will create an angular workspace. It will look similar to a project, but it won't do anything but fail if you type
ng serve
- This will create an angular workspace. It will look similar to a project, but it won't do anything but fail if you type
- In the same folder (the ROOT of your workspace repo) generate your library, including a desired prefix) with
ng generate demo-library
orng g demo-library --prefix=demo
.- This will create a 'projects' folder inside of your workspace folder. It will place your new library inside your 'projects' folder.
- Then you'll run
ng build demo-library
to run your initial build of your new library, which will create adist
folder in the root of your workspace. - Next you will create your sandbox project that you will use while developing and testing your angular library with the
ng generate
command and your desired flags, something like thisng g application demo-sandbox --style=scss --routing=false
- This will generate a normal angular project, following your flag instructions and place the newly generated project in your workspace's projects folder
demo-workspace/projects/demo-sandbox
- This will generate a normal angular project, following your flag instructions and place the newly generated project in your workspace's projects folder
- After your project has been generated, you can serve it up with the standard
ng serve
and it'll appear on port 4200, no need to include the--project=
flag for this, it will assume it correctly. - Now you will finally add Angular Material schematic to your sandbox project with
ng add
command and using the--project=
flag to identify which project Angular Material should run in (again, all of this is in your parent workspace directory)ng add @angular/material --project=demo-sandbox
- You'll notice that your 'demo-sandbox' doesn't actually have a package.json, that's because it leverages the package.json from the workspace. Everything is separated, but not really lol.
- Finally add Angular Material as a peer dependency just as @smnbbrv suggested their answer...
Then add "@angular/material" to the peerDependencies of the `projects/demo-library/src/package.json (just copy a line with @angular/material from your primary package.json).
I add the @angular/cdk, @angular/animations and hammerjs dependencies along with the @angular/material personally. I'm big on explicitness, plus you'll notice that in "peerDependencies" it explicitly has both @angular/common and @angular/core, rather than just one and assuming the other.
- Once you're done with that, you can then run the
ng build
command to rebuild your demo-library project, thus creating a new 'dist/' folder in your workspace project, which also triggers your currently served 'demo-sandbox' project to rebuild itself.