teambit / bit-angular Goto Github PK

View Code? Open in Web Editor NEW

28.0 6.0 3.0 1.91 MB

Angular support for bit harmony

JavaScript 4.59% TypeScript 84.68% HTML 4.33% SCSS 1.31% MDX 5.08%

bit-angular's Introduction

Bit Angular

Documentation | Platform | Learn

Build components first.

Open infrastructure for component-driven applications to speed and scale development.

What is Bit Angular?

Bit Angular is a development environment for Bit Harmony.

How to Start?

To get started install Bit Version Manager:

npm i -g @teambit/bvm
# or
yarn global add @teambit/bvm

Install Bit:

bvm install

After that, follow the instructions to install the angular environment.

Resources & Community

Contributing 🎗️

Contributions are always welcome, no matter how large or small. Before contributing, please read the code of conduct.

See Contributing.

License 💮

Apache License, Version 2.0

bit-angular's People

Contributors

Stargazers

Watchers

Forkers

ashishkrtewari joskid

bit-angular's Issues

Error on loading basic button after following steps from documentation

Getting below error when running command: bit start

Add more tests

Angular v8 was broken in a new project but working in existing tests.
We need to add tests that use the angular env from the capsule to check that it works correctly.

How to handle multiple compositions for the same component ?

Hi !

First, I'm struggling to create multiple compositions for the same component with Angular.
Then, I can't figure how to pass my Input/Ouput with compositions:

-> passing [name]="test" is crashing

Property 'test' does not exist on type  'DropdownCompositionComponent'.

The composition file:

import { Component, NgModule } from '@angular/core';
import { DropdownModule } from './dropdown.module';

@Component({
  selector: 'dropdown-composition-cmp',
  template: `<ode-dropdown [name]="test"></ode-dropdown>`
})
class DropdownCompositionComponent {}

@NgModule({
  declarations: [DropdownCompositionComponent],
  imports: [DropdownModule],
  bootstrap: [DropdownCompositionComponent]
})
export class DropdownCompositionModule {}

Thanks

As a newbie to bit I'm struggling to get a particular use case working and I haven't found the documentation on this newer bit-angular release to be very helpful. I'm sure that's on me ... not the documentation. I'm still wrapping my head around this but I think it's the right technology for my particular use case. Which is essentially to create angular apps that I can deploy through bit into several umbrella apps.

I can get a module working just fine but my use case requires me to use both material and tailwindcss. I was able to get material working in a module but not tailwindcss. Since tailwindcss works really well with apps, but not libraries/modules I want to go the app route. Am I thinking about this the right way?

I've watched several videos and read several documentation pages but I'm still struggling to connect the dots. Any guidance is appreciated.

Fix hot reloading

Hot reloading in bit start doesn't reload the docs & compositions

I can't create a component from a custom env

I can generate the angular env but when I create a component and execute bit start in the preview I get infinite calls

I am creating a cross platform layout system and the react and react native components work fine but with the angular ones I have these problems and these errors

Error on rendering compositions for angular environment

I followed thru how I can set up an angular environment from your docs, made a very simple component with no dependencies.

When I tried to run the local environment to check it thru bit start

It shows me the page but i am getting an error which seems like it's coming from you:

there were zero changes to any file after creating the environment.

Can please advice?

Error on bit tag command

I'm trying to figure out how to get my angular component to export to my scope on bit.dev. From what I understand I need to run the tag command:

bit tag my-button --message "first publish"

It runs for a while and then I get this error:

Failed task 1: "teambit.preview/preview:GeneratePreview" of env "teambit.angular/[email protected]"
component: docuprep.components/[email protected]
ModuleNotFoundError: Module not found: Error: Can't resolve '@teambit/component-version' in '/home/ec2-user/Library/Caches/Bit/capsules/26462d4ac2b9c78db94588a991a4c13d510b7ebd/node_modules/@teambit/legacy/dist/utils'
ModuleNotFoundError: Module not found: Error: Can't resolve '@teambit/component-version' in '/home/ec2-user/Library/Caches/Bit/capsules/26462d4ac2b9c78db94588a991a4c13d510b7ebd/node_modules/@teambit/legacy/dist/utils'
    at /home/ec2-user/Library/Caches/Bit/capsules/c7125fcaf941dd4df92f4649e68d0fe64e804ed4/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/Compilation.js:2013:28
    at /home/ec2-user/Library/Caches/Bit/capsules/c7125fcaf941dd4df92f4649e68d0fe64e804ed4/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/NormalModuleFactory.js:795:13
    at eval (eval at create (/home/ec2-user/Library/Caches/Bit/capsules/c7125fcaf941dd4df92f4649e68d0fe64e804ed4/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /home/ec2-user/Library/Caches/Bit/capsules/c7125fcaf941dd4df92f4649e68d0fe64e804ed4/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/NormalModuleFactory.js:275:22
    at eval (eval at create (/home/ec2-user/Library/Caches/Bit/capsules/c7125fcaf941dd4df92f4649e68d0fe64e804ed4/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at /home/ec2-user/Library/Caches/Bit/capsules/c7125fcaf941dd4df92f4649e68d0fe64e804ed4/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/NormalModuleFactory.js:431:22
    at /home/ec2-user/Library/Caches/Bit/capsules/c7125fcaf941dd4df92f4649e68d0fe64e804ed4/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/NormalModuleFactory.js:124:11
    at /home/ec2-user/Library/Caches/Bit/capsules/c7125fcaf941dd4df92f4649e68d0fe64e804ed4/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/NormalModuleFactory.js:667:25
    at /home/ec2-user/Library/Caches/Bit/capsules/c7125fcaf941dd4df92f4649e68d0fe64e804ed4/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/NormalModuleFactory.js:852:8
    at /home/ec2-user/Library/Caches/Bit/capsules/c7125fcaf941dd4df92f4649e68d0fe64e804ed4/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/NormalModuleFactory.js:972:5
    at /home/ec2-user/Library/Caches/Bit/capsules/c7125fcaf941dd4df92f4649e68d0fe64e804ed4/node_modules/neo-async/async.js:6883:13
    at /home/ec2-user/Library/Caches/Bit/capsules/c7125fcaf941dd4df92f4649e68d0fe64e804ed4/node_modules/@angular-devkit/build-angular/node_modules/webpack/lib/NormalModuleFactory.js:955:45
    at finishWithoutResolve (/home/ec2-user/Library/Caches/Bit/capsules/c7125fcaf941dd4df92f4649e68d0fe64e804ed4/node_modules/@angular-devkit/build-angular/node_modules/enhanced-resolve/lib/Resolver.js:312:11)
    at /home/ec2-user/Library/Caches/Bit/capsules/c7125fcaf941dd4df92f4649e68d0fe64e804ed4/node_modules/@angular-devkit/build-angular/node_modules/enhanced-resolve/lib/Resolver.js:386:15
    at /home/ec2-user/Library/Caches/Bit/capsules/c7125fcaf941dd4df92f4649e68d0fe64e804ed4/node_modules/@angular-devkit/build-angular/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/home/ec2-user/Library/Caches/Bit/capsules/c7125fcaf941dd4df92f4649e68d0fe64e804ed4/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)

Found 1 errors in 1 components


✖ Total 7 tasks. 6 succeeded. 1 failed. 0 skipped. Total errors: 1.

I'm new to bit and am not very familiar with the workflow so I'm not sure what information will help track down what could be producing this error. Any guidance or help is appreciated.

Build/Snap error @angular/compiler-cli/ngcc

Hello,

i am having trouble to build/snap a component.

bit build
✔ found 1 components to build
✔ running pre install subscribers
✔ deduping dependencies for installation
...bff0a3547e3c65c1ec5a5595f408827165a11 |  +28 +++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /home/pixel/.pnpm-store/v3
  Virtual store is at:             ../../Library/Caches/Bit/capsules/b85bff0a3547e3c65c1ec5a5595f408827165a11/node_modules/.pnpm
...bff0a3547e3c65c1ec5a5595f408827165a11 | Progress: resolved 28, reused 28, downloaded 0, added 28, done
  -------------------------
✔ installing dependencies using pnpm
Cannot find module '@angular/compiler-cli/ngcc'
Require stack:
- /home/pixel/Library/Caches/Bit/capsules/5d80ac32eac50bb23e9f86198a31b2abb95aa781/[email protected]/dist/webpack-plugins/ngcc-processor.js
- /home/pixel/Library/Caches/Bit/capsules/5d80ac32eac50bb23e9f86198a31b2abb95aa781/[email protected]/dist/index.js
- /home/pixel/Library/Caches/Bit/capsules/5d80ac32eac50bb23e9f86198a31b2abb95aa781/[email protected]/dist/angular-v13.main.runtime.js
- /home/pixel/.bvm/versions/0.0.766/bit-0.0.766/node_modules/@teambit/scope/dist/scope.main.runtime.js
- /home/pixel/.bvm/versions/0.0.766/bit-0.0.766/node_modules/@teambit/bit/dist/load-bit.js
- /home/pixel/.bvm/versions/0.0.766/bit-0.0.766/node_modules/@teambit/bit/dist/app.js
- /home/pixel/.bvm/versions/0.0.766/bit-0.0.766/node_modules/@teambit/bit/bin/bit

Here is my package.json, i deleted node_modules and package-lock.json and reinstalled all dep to be sure that i have all versions to 13.2.6

{
  "name": "angular-core-backend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --watch --poll=2000",
    "build": "ng build",
    "serve": "http-server ./dist/angular-core-backend -p 4201 --cors",
    "test": "echo \"There are no tests for now.\"",
    "lint": "ng lint",
    "lint-fix": "ng lint --fix",
    "e2e": "ng e2e",
    "format:write": "prettier src/**/*.{ts,json,md,scss,html} --write",
    "format:test": "prettier src/**/*.{ts,json,md,scss,html} --list-different",
    "postinstall": "bit compile && bit link"
  },
  "private": true,
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },
  "dependencies": {
    "@angular/animations": "13.2.6",
    "@angular/cdk": "^11.0.0",
    "@angular/common": "13.2.6",
    "@angular/compiler": "13.2.6",
    "@angular/core": "13.2.6",
    "@angular/forms": "13.2.6",
    "@angular/platform-browser": "13.2.6",
    "@angular/platform-browser-dynamic": "13.2.6",
    "@angular/router": "13.2.6",
    "@auth0/angular-jwt": "^3.0.0",
    "@ckeditor/ckeditor5-angular": "^1.1.2",
    "@ckeditor/ckeditor5-build-classic": "^15.0.0",
    "@ng-select/ng-select": "^8.0.0",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "@tinymce/tinymce-angular": "^4.2.4",
    "@types/lodash": "^4.14.149",
    "chart.js": "^2.9.4",
    "chartjs-chart-treemap": "0.2.3",
    "chartjs-plugin-datalabels": "^1.0.0",
    "dom-to-image": "^2.6.0",
    "exceljs": "^1.12.0",
    "file-saver": "^2.0.2",
    "flag-icons": "^6.1.1",
    "google-libphonenumber": "^3.2.27",
    "icheck-bootstrap": "^3.0.1",
    "intl-tel-input": "^17.0.3",
    "jspdf": "^2.3.1",
    "jspdf-autotable": "^3.5.14",
    "libphonenumber-js": "^1.9.50",
    "lodash": "^4.17.15",
    "mathjs": "^8.1.0",
    "ngx-bootstrap": "^5.1.2",
    "ngx-drag-drop": "^2.0.0",
    "ngx-intl-tel-input": "^3.1.3",
    "ngx-toastr": "^11.3.3",
    "rxjs": "~6.6.7",
    "tslib": "^2.0.0",
    "xss": "^1.0.9",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "13.2.6",
    "@angular-eslint/builder": "13.1.0",
    "@angular-eslint/eslint-plugin": "13.1.0",
    "@angular-eslint/eslint-plugin-template": "13.1.0",
    "@angular-eslint/schematics": "13.1.0",
    "@angular-eslint/template-parser": "13.1.0",
    "@angular/cli": "13.2.6",
    "@angular/compiler-cli": "13.2.6",
    "@angular/language-service": "13.2.6",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.11.0",
    "@typescript-eslint/parser": "5.11.0",
    "eslint": "^8.2.0",
    "eslint-plugin-unused-imports": "^2.0.0",
    "http-server": "^0.12.1",
    "husky": "^3.0.9",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.17",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "prettier": "^2.6.1",
    "pretty-quick": "^2.0.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "typescript": "~4.5.5"
  }
}

Any hint? ty

Error while running bit compile after creating custom environment

Steps followed:

bit new ng-workspace checkone -a teambit.angular/angular-v13

bit create ng-module ui/autocomplete

bit create ng-env angmatenv

On running bit compile getting below error

Support more overrides

Currently we can set compiler options, but we need to support more overrides.
Also some of the compiler options are set by default, we should be able to override them as well.

Bit build fails due to compilation issues

After executing all steps indicated in the readme file, executing bit build fails on the following error:
Entry point of type library 'node' specified in compilerOptions

environment:
node: v12.14.1
npm: 6.13.x
bit version: 0.0.577
bvm version: 0.0.30

Error on loading material components

Getting below error when material components () are added,

Support Angular 8

Error on running bit compile

Getting below error on bit compile,

Composition Preview React Errors With Barebones Setup

Hi @ocombe ,

I have been having different issues with our isolated Bit packages, so I decided to start with a barebones setup.

Ran these commands:

bit new ng-workspace plain -a teambit.angular/angular-v13
bit create ng-module test
bit install
bit start

Got these errors... then ran (and deleted the ".git/bit" folder):

bit clear-cache
bit capsule delete --all

Uncaught TypeError: class constructors must be invoked with 'new'
    React 17
    _default mount.js:46
    render compositions.preview.runtime.js:69
    PreviewPreview preview.preview.runtime.js:144
    render preview.root1d95616f2064e17cf4a6a9e5c34cd260b5b3c2f7.js:39
    promise callback*render/< preview.root1d95616f2064e17cf4a6a9e5c34cd260b5b3c2f7.js:35
    promise callback*render preview.root1d95616f2064e17cf4a6a9e5c34cd260b5b3c2f7.js:32
    node_modules main.bundle.js:60398
    factory react refresh:6
    Webpack 3
react-dom.development.js:14985
    React 17
    _default mount.js:46
    render compositions.preview.runtime.js:69
    render self-hosted:1178
    PreviewPreview preview.preview.runtime.js:144
    AsyncFunctionNext self-hosted:695
    (Async: async)
    render preview.root1d95616f2064e17cf4a6a9e5c34cd260b5b3c2f7.js:39
    (Async: promise callback)
    render preview.root1d95616f2064e17cf4a6a9e5c34cd260b5b3c2f7.js:35
    (Async: promise callback)
    render preview.root1d95616f2064e17cf4a6a9e5c34cd260b5b3c2f7.js:32
    js preview.root1d95616f2064e17cf4a6a9e5c34cd260b5b3c2f7.js:50
    factory react refresh:6
    Webpack 3

Here is the reproduction repo - https://github.com/johnjspiteri/bit-angular-test-v13.22

Thank you

support for "prefix" when generating angular modules

The current state of generation of components doesn't care about prefixes. If you specify for example a component with name my-label it will generate files my-label.component.[scss,ts] along with composition, module and spec.

my request is to add support for a parameter --prefix or any override in workspace.jsonc for the angular aspect, letting the specification of a custom prefix.

so issuing the command: bit create ng-module label -e teambit.angular/angular --prefix=my will generate the set of files named label.[component|composition|docs|module...].[ts|scss]; keeping the generated class be the standard LabelComponent, but the selector in label.component.ts will be my-label;

any other references to this component in other files to be

Create a template for bit new

bit new creates a new workspace configured with a specific env. We need to add one for Angular.

Cannot build/tag dependent components with v13

Hello, there seems to be an issue with tagging when there is multiple components that depends on each other in the same workspace.

Envrionment:

  bit version   : 0.0.867
  node version  : v16.16.0
  npm version   : 6.14.17
  yarn version  : 1.22.19
  angular: teambit.angular/[email protected]

Steps to reproduce:

use bit create ng-module card
use bit create ng-module profile

import card component into profile

import { NgModule } from '@angular/core';
import { CardModule } from '@ng-frankie/test-ng-v13.card';
import { ProfileComponent } from './profile.component';

@NgModule({
  declarations: [
    ProfileComponent
  ],
  imports: [
    CardModule
  ],
  exports: [
    ProfileComponent
  ]
})
export class ProfileModule {}

bit tag/build failed with FatalDiagnosticError on profile component

Error:

Dependencies crash ng-packagr

When we add a dependency in the code of an angular library, bit will add it to the "dependencies" in package.json, but ng-packagr will fail:

Error: Dependency @angular/forms must be explicitly allowed using the "allowedNonPeerDependencies" option.
    at checkNonPeerDependencies (C:\www\bit-angular\node_modules\.pnpm\registry.npmjs.org\[email protected]_57bc0a52ef821031533e8c56960cafd4\node_modules\ng-packagr\lib\ng-package\entry-point\write-package.transform.js:213:19)
    at writePackageJson (C:\www\bit-angular\node_modules\.pnpm\registry.npmjs.org\[email protected]_57bc0a52ef821031533e8c56960cafd4\node_modules\ng-packagr\lib\ng-package\entry-point\write-package.transform.js:157:9)
    at C:\www\bit-angular\node_modules\.pnpm\registry.npmjs.org\[email protected]_57bc0a52ef821031533e8c56960cafd4\node_modules\ng-packagr\lib\ng-package\entry-point\write-package.transform.js:82:15
    at SwitchMapSubscriber.project (C:\www\bit-angular\node_modules\.pnpm\registry.npmjs.org\[email protected]_57bc0a52ef821031533e8c56960cafd4\node_modules\ng-packagr\lib\graph\transform.js:7:35)
    at SwitchMapSubscriber._next (C:\www\bit-angular\node_modules\.pnpm\registry.npmjs.org\[email protected]\node_modules\rxjs\internal\operators\switchMap.js:47:27)
    at SwitchMapSubscriber.Subscriber.next (C:\www\bit-angular\node_modules\.pnpm\registry.npmjs.org\[email protected]\node_modules\rxjs\internal\Subscriber.js:66:18)
    at SwitchMapSubscriber.notifyNext (C:\www\bit-angular\node_modules\.pnpm\registry.npmjs.org\[email protected]\node_modules\rxjs\internal\operators\switchMap.js:85:26)
    at SimpleInnerSubscriber._next (C:\www\bit-angular\node_modules\.pnpm\registry.npmjs.org\[email protected]\node_modules\rxjs\internal\innerSubscribe.js:27:21)
    at SimpleInnerSubscriber.Subscriber.next (C:\www\bit-angular\node_modules\.pnpm\registry.npmjs.org\[email protected]\node_modules\rxjs\internal\Subscriber.js:66:18)
    at C:\www\bit-angular\node_modules\.pnpm\registry.npmjs.org\[email protected]\node_modules\rxjs\internal\util\subscribeToPromise.js:7:24

We should move those dependencies to peer-dependencies instead

Improve docs template

Create angular components based on bit documenter & harmony base ui to style docs

Add actions to test the different versions

Right now the existing Github action only tests v12, we need to test other versions as well

Support Angular 9

Update custom-env example

Current implementation uses angular v12, though it is deprecated, according to the docs.
Could you please update the example?

Create a demo project with an application and bit components

Add new commands

Leverage Angular CLI commands through bit (things like generate, extract, ...)

Custom env has unresolved ramda dependencies

We're running into dependency issues when using a custom Angular env so that we can use Angular Material. Unfortunately, installation of it is not as simple as basic dependencies; the ng add schematic does some other behind-the-scenes work and must be run in an Angular app (which we are not using here). This lead us to find a couple existing issues with Angular Material and custom envs which we have used as a guide:
#32
#35

To start, we've set up a brand-new Angular workspace out-of-the-box:
https://bit.cloud/teambit/angular/angular

bit new ng-workspace bit-demo -a teambit.angular/angular
cd bit-demo
bit create ng-module ui/my-button
bit install
bit start

Everything here seems to work fine. Next, we add a custom Angular env:

bit create ng-env angular-material-env

Following #35 above, we now edit our workspace.jsonc to link everything up properly:

/**
 * this is the main configuration file of your bit workspace.
 * for full documentation, please see: https://bit.dev/docs/workspace/workspace-configuration
 **/{
  "$schema": "https://static.bit.dev/teambit/schemas/schema.json",
  /**
   * main configuration of the Bit workspace.
   **/
  "teambit.workspace/workspace": {
    /**
     * the name of the component workspace. used for development purposes.
     **/
    "name": "bit-demo",
    /**
     * 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": "company.scope"
  },
  /**
   * main configuration for component dependency resolution.
   **/
  "teambit.dependencies/dependency-resolver": {
    /**
     * choose the package manager for Bit to use. you can choose between 'yarn', 'pnpm'
     */
    "packageManager": "teambit.dependencies/yarn",
    "policy": {
      "dependencies": {
        "@teambit/angular": "1.1.3"
      },
      "peerDependencies": {}
    }
  },
  /**
   * workspace variants allow to set different subsets of configuration for components in your
   * workspace. this is extremely useful for upgrading, aligning and building components with a new
   * set of dependencies. a rule can be a directory or a component-id/namespace, in which case,
   * wrap the rule with curly brackets (e.g. `"{ui/*}": {}`)
   * see https://bit.dev/docs/workspace/variants for more info.
   **/
  "teambit.workspace/variants": {
    "angular-material-env": {
      "teambit.harmony/aspect": {}
    },
    "*": {
      "scope/angular-material-env": {}
    }
  },
  "teambit.angular/[email protected]": {},
  "teambit.generator/generator": {
    "aspects": [
      "scope/angular-material-env"
    ]
  }
}

To be safe, we now delete node_modules, yarn.lock, and run bit capsule delete --all to clean up all existing dependencies. After, we run:

bit install
bit start

Opening and viewing angular-material-env in the client results in the following errors in the console; something appears to be dependent on ramda / ramda-adjunct, and fails out-of-the-box. We're wondering if there is a missing dependency somewhere, or if we have misconfigured our custom env.

ERROR in ../../../Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda-adjunct/es/renameKeys.js 1:0-35
Module not found: Error: Can't resolve 'ramda' in '/Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda-adjunct/es'
resolve 'ramda' in '/Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda-adjunct/es'
  Parsed request is a module
  using description file: /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda-adjunct/package.json (relative path: ./es)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda-adjunct/es/node_modules doesn't exist or is not a directory
      /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda-adjunct/node_modules doesn't exist or is not a directory
      /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules
        single file module
          No description file found in /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules or above
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda doesn't exist
          .ts
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.ts doesn't exist
          .tsx
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.tsx doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.js doesn't exist
          .mdx
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.mdx doesn't exist
          .md
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.md doesn't exist
          .web.mjs
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.web.mjs doesn't exist
          .mjs
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.mjs doesn't exist
          .web.js
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.web.js doesn't exist
          .cjs
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.cjs doesn't exist
          .web.ts
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.web.ts doesn't exist
          .web.tsx
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.web.tsx doesn't exist
          .json
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.json doesn't exist
          .web.jsx
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.web.jsx doesn't exist
          .jsx
            Field 'browser' doesn't contain a valid alias configuration
            /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda.jsx doesn't exist
        /Users/developer/Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda doesn't exist
      /Users/developer/Library/Caches/Bit/capsules/node_modules doesn't exist or is not a directory
      /Users/developer/Library/Caches/Bit/node_modules doesn't exist or is not a directory
      /Users/developer/Library/Caches/node_modules doesn't exist or is not a directory
      /Users/developer/Library/node_modules doesn't exist or is not a directory
      /Users/developer/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ../../../Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/ramda-adjunct/es/index.js 170:0-53 170:0-53
 @ ../../../Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/@teambit/react.ui.docs-app/dist/base.js 21:24-48
 @ ../../../Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/@teambit/react.ui.docs-app/dist/docs-app.js 11:15-32
 @ ../../../Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/node_modules/@teambit/react.ui.docs-app/dist/index.js 8:19-40
 @ ../../../Library/Caches/Bit/capsules/91309ebe742bc198dec6b4c3b8cabf9ecc5f30e7/[email protected]/dist/preview/docs.js 13:38-75
 @ ./node_modules/.cache/bit/teambit.preview/preview/company.scope/angular-material-env/overview-1656617556034.js 4:0-201 9:2-12

Some additional OS information:

BVM: 0.1.1
Bit: 0.0.777
Angular CLI: 14.0.3
Node: 14.17.6
OS: darwin x64 (macOS)

Module not found: Error: Can't resolve 'html-loader'

I followed the steps in https://github.com/teambit/bit-angular as is and got the error on running bit start after creating ui/my-button. Running bit start directly after bit new ng-workspace doesn't throw error.

Module not found: Error: Can't resolve 'html-loader' in '/home/abhi9/Library/Caches/Bit/capsules/4449ca0ffbd1bf94b513919b0aa94c2a37e76f6e/[email protected]/preview'

OS: Zorin 16 (Ubuntu 20 based)
Node: 16.14.0

ENOENT: no such file or directory

Environment:

Ubuntu 22.04
VSCode
Bit version 0.0.846

Error:

Steps:

bit capsule delete --all
removed node_modules
bit install
bit compile
bit tag

The file exists and the localhost ran works and composition works as well as other services..

Also saying i have circular dependency but when I do bit insights to check.. it says nothing found

Can you please advice? Thanks

Support Angular 10

Angular Material + custom env dependency errors

Background

Hey all - our goal has been to set up an Angular components library using Bit. We've been having issues getting anything up-and-running, most likely because our existing components we want to pull in are built completely in Angular Material's design system and we're having trouble getting it to play nice.

The installation guide specifies running ng add material in an existing Angular project, which runs a script to pull in dependencies and configure everything for proper styling etc. Since we're outside of a proper Angular project, we looked at the source of this schematic to see what it does. In short terms it determines your current @angular/core version and installs matching versions of the the following packages:

@angular/material
@angular/cdk
@angular/forms
@angular/animations

It then runs setup-project.ts which in a nutshell:

Imports/installs BrowserAnimationsModule into root module from @angular/platform-browser/animations if animations are to be used (we prefer 'yes')
Performs various tasks to add custom CSS, linking it to index.html, etc. (We haven't gotten into the details since we haven't gotten this far yet.)

In lieu of running ng add, our task has been to reverse-engineer this and pull it all in ourselves. Our procedure is in the section below. We've followed a couple existing issues as a guide and opened our own when a dependency issue was found (and addressed):

#32: ran into some similar issues we are describing here; determined that a custom Angular Env is needed to facilitate the styling changes. Moved to issue 35 for that.
#35: walks through setting up a custom Angular Env; unsure if resolved, but got us down the right path on a few things.
#46: I posted this last week while following the two issues above and running into errors that were dependency-related. This one has been resolved, but we're continuing to bump into errors (no longer related to ramda).

Currently, we're still running into errors that seem to be build-chain related but are having trouble determining if this is misconfiguration or a bug in Bit, as we don't encounter it until pulling in Angular Material.

Procedure

Set up Bit workspace

Create a new Bit/Angular workspace, then create a module and custom env:

bit new ng-workspace bit-angular-material -a teambit.angular/angular
cd bit-angular-material
bit create ng-module ui/material-button
bit create ng-env angular-material-env

Amend workspace.jsonc as shown in #35 so that components now use the angular-material-env:

/**
 * this is the main configuration file of your bit workspace.
 * for full documentation, please see: https://bit.dev/docs/workspace/workspace-configuration
 **/ {
  "$schema": "https://static.bit.dev/teambit/schemas/schema.json",
  /**
   * main configuration of the Bit workspace.
   **/
  "teambit.workspace/workspace": {
    /**
     * the name of the component workspace. used for development purposes.
     **/
    "name": "bit-angular-material",
    /**
     * 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": "company.scope"
  },
  /**
   * main configuration for component dependency resolution.
   **/
  "teambit.dependencies/dependency-resolver": {
    /**
     * choose the package manager for Bit to use. you can choose between 'yarn', 'pnpm'
     */
    "packageManager": "teambit.dependencies/yarn",
    "policy": {
      "dependencies": {
        "@teambit/angular": "1.1.7"
      },
      "peerDependencies": {}
    }
  },
  /**
   * workspace variants allow to set different subsets of configuration for components in your
   * workspace. this is extremely useful for upgrading, aligning and building components with a new
   * set of dependencies. a rule can be a directory or a component-id/namespace, in which case,
   * wrap the rule with curly brackets (e.g. `"{ui/*}": {}`)
   * see https://bit.dev/docs/workspace/variants for more info.
   **/
  "teambit.workspace/variants": {
    "angular-material-env": {
      "teambit.harmony/aspect": {}
    },
    "*": {
      "scope/angular-material-env": {}
    }
  },
  "teambit.angular/[email protected]": {},
  "teambit.generator/generator": {
    "aspects": [
      "scope/angular-material-env"
    ]
  }
}

Pull dependencies, run the server, and navigate to localhost:3000 to verify there are no issues:

bit install
bit start

Everything up to this point works as expected. All pages can be visited without problems.

Pull in Angular Material

First we determine the version of Angular uses under-the-hood by peeking at node_modules/@angular/core/package.json, where we see "version": "13.2.7". Unfortunately Material does not have this exact version, so instead we fall to 13.2.6 for everything.

To emulate the dependency portion of the ng add schematic, we run:

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

We assume that all other peer dependencies are met by parent aspect's dependencies (i.e. @angular/core), so we stop here. Since we now have access to Material modules, we change our scope/ui/material-button/material-button.module.ts component's contents to use some of them:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { MaterialButtonComponent } from './material-button.component';

@NgModule({
  declarations: [
    MaterialButtonComponent
  ],
  imports: [
    FormsModule,
    MatPaginatorModule,
    MatTableModule,
    MatFormFieldModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatProgressBarModule,
    MatSelectModule,
    MatDialogModule
  ],
  exports: [
    MaterialButtonComponent
  ]
})
export class MaterialButtonModule { }

We run the app again with bit start, navigate to the webapp, and encounter this error on viewing material-button:

Error: The injectable 'PlatformLocation' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

The injectable is part of a library that has been partially compiled.
However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.

Ideally, the library is processed using the Angular Linker to become fully AOT compiled.
Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.

▶ 4 stack frames were collapsed.

__webpack_require__
http://localhost:3000/preview/pillar.material/env/angular-material-env/static/js/main.bundle.js:609318:33
  609315 | /******/ 			var execOptions = { id: moduleId, module: module, factory: __webpack_modules__[moduleId], require: __webpack_require__ };
  609316 | /******/ 			__webpack_require__.i.forEach(function(handler) { handler(execOptions); });
  609317 | /******/ 			module = execOptions.module;
> 609318 | /******/ 			execOptions.factory.call(module.exports, module, module.exports, execOptions.require);
         |                    			          ^  609319 | /******/ 		} catch(e) {
  609320 | /******/ 			module.error = e;
  609321 | /******/ 			throw e;

We have tried some other steps as well:

Adding combinations of BrowserModule, BrowserAnimationsModule, and CommonModule to MaterialButtonModule
Leaving only @angular/material and @angular/cdk peerDependencies as animations and forms appear to already be pulled in to the base aspect (and thought maybe we were causing some sort of conflict)
Directly installing all additional dependencies for @angular/material with methods such as invoking: bit install @angular/[email protected] --add-missing-peers (we notice this installs some 14.x dependencies and manually changed them to 13.x with same result, as well)

All of these steps result in the same problem above.

This is the latest error we've gotten stuck on in the last week of trying to get Angular Material to work with Bit. We're really hoping for some guidance on this. Material seems like a popular design system for Angular components and we would love to have a working example as an entry point and to ensure Bit can support it.

Any advice is greatly appreciated in getting this working.

Versions used:

BVM: 0.1.1
Bit: 0.0.782
Angular aspect: 1.1.7

Automate docs generation

Use an OSS tool to generate API documentation to integrate into the preview, maybe something like Compodoc

DataToPersists expects component to be relative but found absolute

Environment:

Ubuntu 22.04
Bit version 0.0.833 (latest)

Tried on several angular versions:

[email protected]
[email protected]

bit status result:

when i do bit tag i get this error which blocks tagging of the modules:

bit start receives an error and stops whenever a file is updated

Hello,

In my environment, I am able to run bit start successfully. However, when I update any file in the project, instead of an active reload, bit throws an error and stops.

error:

uncaughtException [Error: EPERM: operation not permitted, lstat 'C:\Users\felie_herrera\Workspace\cloud-framework-components\testimony-angular-component\nod_modules\@dell\cloud_data_ops.components.testimony-card\dist\bundles\CY.TMP'] errno: -4048, code: 'EPERM', syscall: 'lstat', path: 'C:\\Users\\felipe_herrera\\Workspace\\cloud-framework-components\\tesimony-angular-component\\node_modules\\@dell\\cloud_data_ops.components.testimny-card\\dist\\bundles\\CY.TMP' }

bit version: 0.0.508
teambit.angular/[email protected]

I am using visual studio code and already tried updating a file with it closed by just using notepad but the error still occurred

Support Angular v13

The new alpha release for Angular v13 have been published, we should make sure that we have v13 support as soon as it's released later this year

Cannot read properties of undefined (reading 'aspectPath') when extending angular12 env

Hello,
I am trying to extend angularV12 env and create my own custom environment.
The following code works fine with bit v0.0.748 when running bit start

import * as path from 'path';
import { EnvsMain, EnvsAspect } from '@teambit/envs'
import { AngularV12Aspect, AngularV12Main } from '@teambit/angular-v12'
export class WebEnvExtension {

  static dependencies: any = [EnvsAspect, AngularV12Aspect]

  static async provider([envs, angular]: [EnvsMain, AngularV12Main]) {

    const compilerOptions = angular.overrideCompilerOptions({
      fullTemplateTypeCheck: false,
      strictPropertyInitialization: false
    });

    const angularOptions = angular.overrideAngularOptions({
      styles: [path.resolve('node_modules/@ntmnt/uikit.styles.core/index.scss')]
    });

    const WebEnvEnv = angular.compose([compilerOptions, angularOptions])
    envs.registerEnv(WebEnvEnv)

    return new WebEnvExtension()
  }
}

However it throws the following error with bit v0.0.814 when I run bit start

After some investigation I found out that EnvRuntime created via angular.compose mises envAspectDefinition property.

Please let me know if something has changed and I should extend my env in another way!

Also here is the part of my workspace.jsonc:

{
...,
"teambit.dependencies/dependency-resolver": {
    "packageManager": "teambit.dependencies/yarn",
    "policy": {
      "dependencies": {
        "@teambit/angular-v12": "1.2.4",
        "@angular/cdk": "12.2.13",
        "angular2-text-mask": "9.0.0",
        "text-mask-addons": "3.8.0"
      },
      "peerDependencies": {}
    }
  },
  "teambit.workspace/variants": {
    "*": {
      "ntmnt.uikit/envs/web-env": {}
    }
  },
  "teambit.angular/versions/[email protected]": {},
  "teambit.generator/generator": {
    "aspects": [
      "ntmnt.uikit/envs/web-env"
    ]
  }
}

Compositions fail to render

It seems compositions are failing to render

I am using Angular 12.1.3

import { Component } from '@angular/core';

@Component({
  selector: 'bit-composition',
  template: `
      <p>
        Composition component 1
      </p>
        `,
  styles: [
  ]
})
export class StandaloneCompositionComponent {
}

But I get an error when going to bit compositions

"Failed to Render"

Add documentation for Angular on bit.dev harmony docs

Update readme to add teambit.angular dependency

What is the Issue

The readme does not recommend users to add the teambit.angular dependency which results in compilation errors.

bit build fails for lack of typescriot

When executing bit built ot bit tag, the following error occur:

I had tried the following without any luck:
bit install typecript
bit install -u typecript
bit link typecript

bit version: 0.0.577
Angular CLI: 12.2.13
Node: 14.18.2
Package Manager: npm 6.14.15

Support component.jsonc config files

For options that are specific to one component, we shouldn't require a new custom env (custom env make sense when they are used for multiple components). Custom env are linked to a specific workspace and are not automatically imported when you import a specific component.
This would for example allow users to set specific global scripts and styles for all of the compositions.

The options should be similar to what we can find in angular.json files.

Cannot find module '@angular/material/button/package.json'

It seems I can't use the modules that Angular Material provides for some reason.

bit version 0.0.469

//workspace.jsonc
...
  "policy": {
      "dependencies": {
        "@angular/material": "12.1.3"
      },
      "peerDependencies": {}
    },
...
"teambit.angular/[email protected]": {},
  "teambit.workspace/variants": {
    "*": {
      // Replace `v12` by the version of Angular that you want to use
      "teambit.angular/[email protected]": {}
    }
  },
  "teambit.generator/generator": {
    "aspects": [
      // Replace `v12` by the version of Angular that you want to use
      "teambit.angular/[email protected]"
    ]
  }

button.module.ts

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { ButtonComponent } from './button.component';

@NgModule({
  declarations: [
    ButtonComponent
  ],
  imports: [MatButtonModule],
  exports: [
    ButtonComponent
  ]
})
export class ButtonModule {}

Error

I get this error after bit compile and bit install

My package.json does have @angular/material": "^12.1.3", listed and installed

Support module federation

Any variable change in component ts file doesn't reflect in component html

Hi @ocombe, Any changes to variable in component ts file doesn't reflect in component html/UI unless some button or dropdows are clicked, This may be issue with change detection, Please help resolve this issue at the earliest

Simplified Component Example Not Working With CommonModule

I am migrating all our internal directives from NPM to Bit.

When I reference [ngClass] from the CommonModule in a template, I am getting an error in the "teambit.preview/preview:GeneratePreview" build task (env "teambit.angular/[email protected]").

Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IASelectComponent } from './component';

@NgModule({
	declarations: [IASelectComponent],
	imports: [CommonModule],
	exports: [IASelectComponent],
})
export class IASelectModule {}

Component Template

template: `
	<h1 [ngClass]="{ active: true }">Testing</h1>
`

workspace.jsonc

"teambit.dependencies/dependency-resolver": {
	"packageManager": "teambit.dependencies/pnpm",
	"policy": {}
}

bit show select/option

id: interface-agency.directives/select/[email protected]
scope: interface-agency.directives
name: select/option
env: teambit.angular/[email protected]
deprecated: false
package name: @interface-agency/directives.select.option
main file: public-api.ts
files: public:
  -api.ts
  - src/component.ts
  - src/docs.md
  - src/module.ts
  - src/test.composition.ts
  
dev files: 
  - src/test.composition.ts (teambit.compositions/compositions)
  
extensions:
  - teambit.angular/[email protected]                          
  - teambit.component/dev-files                                
  - teambit.compositions/compositions                    
  - teambit.pkg/pkg                                             
  - teambit.docs/docs                                         
  - teambit.envs/envs                                           
  - teambit.dependencies/dependency-resolver                 
  - teambit.pipelines/builder                                  

dependencies:
  - @angular/[email protected] (package)                           
  - tslib@^2.3.0---------- (package)    
                       
dev dependencies:
  - @teambit/[email protected] (component)                  
  - @angular/[email protected] (package)                    
  - jest-preset-angular@~11.0.1--- (package)                    
  - jest@^27.4.4------------------ (package)                    
  - @types/node@^12.11.1---------- (package)                    
  - @types/jest@^27.0.3----------- (package)                    
  - @angular/compiler-cli@~13.1.1- (package)                    
  - @angular/compiler@~13.1.1----- (package)                    

peer dependencies:
  - typescript@~4.5.2------------------------- (package)        
  - zone.js@~0.11.4--------------------------- (package)        
  - rxjs@~7.4.0------------------------------- (package)        
  - @angular/platform-browser-dynamic@~13.1.1- (package)        
  - @angular/platform-browser@~13.1.1--------- (package)        
  - @angular/common@~13.1.1------------------- (package)

bit clear-cache
bit install 👍
bit compile 👍
bit start 👍
bit tag select/option --log 👎

bvm version: 0.0.30
bit version: 0.0.603
Angular version: [email protected]
node: v16.10.0

component: interface-agency.directives/select/[email protected]

✖ Total 6 tasks. 5 succeeded. 1 failed. 0 skipped. Total errors: 8.
    at TaskResultsList.throwErrorsIfExist (/Users/jj/.bvm/versions/0.0.603/bit-0.0.603/node_modules/@teambit/builder/dist/task-results-list.js:62:13)
    at BuilderMain.tagListener (/Users/jj/.bvm/versions/0.0.603/bit-0.0.603/node_modules/@teambit/builder/dist/builder.main.runtime.js:308:60)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async legacyOnTagFunc (/Users/jj/.bvm/versions/0.0.603/bit-0.0.603/node_modules/@teambit/scope/dist/scope.main.runtime.js:502:11)
    at async pMapSeries (/Users/jj/.bvm/versions/0.0.603/bit-0.0.603/node_modules/p-map-series/index.js:9:15)
    at async tagModelComponent (/Users/jj/.bvm/versions/0.0.603/bit-0.0.603/node_modules/@teambit/legacy/dist/scope/component-ops/tag-model-component.js:498:21)
    at async Consumer.tag (/Users/jj/.bvm/versions/0.0.603/bit-0.0.603/node_modules/@teambit/legacy/dist/consumer/consumer.js:1024:9)
    at async tagAction (/Users/jj/.bvm/versions/0.0.603/bit-0.0.603/node_modules/@teambit/legacy/dist/api/consumer/lib/tag.js:209:22)
    at async Tag.report (/Users/jj/.bvm/versions/0.0.603/bit-0.0.603/node_modules/@teambit/workspace/dist/tag-cmd.js:221:21)
    at async CommandRunner.runReportHandler (/Users/jj/.bvm/versions/0.0.603/bit-0.0.603/node_modules/@teambit/cli/dist/command-runner.js:214:20)
    at async CommandRunner.runCommand (/Users/jj/.bvm/versions/0.0.603/bit-0.0.603/node_modules/@teambit/cli/dist/command-runner.js:142:16)
user gets the following error: 
The following errors were found while running the build pipeline
Failed task 1: "teambit.preview/preview:GeneratePreview" of env "teambit.angular/[email protected]"
component: interface-agency.directives/select/[email protected]
Module build failed (from ../../node_modules/.pnpm/registry.npmjs.org+@[email protected]_08e2bc1fe65a4145f6802de023172619/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Symbol CommonModule declared in /Users/jj/Library/Caches/Bit/capsules/c972a01e96c64f7297053d3e723ba557e52f2a3f/node_modules/.pnpm/registry.npmjs.org+@[email protected]_@[email protected][email protected]/node_modules/@angular/common/common.d.ts is not exported from @angular/common (import into /Users/jj/Library/Caches/Bit/capsules/c972a01e96c64f7297053d3e723ba557e52f2a3f/[email protected]/src/module.ts)
    at /Users/jj/Library/Caches/Bit/capsules/ef633dd53bb7108ce727a028846604bfc4e2a63b/node_modules/.pnpm/registry.npmjs.org+@[email protected]_08e2bc1fe65a4145f6802de023172619/node_modules/@ngtools/webpack/src/ivy/loader.js:77:18
Module build failed (from ../../node_modules/.pnpm/registry.npmjs.org+@[email protected]_08e2bc1fe65a4145f6802de023172619/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Symbol CommonModule declared in /Users/jj/Library/Caches/Bit/capsules/c972a01e96c64f7297053d3e723ba557e52f2a3f/node_modules/.pnpm/registry.npmjs.org+@[email protected]_@[email protected][email protected]/node_modules/@angular/common/common.d.ts is not exported from @angular/common (import into /Users/jj/Library/Caches/Bit/capsules/c972a01e96c64f7297053d3e723ba557e52f2a3f/[email protected]/src/module.ts)
    at /Users/jj/Library/Caches/Bit/capsules/ef633dd53bb7108ce727a028846604bfc4e2a63b/node_modules/.pnpm/registry.npmjs.org+@[email protected]_08e2bc1fe65a4145f6802de023172619/node_modules/@ngtools/webpack/src/ivy/loader.js:77:18
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
Module build failed (from ../../node_modules/.pnpm/registry.npmjs.org+@[email protected]_08e2bc1fe65a4145f6802de023172619/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Symbol CommonModule declared in /Users/jj/Library/Caches/Bit/capsules/c972a01e96c64f7297053d3e723ba557e52f2a3f/node_modules/.pnpm/registry.npmjs.org+@[email protected]_@[email protected][email protected]/node_modules/@angular/common/common.d.ts is not exported from @angular/common (import into /Users/jj/Library/Caches/Bit/capsules/c972a01e96c64f7297053d3e723ba557e52f2a3f/[email protected]/src/module.ts)
    at /Users/jj/Library/Caches/Bit/capsules/ef633dd53bb7108ce727a028846604bfc4e2a63b/node_modules/.pnpm/registry.npmjs.org+@[email protected]_08e2bc1fe65a4145f6802de023172619/node_modules/@ngtools/webpack/src/ivy/loader.js:77:18
Module build failed (from ../../node_modules/.pnpm/registry.npmjs.org+@[email protected]_08e2bc1fe65a4145f6802de023172619/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Symbol CommonModule declared in /Users/jj/Library/Caches/Bit/capsules/c972a01e96c64f7297053d3e723ba557e52f2a3f/node_modules/.pnpm/registry.npmjs.org+@[email protected]_@[email protected][email protected]/node_modules/@angular/common/common.d.ts is not exported from @angular/common (import into /Users/jj/Library/Caches/Bit/capsules/c972a01e96c64f7297053d3e723ba557e52f2a3f/[email protected]/src/module.ts)
    at /Users/jj/Library/Caches/Bit/capsules/ef633dd53bb7108ce727a028846604bfc4e2a63b/node_modules/.pnpm/registry.npmjs.org+@[email protected]_08e2bc1fe65a4145f6802de023172619/node_modules/@ngtools/webpack/src/ivy/loader.js:77:18
Module build failed (from ../../node_modules/.pnpm/registry.npmjs.org+@[email protected]_08e2bc1fe65a4145f6802de023172619/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Symbol CommonModule declared in /Users/jj/Library/Caches/Bit/capsules/c972a01e96c64f7297053d3e723ba557e52f2a3f/node_modules/.pnpm/registry.npmjs.org+@[email protected]_@[email protected][email protected]/node_modules/@angular/common/common.d.ts is not exported from @angular/common (import into /Users/jj/Library/Caches/Bit/capsules/c972a01e96c64f7297053d3e723ba557e52f2a3f/[email protected]/src/module.ts)
    at /Users/jj/Library/Caches/Bit/capsules/ef633dd53bb7108ce727a028846604bfc4e2a63b/node_modules/.pnpm/registry.npmjs.org+@[email protected]_08e2bc1fe65a4145f6802de023172619/node_modules/@ngtools/webpack/src/ivy/loader.js:77:18
Module build failed (from ../../node_modules/.pnpm/registry.npmjs.org+@[email protected]_08e2bc1fe65a4145f6802de023172619/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Symbol CommonModule declared in /Users/jj/Library/Caches/Bit/capsules/c972a01e96c64f7297053d3e723ba557e52f2a3f/node_modules/.pnpm/registry.npmjs.org+@[email protected]_@[email protected][email protected]/node_modules/@angular/common/common.d.ts is not exported from @angular/common (import into /Users/jj/Library/Caches/Bit/capsules/c972a01e96c64f7297053d3e723ba557e52f2a3f/[email protected]/src/module.ts)
    at /Users/jj/Library/Caches/Bit/capsules/ef633dd53bb7108ce727a028846604bfc4e2a63b/node_modules/.pnpm/registry.npmjs.org+@[email protected]_08e2bc1fe65a4145f6802de023172619/node_modules/@ngtools/webpack/src/ivy/loader.js:77:18
Module build failed (from ../../node_modules/.pnpm/registry.npmjs.org+@[email protected]_08e2bc1fe65a4145f6802de023172619/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Symbol CommonModule declared in /Users/jj/Library/Caches/Bit/capsules/c972a01e96c64f7297053d3e723ba557e52f2a3f/node_modules/.pnpm/registry.npmjs.org+@[email protected]_@[email protected][email protected]/node_modules/@angular/common/common.d.ts is not exported from @angular/common (import into /Users/jj/Library/Caches/Bit/capsules/c972a01e96c64f7297053d3e723ba557e52f2a3f/[email protected]/src/module.ts)
    at /Users/jj/Library/Caches/Bit/capsules/ef633dd53bb7108ce727a028846604bfc4e2a63b/node_modules/.pnpm/registry.npmjs.org+@[email protected]_08e2bc1fe65a4145f6802de023172619/node_modules/@ngtools/webpack/src/ivy/loader.js:77:18
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
Module build failed (from ../../node_modules/.pnpm/registry.npmjs.org+@[email protected]_08e2bc1fe65a4145f6802de023172619/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Symbol CommonModule declared in /Users/jj/Library/Caches/Bit/capsules/c972a01e96c64f7297053d3e723ba557e52f2a3f/node_modules/.pnpm/registry.npmjs.org+@[email protected]_@[email protected][email protected]/node_modules/@angular/common/common.d.ts is not exported from @angular/common (import into /Users/jj/Library/Caches/Bit/capsules/c972a01e96c64f7297053d3e723ba557e52f2a3f/[email protected]/src/module.ts)
    at /Users/jj/Library/Caches/Bit/capsules/ef633dd53bb7108ce727a028846604bfc4e2a63b/node_modules/.pnpm/registry.npmjs.org+@[email protected]_08e2bc1fe65a4145f6802de023172619/node_modules/@ngtools/webpack/src/ivy/loader.js:77:18
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Found 8 errors in 1 components


✖ Total 6 tasks. 5 succeeded. 1 failed. 0 skipped. Total errors: 8.

Noticed that in the v13 example, there aren't any directives from the CommonModule being used.

Let me know if there is anything I can do to help! TY

Multiple warnings on bit start

When writing the simplest compositions, multiple warnings appear on the bit start console

But the browser console is clear from errors or warnnings:

Simplify usage of external aspects

We should be able to simplify the configuration in workspace.jsonc:

look into existing envs for templates (remove the need to add a config for templates)
use latest version of an env by default (remove the need to specify a version)

Cannot tag/build component when importing nested bit components

Hello, thought it is probably related to bit-angular env, so writing here, instead of main bit repo.

Describe the bug

I have 3 angular bit components: spinner, n-button, n-user-verification.
When I am using spinner inside n-button components are tagged successfully.
But when I am trying to tag n-user-verification which uses n-button I see the following error:
Appears in the NgModule.imports of NButtonModule, but could not be resolved to an NgModule class..

bit start works as expected though.

Steps to Reproduce

Create 2 angular v12 components (using bit create ng-module ...)
Import one component into another.
Create third angularV12 bit component and import 2 components in it.

Expected Behavior

Components with nested bit components should be tagged after running bit tag

Screenshots, exceptions and logs

Screenshot of the error:

Screenshot of imported components and module:

Custom env that I use:

import * as path from 'path';
import { EnvsMain, EnvsAspect } from '@teambit/envs'
import { AngularV12Aspect, AngularV12Main } from '@teambit/angular-v12'
export class WebEnvExtension {
  constructor(private angular: AngularV12Main) {}

  static dependencies: any = [EnvsAspect, AngularV12Aspect]

  static async provider([envs, angular]: [EnvsMain, AngularV12Main]) {
    const compilerOptions = await angular.overrideCompilerOptions({
      fullTemplateTypeCheck: false,
      strictPropertyInitialization: false
    });

    const angularOptions = await angular.overrideAngularOptions({
      styles: [path.resolve('node_modules/@ntmnt/uikit.styles.core/index.scss')]
    });

    const WebEnvEnv = angular.compose([compilerOptions, angularOptions])
    envs.registerEnv(WebEnvEnv)

    return new WebEnvExtension(angular)
  }
}

Specifications

Bit version: 0.0.748
Workspace type: harmony
Node version: 14.19.1
npm / yarn version: 6.14.6
Platform: osx

for harmony workspace

custom env based on teambit/angular-v12

Additional context

Interesting that bit start works just fine.

teambit / bit-angular Goto Github PK

bit-angular's Introduction

Bit Angular

Build components first.

What is Bit Angular?

How to Start?

Resources & Community

Contributing 🎗️

License 💮

bit-angular's People

Contributors

Stargazers

Watchers

Forkers

bit-angular's Issues

Envrionment:

Steps to reproduce:

Error:

Background

Procedure

Set up Bit workspace

Pull in Angular Material

What is the Issue

Error

Describe the bug

Steps to Reproduce

Expected Behavior

Screenshots, exceptions and logs

Specifications

Additional context

Recommend Projects

Recommend Topics

Recommend Org