ng add material in a library doesn't work #11438

daniele-zurico · 2018-05-21T19:26:12Z

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 · 2018-05-31T07:42:09Z

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 · 2018-05-31T09:40:56Z

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

Gorniv · 2018-05-31T16:31:59Z

workaround

amcdnl · 2018-06-10T14:28:49Z

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-zz · 2018-06-12T20:50:56Z

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-zz · 2018-06-12T20:57:15Z

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 · 2018-07-20T15:49:36Z

I am also experiencing this issue.

bldesign · 2018-09-07T12:54:22Z

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 · 2018-09-07T21:45:28Z

@bldesign that did the trick thanks!!!

jalchr · 2018-09-10T12:37:36Z

@bldesign Amazing.

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

maranza · 2018-09-10T15:50:02Z

The architect solution did the magic, thanks

parikshitsharma70 · 2018-09-11T07:55:50Z

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

bldesign · 2018-09-11T08:52:11Z

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: angular/angular@fc5af69#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: angular/angular-cli#12228

devversion · 2018-09-11T10:16:59Z

@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.

* Upgrades the devkit dependencies to the latest versions. * Adds support for the newly introduced and published `project.targets` instead of `project.architect` (see: angular/angular-cli@3071608) * Compatibility behavior for a published but non-announced breaking change within the schematic context (see: https://github.com/angular/angular-cli/commit/9720077a4b5ae628ddfaf5f1a26bac3b04bdf637#diff-e73df838d6700d187eff76a50c7e1c53R233`) Fixes angular#11438

* Upgrades the devkit dependencies to the latest versions. * Adds support for the newly introduced and published `project.targets` instead of `project.architect` (see: angular/angular-cli@3071608) * Compatibility behavior for a published but non-announced breaking change within the schematic context (see: https://github.com/angular/angular-cli/commit/9720077a4b5ae628ddfaf5f1a26bac3b04bdf637#diff-e73df838d6700d187eff76a50c7e1c53R233`) * Supports the new `project.targets` schema within the update schematics (in order to properly determine `tsconfig` files) Fixes angular#11438

* Upgrades the devkit dependencies to the latest versions. * Adds support for the newly introduced and published `project.targets` instead of `project.architect` (see: angular/angular-cli@3071608) * Compatibility behavior for a published but non-announced breaking change within the schematic context (see: https://github.com/angular/angular-cli/commit/9720077a4b5ae628ddfaf5f1a26bac3b04bdf637#diff-e73df838d6700d187eff76a50c7e1c53R233`) * Supports the new `project.targets` schema within the update schematics (in order to properly determine `tsconfig` files) * Due to the fact that the @angular-devkit/schematics now handles Bazel better, the template files will be resolved through NodeJS. This means that the template files need to be referenced in the @//:node_modules label. Fixes #11438

janunezc · 2018-09-12T16:10:41Z

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 · 2018-09-12T16:11:24Z

This comment from @bldesign worked for me.
#11438 (comment)

deepVova · 2018-09-19T09:07:08Z

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 · 2018-09-19T09:27:10Z

@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 · 2019-09-09T15:02:16Z

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.}

josephperrott assigned amcdnl May 31, 2018

amcdnl added the discussion label Jun 15, 2018

devversion assigned devversion and unassigned amcdnl Sep 11, 2018

devversion added the in progress label Sep 11, 2018

devversion mentioned this issue Sep 11, 2018

feat(schematics): compatibility with Angular CLI 6.2.0 #13078

Merged

devversion added has pr and removed in progress labels Sep 11, 2018

jelbourn closed this as completed in #13078 Sep 11, 2018

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

mmalerba added the needs: discussion Further discussion with the team is needed before proceeding label Mar 3, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ng add material in a library doesn't work #11438

ng add material in a library doesn't work #11438

daniele-zurico commented May 21, 2018 •

edited

Loading

Gorniv commented May 31, 2018

daniele-zurico commented May 31, 2018

Gorniv commented May 31, 2018

amcdnl commented Jun 10, 2018

Rastamafugg-zz commented Jun 12, 2018 •

edited

Loading

Rastamafugg-zz commented Jun 12, 2018

Xaeart commented Jul 20, 2018

bldesign commented Sep 7, 2018 •

edited

Loading

carlyjhahn commented Sep 7, 2018

jalchr commented Sep 10, 2018

maranza commented Sep 10, 2018

parikshitsharma70 commented Sep 11, 2018

bldesign commented Sep 11, 2018 •

edited

Loading

devversion commented Sep 11, 2018

janunezc commented Sep 12, 2018

janunezc commented Sep 12, 2018

deepVova commented Sep 19, 2018

devversion commented Sep 19, 2018 •

edited

Loading

angular-automatic-lock-bot bot commented Sep 9, 2019

ng add material in a library doesn't work #11438

ng add material in a library doesn't work #11438

Comments

daniele-zurico commented May 21, 2018 • edited Loading

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

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

Package Version

Gorniv commented May 31, 2018

daniele-zurico commented May 31, 2018

Gorniv commented May 31, 2018

amcdnl commented Jun 10, 2018

Rastamafugg-zz commented Jun 12, 2018 • edited Loading

Rastamafugg-zz commented Jun 12, 2018

Xaeart commented Jul 20, 2018

bldesign commented Sep 7, 2018 • edited Loading

carlyjhahn commented Sep 7, 2018

jalchr commented Sep 10, 2018

maranza commented Sep 10, 2018

parikshitsharma70 commented Sep 11, 2018

bldesign commented Sep 11, 2018 • edited Loading

devversion commented Sep 11, 2018

janunezc commented Sep 12, 2018

janunezc commented Sep 12, 2018

deepVova commented Sep 19, 2018

devversion commented Sep 19, 2018 • edited Loading

angular-automatic-lock-bot bot commented Sep 9, 2019

daniele-zurico commented May 21, 2018 •

edited

Loading

Rastamafugg-zz commented Jun 12, 2018 •

edited

Loading

bldesign commented Sep 7, 2018 •

edited

Loading

bldesign commented Sep 11, 2018 •

edited

Loading

devversion commented Sep 19, 2018 •

edited

Loading