teambit / bit-angular Goto Github PK
View Code? Open in Web Editor NEWAngular support for bit harmony
Angular support for bit harmony
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.
Leverage Angular CLI commands through bit (things like generate
, extract
, ...)
Use an OSS tool to generate API documentation to integrate into the preview, maybe something like Compodoc
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.
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
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
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"
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
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.
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
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.
Hello, there seems to be an issue with tagging when there is multiple components that depends on each other in the same workspace.
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]
bit create ng-module card
bit create ng-module 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 {}
Environment:
Error:
Steps:
bit capsule delete --all
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
Environment:
Tried on several angular versions:
when i do bit tag
i get this error which blocks tagging of the modules:
bit new
creates a new workspace configured with a specific env. We need to add one for Angular.
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
The readme does not recommend users to add the teambit.angular dependency which results in compilation errors.
Suggested Solution
Add
"teambit.dependencies/dependency-resolver": {
/**
* choose the package manager for Bit to use. you can choose between 'yarn', 'pnpm'
*/
"packageManager": "teambit.dependencies/pnpm",
"policy": {
"dependencies": {
"@teambit/angular-v13": "0.0.19"
},
"peerDependencies": {}
},
"nodeLinker": "hoisted"
},
to the workspace.jsonc example in readme
Create angular components based on bit documenter & harmony base ui to style docs
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.
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)
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
Hot reloading in bit start doesn't reload the docs & compositions
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:
Current implementation uses angular v12, though it is deprecated, according to the docs.
Could you please update the example?
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
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.
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 {}
I get this error after bit compile
and bit install
My package.json
does have @angular/material": "^12.1.3",
listed and installed
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
We should be able to simplify the configuration in workspace.jsonc:
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
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"
]
}
}
Hello, thought it is probably related to bit-angular env, so writing here, instead of main bit
repo.
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.
bit create ng-module ...
)Components with nested bit components should be tagged after running bit tag
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)
}
}
for harmony workspace
Interesting that bit start
works just fine.
Right now the existing Github action only tests v12, we need to test other versions as well
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?
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
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:
BrowserAnimationsModule
into root module from @angular/platform-browser/animations
if animations are to be used (we prefer 'yes')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):
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.
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.
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:
BrowserModule
, BrowserAnimationsModule
, and CommonModule
to MaterialButtonModule@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)@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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.