angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.32k stars 6.72k forks source link

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

Closed daniele-zurico closed 6 years ago

daniele-zurico commented 6 years ago

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?

Package Version

Cc @amcdnl

Gorniv commented 6 years ago

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 commented 6 years ago

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

Gorniv commented 6 years ago

workaround

amcdnl commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

I am also experiencing this issue.

bldesign commented 6 years ago

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 commented 6 years ago

@bldesign that did the trick thanks!!!

jalchr commented 6 years ago

@bldesign Amazing.

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

maranza commented 6 years ago

The architect solution did the magic, thanks

parikshitsharma70 commented 6 years ago

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

bldesign commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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

deepVova commented 5 years ago

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 commented 5 years ago

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

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

angular-automatic-lock-bot[bot] commented 5 years ago

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.