angular-setup

20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Carbon Angular packages to install

To work with Carbon in Angular, install three packages: carbon-components (component styles), carbon-components-angular (Angular components), and @carbon/icons (Carbon icons). Install them with: npm install carbon-components carbon-components-angular @carbon/icons

Import Carbon styles in Angular

In src/styles.scss, import Carbon component styles by adding the following line to the top of the file: @import '~carbon-components/scss/globals/scss/styles';

Angular CLI version requirement

Angular CLI Version 8.x is required to work through the Carbon Angular tutorial.

Vue community framework support status

The Carbon Design System is built with official support for React and Web Components. Community support exists for other frameworks including Vue, Angular, Svelte, and Lightning Web Components.

Vue library maintenance and support

The Vue library is maintained by members of the Carbon community. Support is available through the Carbon Vue team GitHub issues page.

Install Carbon Vue package

Run 'npm install @carbon/vue' to install the Carbon Components Vue library.

Carbon Vue setup in main.js

In src/main.js, after importing App from './App.vue', add: import 'carbon-components/css/carbon-components.css'; import CarbonComponentsVue from '@carbon/vue'; const app = createApp(App); app.use(CarbonComponentsVue); app.mount('#app');

Complete Vue example component setup

A complete example component using Carbon Vue includes: script setup with ref imports for state management, cv-text-input component with v-model binding, cv-button with click handler, and cv-modal component with visible state binding and modal-hidden event handler for closing the modal.

Carbon Vue component availability and documentation

Available Vue components are viewable at vue.carbondesignsystem.com. Usage information is available in the notes provided with each story in the Storybook.

Recommended Carbon Vue setup approach

The recommended setup combines Vue CLI with carbon-components scss. An alternative complete example app is available at github.com/IBM/hello-carbon-vue3.

Carbon Vue resources and getting started

Resources available include: Carbon Components Vue Storybook at vue.carbondesignsystem.com, CodeSandbox playground at codesandbox.io/s/5zk452o9jp for trying Vue components, and Carbon Vue tutorial in the documentation.

Fix yarn lockfile missing error in React tutorial

When getting a 'yarn lockfile missing' error, the yarn.lock file is either missing or differs from the one used in the tutorial step. To fix this, go to the GitHub branch for the step you are on, find the yarn.lock file, and copy that file into your working directory. You may need to delete your node_modules folder and run yarn afterwards.

Fix yarn offline cache error in React tutorial

When getting a 'yarn offline cache' error, try running the command: rm -rf .yarn-offline-mirror node_modules && yarn cache clean && yarn install, then push up any changes. If this still does not work, ensure your yarn.lock file matches the one at the start of the tutorial step.

Show tutorial completion status with approved PRs

Proof of tutorial completion can be seen by filtering the PR list to show five PRs with the 'status: approved' label. Filter the pull request list at https://github.com/carbon-design-system/carbon-tutorial-nextjs/pulls?q=author%3AYOURUSERNAMEHERE by replacing YOURUSERNAMEHERE with your username. Completion can also be demonstrated by deploying your app.

Carbon Next.js tutorial repository

The Carbon tutorial has an accompanying GitHub repository called carbon-tutorial-nextjs that serves as the starting point for each step. It is located at https://github.com/carbon-design-system/carbon-design-system/carbon-tutorial-nextjs.

Step 5 branch checkout command

To start step 5 of the tutorial, run: git fetch upstream followed by git checkout -b v11-next-step-5 upstream/v11-next-step-5. The upstream step 5 branch includes static assets required for this step.

Install dependencies for Carbon Next.js tutorial

Run yarn to install the app's dependencies in the carbon-tutorial-nextjs repository.

Start development server for Carbon Next.js tutorial

Run yarn dev to start the development server for the Carbon Next.js tutorial.

Build for production in Carbon Next.js tutorial

Run yarn build to create an optimized production build. The yarn build command runs next build, which bundles Next.js in production mode, optimizes for best performance, minifies files, and includes hashes in filenames for caching.

Production deployment options for Carbon Next.js app

The Carbon Next.js tutorial application can be deployed to Vercel, IBM Cloud, or GitHub Pages.

Give your agent this brain