Components: ng add material in a library doesn't work

[daniele-zurico]

Bug, feature request, or proposal:

BUG

What is the expected behavior?

Create material in a library

What is the current behavior?

Your project is not using the default configuration for build and test. The Angular Material schematics can only be used with the default configuration

What are the steps to reproduce?

ng new data-table
cd data-table/
ng generate library ngx-data-table
ng add @angular/material --project=ngx-data-table

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

• Angular CLI: 6.0.3
  
  
  
  • Node: 10.1.0
  
  
  • OS: darwin x64
  
  
  • Angular: 6.0.2
    
    ... animations, common, compiler, compiler-cli, core, forms
    
    ... http, language-service, material, platform-browser
    
    ... platform-browser-dynamic, router
  
  

Package Version

• angular-devkit/architect 0.6.3
• angular-devkit/build-angular 0.6.3
• angular-devkit/build-ng-packagr 0.6.3
• angular-devkit/build-optimizer 0.6.3
• angular-devkit/core 0.6.3
• angular-devkit/schematics 0.6.3
• angular/cli 6.0.3
• ngtools/json-schema 1.1.0
• ngtools/webpack 6.0.3
• schematics/angular 0.6.3
• schematics/update 0.6.3
  ng-packagr 3.0.0-rc.5
  rxjs 6.1.0
  typescript 2.7.2
  webpack 4.8.3

Cc @amcdnl

[Gorniv]

add test in projects.app.architect

 "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },

[daniele-zurico]

Hi @Gorniv it's a workaround or a final solution?

[Gorniv]

workaround

[amcdnl]

The error being produced:

Your project is not using the default configuration for build and test. The Angular Material schematics can only be used with the default configuration

Is not specific to the material schematics. I'm assuming this is a ng add restriction @hansl ?

[Rastamafugg]

Having the same problem, but I couldn't get this workaround to work for me.

Here is my original test config for my library module:

"test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "projects/core-map/src/test.ts", "tsConfig": "projects/core-map/tsconfig.spec.json", "karmaConfig": "projects/core-map/karma.conf.js" } },

And this is what I tried to change it to, following the example posted above:

"test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "projects/core-map/src/test.ts", "tsConfig": "projects/core-map/tsconfig.spec.json", "karmaConfig": "projects/core-map/karma.conf.js", "polyfills": "projects/core-map/src/polyfills.ts", "styles": [ "projects/core-map/src/styles.css" ], "scripts": [], "assets": [ "projects/core-map/src/favicon.ico", "projects/core-map/src/assets" ] } },

But when I try to run:

ng add @angular/material --project core-map

I still get the error:

Your project is not using the default configuration for build and test. The Angular Material schematics can only be used with the default configuration

[Rastamafugg]

If it helps, this is my build setting for the same project:
"build": { "builder": "@angular-devkit/build-ng-packagr:build", "options": { "tsConfig": "projects/core-map/tsconfig.lib.json", "project": "projects/core-map/ng-package.json" }, "configurations": { "production": { "project": "projects/core-map/ng-package.prod.json" } } },

[Xaeart]

I am also experiencing this issue.

[bldesign]

Seems ok by changing one apparently invalid key in angular.json:

projects.YOUR-APP-NAME.targets targets to architect
projects.YOUR-APP-NAME.architect

Eventually there's another "targets" reference in "YOUR-APP-NAME-e2e" too.
Angular linter tells that it is not valid: _Property targets is not allowed._

[carlyjhahn]

@bldesign that did the trick thanks!!!

[jalchr]

@bldesign Amazing.

Any thoughts why architect is not already in angular.json file ?

[maranza]

The architect solution did the magic, thanks

[parikshitsharma70]

@bldesign Thanks a lot for the workaround. This should be implemented by angular by default.

[bldesign]

It seems to be in Github already: https://github.com/angular/angular/blob/master/aio/angular.json
It was in the update to Angular 6.0.0-rc2: https://github.com/angular/angular/commit/fc5af69fb2f97c2c753f417432df87f28aefafd6#diff-f0980c505717baccefc9a70fca2558d3
It is in the blog post about update (https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4) and in the wiki (https://github.com/angular/angular-cli/wiki/angular-workspace) for your information.

The current Angular-CLI 6.2.1 generates new projects with _targets_ and not _architect_. The CLI v7.0.0-beta.2 too, no change (https://github.com/angular/angular-cli/releases/tag/v7.0.0-beta.2), for information.

The following PR would solve it but it is blocked under Review required: https://github.com/angular/angular-cli/pull/12228

[devversion]

@bldesign Yeah, you summed up everything. I will be working on supporting the new targets besides architect

That way we can ensure that people that use CLI 6.2.1 can properly use ng add @angular/material.

[janunezc]

Seems ok by changing one apparently invalid key in angular.json:

projects.YOUR-APP-NAME.targets targets to architect
projects.YOUR-APP-NAME.architect

Eventually there's another "targets" reference in "YOUR-APP-NAME-e2e" too.
Angular linter tells that it is not valid: _Property targets is not allowed._

This worked for me!

[janunezc]

This comment from @bldesign worked for me.
https://github.com/angular/material2/issues/11438#issuecomment-419430197

[deepVova]

Didn't worked for me. Using angular cli 6.2.2. Still have an error
Your project is not using the default configuration for build and test. The Angular Material schematics can only be used with the default configuration

[devversion]

@deepVova Please make sure you actually install 7.0.0-beta.2 through the CLI.

• ng add @angular/material@next.

Otherwise the last stable version (which does not include the compatibility fixes) will be installed.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}