Error on loading material components

[rishikeshjadhav]

Getting below error when material components () are added,

[rishikeshjadhav]

Adding more details as below,
bvm version: 0.0.30
bit version: 0.0.603
Angular version: [email protected]

Below are the workspace .jsonc contents:

{
"$schema": "https://static.bit.dev/teambit/schemas/schema.json",
"teambit.workspace/workspace": {
"name": "bit-cd2-ang",
"icon": "https://static.bit.dev/bit-logo.svg",
"defaultDirectory": "{scope}/{name}",
"defaultScope": "rishijadhav2792.rjcomponents"
},
"teambit.dependencies/dependency-resolver": {
"packageManager": "teambit.dependencies/pnpm",
"policy": {
"dependencies": {
"@angular/material": "13.1.1",
"@angular/forms": "13.1.1",
"@angular/cdk": "13.1.1",
"@angular/animations": "13.1.1"
},
"peerDependencies": {}
}
},
"teambit.workspace/variants": {
"*": {
"teambit.angular/[email protected]": {}
}
},
"teambit.angular/[email protected]": {},
"teambit.generator/generator": {
"aspects": [
"teambit.angular/[email protected]"
]
}
}

[rishikeshjadhav]

@ocombe @debs-obrien

Looks like a similar issue as below,
#31

[ocombe]

Hmm I wonder if the Material module needs to be pre-compiled with ngcc even in v13, I'll do some tests tomorrow

[ocombe]

Can you try to add @angular/material to the peerDependencies in workspace.jsonc, then remove the capsule (bit capsule delete --all) and run bit install again

[rishikeshjadhav]

Moved @angular/material to the peerDependencies.
Ran "bit capsule delete --all"
Ran "bit install"

Started to get below errors on bit install

Below is the updated workspace .jsonc contents:

{
"$schema": "https://static.bit.dev/teambit/schemas/schema.json",
"teambit.workspace/workspace": {
/**
* the name of the component workspace. used for development purposes.
/
"name": "bit-cd2-ang",
/
* set the icon to be shown on the Bit server.
/
"icon": "https://static.bit.dev/bit-logo.svg",
/
* default directory to place a component during bit import and bit create.
* the following placeholders are available:
* name - component name includes namespace, e.g. 'ui/button'.
* scopeId - full scope-id includes the owner, e.g. 'teambit.compilation'.
* scope - scope name only, e.g. 'compilation'.
* owner - owner name in bit.dev, e.g. 'teambit'.
/
"defaultDirectory": "{scope}/{name}",
/
* default scope for all components in workspace.
**/
"defaultScope": "rishijadhav2792.rjcomponents"
},
"teambit.dependencies/dependency-resolver": {
"packageManager": "teambit.dependencies/pnpm",
"policy": {
"dependencies": {
"@angular/forms": "13.1.1",
"@angular/cdk": "13.1.1",
"@angular/animations": "13.1.1"
},
"peerDependencies": {
"@angular/material": "13.1.1"
}
}
},
"teambit.workspace/variants": {
"*": {
"teambit.angular/[email protected]": {}
}
},
"teambit.angular/[email protected]": {},
"teambit.generator/generator": {
"aspects": [
"teambit.angular/[email protected]"
]
}

[rishikeshjadhav]

Completed above suggested steps,

Moved @angular/material to the peerDependencies.
Ran "bit capsule delete --all"
Ran "bit install"
Ran "bit start"

Still getting same error

[rishikeshjadhav]

UPDATE:

Tried with basic button component from material as well, getting similar error,

[rishikeshjadhav]

@ocombe Let me know if you find something around this, Thanks.

[rishikeshjadhav]

UPDATE

bvm version: 0.0.30
bit version: 0.0.603
Angular: teambit.angular/[email protected]
Angular CLI: 13.1.2

---

1. Created new angular project - "ng new bit-ng-thirteen"

Below is the dependency list

2. Added material - "ng add @angular/material"

Below is the dependency list

3. Delete node_modules folder

4. Updated version to be consistent with material (13.1.2)

Below is the dependency list

5. Ran "npm install"

6. Added a basic material button component and verified that everyting is working fine

7. Initialzed a bit repository - "bit init" - This created .bitmap file and workspace.jsonc file

8. Updated workspace.jsonc to include angular variant

   "teambit.workspace/variants": {
   "*": {
   "teambit.angular/[email protected]": {}
   }
   },
   "teambit.angular/[email protected]": {},
   "teambit.generator/generator": {
   "aspects": [
   "teambit.angular/[email protected]"
   ]
   }

9. Ran "bit install"

10. Created a bit component - "bit create ng-module app/first-cmp"

11. Added a basic material button component in newly added first-cmp

12. Ran "ng serve" to run the Angular solution locally

13. Got the same error as below

14. Updated angular.json file to include preserveSymlinks flag set to true

    "projects.$name.architect.build.options.preserveSymlinks: true"
    

15. Ran "ng serve" to run the Angular solution locally, This time it worked correctly

16. Ran "bit compile"

17. Ran "bit link"

18. Ran "bit start"

It gave the same error before setting preserveSymlinks: true in angular.json file

@ocombe Hope this analysis will helps!

[rishikeshjadhav]

UPDATE

Tried from sratch on brand new dev boxes with below configurations,

OS: Windows 10
Node version: 12.22.7
Angular CLI version: 11.2.13
BVM version: 0.0.34
Bit version: 0.0.621

Followed below steps:

OK - bit new ng-workspace checkone -a teambit.angular/angular-v11
OK - bit create ng-module ui/my-button
OK - bit install
OK - bit start

Everything ran correctly and the component was loaded with default text.

Added material as peer dependencies using below commands,

OK - bit install @angular/[email protected] --type peer
OK - bit install @angular/[email protected] --type peer
OK - bit install @angular/[email protected] --type peer
OK - bit install @angular/[email protected] --type peer

Added new material button in above component (https://material.angular.io/components/button/examples)

1. Imported button module in file my-button.module.ts

   import { MatButtonModule } from '@angular/material/button';

2. Updated imports array in file my-button.module.ts

   imports: [
   MatButtonModule
   ]

3. Added basic button component HTML in file my-button.component.ts

	<button mat-raised-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-raised-button color="accent">Accent</button>
    <button mat-raised-button color="warn">Warn</button>
    <button mat-raised-button disabled>Disabled</button>

FAILED - bit start - Failed with multiple errors

Re-tried with below commands,

OK - bit capsule delete --all
OK - Delete node_modules folder

OK - bit install

FAILED - bit start - see below for error messages,

---

tried above steps on two different dev boxes,

Error on DEV BOX 1:

Error on DEV BOX 2:

[rishikeshjadhav]

@ocombe @debs-obrien

Would be great to hear and have some help around this, kind of have hit a dead end here!

[ocombe]

I'm working on a fix, it should be released today hopefully

[rishikeshjadhav]

That's great @ocombe , Looking forward for the same, Thanks!

I will try out with adding different material components once the fix is available.

[ocombe]

Can you run the new version that I just released ?

[rishikeshjadhav]

Sure, will try with teambit.angular/[email protected]

Shall I follow the same steps that i tried above on 2 DEV boxes?

Let me know if anything additional step is required.

[ocombe]

just change the number in workspace.jsonc and run bit install, it should be enough

[rishikeshjadhav]

sure, let me give it a try

[rishikeshjadhav]

I tested with below material components,

Button - SUCCESS
https://material.angular.io/components/button/overview

Badge - SUCCESS
https://material.angular.io/components/badge/overview

Autocomplete - FAILED
https://material.angular.io/components/autocomplete/overview

Error -

Datepicker - FAILED
https://material.angular.io/components/datepicker/overview

Error -

Note - All imports and providers are added correctly and are working fine with standalone Angular application.

Seems like components which requires injectors/providers are not rendering correctly.

@ocombe , any thoughts on this?

I will run few more tests over this week and will update the issue.

[rishikeshjadhav]

@ocombe , here is the solution if you want to give it a try,

https://github.com/rishikeshjadhav/bit-ang-mat

[ocombe]

Hmm, nice catch, I'll take a look at it tomorrow, but that's weird

[rishikeshjadhav]

One observation regarding styling for material components,

When we add material support to any standalone Angular application using below command,

ng add @angular/material

It performs certain steps to add prebuilt themes, typography, etc. Refer to below URL

https://material.angular.io/guide/getting-started

How do we configure those steps while adding components using bit?

By default the material stylings are not applied

[ocombe]

I fixed the issue but I can't publish a new version right now due to a bug in bit, I'll let you know when it's available

[rishikeshjadhav]

Sounds Good @ocombe , Looking forward for the new build to try out with complex material components, Thanks!

Also do check out on above observation regarding styling/effects for material components not getting applied by default.

[ocombe]

Ah yes, you can use a custom env and do something like that (obviously adapted to material):

      angular.overrideAngularOptions({styles: [        
        require.resolve('bootstrap/dist/css/bootstrap.min.css'),
        require.resolve('@fortawesome/fontawesome-free/css/all.css'),
        require.resolve('primeicons/primeicons.css'),
        require.resolve('primeng/resources/primeng.css'),
        require.resolve('primeng/resources/themes/nova-accent/theme.css')        
      ], scripts: [
        require.resolve('jquery/dist/jquery.min.js'),
        require.resolve('bootstrap/dist/js/bootstrap.min.js')
      ]})

To generate a custom env, use the command bit create ng-env <name of env>, and then use that in your workspace.jsonc for those components.

[rishikeshjadhav]

Sure, I can give this a try.
Can you please point me to some available documentation around custom env that i can refer to?

[ocombe]

https://harmony-docs.bit.dev/building-with-bit/environments/#customizing-environments

or in the new docs (work in progress): https://teambit-community-apps-bit-dev.netlify.app/docs/envs/composing-env

[rishikeshjadhav]

Awesome! Let me give this a try with the basic components which are working currently. Once the new build is available i will give the complex components a try as well.

Thanks @ocombe for details around this and looking forward for more exciting Angular integrations. Cheers!

[ocombe]

I have published a new version with the fix

[rishikeshjadhav]

@ocombe

Just wanted to confirm, should i try with teambit.angular/[email protected] or teambit.angular/[email protected]

teambit.angular/[email protected] - This was the build version for your last fix.

[ocombe]

0.0.9

[rishikeshjadhav]

Sure, since the .bitmap still shows 0.0.8 for angular-v13

https://github.com/teambit/bit-angular/blob/master/.bitmap

[ocombe]

updated 🙂

[rishikeshjadhav]

Tested with Autocomplete component of material - FAILED

https://material.angular.io/components/autocomplete/overview

---

OS: Windows 10
Node version: 14.18.1
Angular CLI version: 13.1.3
BVM version: 0.0.34
Bit version: 0.0.623

Getting below error on bit start,

When we try to add BrowserAnimationsModule or NoopAnimationsModule in imports array of my-button.module.ts file getting below error,

---

Here is the repo to try it out,

https://github.com/rishikeshjadhav/bit-ang-autocomplete

---

After few google searches they are saying BrowserModule and BrowserAnimationsModule both needs to be part of root module app.module.ts and cannot be included in child modules

@ocombe, how can we ensure BrowserModule and BrowserAnimationsModule are included in root app.module.ts in our case?

[ocombe]

Hmm BrowserModule is indeed included by default... so yeah that will be an issue for BrowserAnimationsModule, and I don't see a workaround right now. It should be fixed by the next Architecture that I'm working on (with Angular elements) though

[rishikeshjadhav]

ohh okay.. any possible timeline that we are looking at currently for this fix to be available if that can be shared? 👀

Just wanted to plan and prioritize things here accordingly 😊 as currently these material components wont work.

[ocombe]

I hope to release this change in the next 2 weeks if I don't hit any roadblock

[rishikeshjadhav]

ok great, Thanks for sharing 🙌

oh and you said BrowserModule is indeed included by default...

Similarly if we include BrowserAnimationsModule and CommonModule also by default, i believe this issue should get fixed.

Thoughts? 🤞

[rishikeshjadhav]

May be as below (Just giving it a try)

In below file,

https://github.com/teambit/bit-angular/blob/a65dc6f9732a3f22be62571e7b499cbafb8a0a7f/packages/angular/preview/src/app/app.module.ts

Update

imports: [BrowserModule, DocsModule],

TO

imports: [BrowserModule, BrowserAnimationsModule, CommonModule, DocsModule],

and adding below 2 import statements on top,

import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

[rishikeshjadhav]

@ocombe , any thoughts on above possible solution? Is it feasible?

[rishikeshjadhav]

@ocombe , just checking on release of next Architecture changes for Angular elements which will fix above issue?

Also, let me know if you got a chance to check on above mentioned possible solution?

[ocombe]

I will release a new version with the BrowserAnimationsModule instead of BrowserModule . No need to import CommonModule since it's already exported by these 2 browser modules
As for the Angular elements change, it's been delayed due to a change in the priority of the features... hopefully not by much

[rishikeshjadhav]

Sounds good, let me know once the new version is available and i will give it a try. Thanks!

Do mention the version number to try with.

[ocombe]

teambit/[email protected] has been released with the change.
But be aware of a bug in angular itself right now that will prevent you from compiling / building your files until this is fixed angular/angular-cli#22606 (maybe tomorrow?). You should still be able to run bit start. This will only appear if you delete your node modules and run bit install again (or if you create a new workspace).

[rishikeshjadhav]

sure, i will give this a try tomorrow morning and update. Thanks for the release!

[rishikeshjadhav]

This is working fine with teambit.angular/[email protected].

However the default material stylings are not getting applied which are breaking the components.

I will try out the solution that you suggested by creating a custom environment using bit create ng-env <name of env>

Will create separate issue in case of any errors in that process.

@ocombe , Thank you for all the help!

[rishikeshjadhav]

@ocombe , can you please check below issue which is occurring while creating custom environment,

#35