carbon-design-system / carbon-tutorial-angular Goto Github PK

Many libraries aren't working fine, particularly @carbon/icons. Styling isn't being implied to the app.

I was wondering about branch angular-step-1.
Its empty? It's right?

Thanks

In the step 1 of carbon-tutorial-angular, I try to fetch starter remote and the system throw a error.
git fetch starter

git : Host key verification failed.
At line:1 char:1

• git fetch starter

•   + CategoryInfo          : NotSpecified: (Host key verification failed.:String) [], RemoteException
    + FullyQualifiedErrorId : NativeCommandError
  
  

fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.

How can I address this issue?

In the step where we create overrides the text mentions Create a file carbon-overrides.scss in src/assets/scss with this declaration block.

however the code block below shows the file path as
src/assets/carbon-overrides.scss

I don't have access to the project, the content is almost empty in https://github.com/carbon-design-system/carbon-tutorial-angular

I had some issue checking in step 1, so I had to go through step 2 and step 2 went fine.
So I did pretty much the same as step 2 (i.e. check out the step 1 branch) then updated with my previously saved step 1 work.
Running "npm test" passes all the tests but when I create a PR it's running this CircleCI stuff while Summary is fine.

How can we get rid of this ci/circleci build which I don't see it running for those successful ones for step 1?
Step 1 instruction should be updated to be more clear on "carbon-tutorial-angular" and "carbon-angular-tutorial" such are they suppose to be peer? or sub-directory of one and etc. I tried starting from fetching step 1 branch once I verified the "git remote -v" gives the right setting, but still having issue.

My pull request is failing the circle ci check as it's missing this script. where can I find this?

i am sure that my code runs when i run npm test command and npm start and my project's url is exactly the same as the preview URL but still the cicircle tests fail whenever i create a pull request and i don't know where exactly is the error

When you fork the repository the .yml config file has a command npm run test:once.
This command is not any which Angular brought by default when you scaffold a project with the CLI... the approved PRs on the step 1 has not the circleCI pipeline, that's why these are approved.

Hi
when I try to push origin angular-step-1 to my repository I get this error
remote: Permission to carbon-design-system/carbon-tutorial-angular.git denied to Vladimir082. fatal: unable to access 'https://github.com/carbon-design-system/carbon-tutorial-angular.git/': The requested URL returned error: 403

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/compiler
npm ERR!   @angular/compiler@"~12.0.4" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0" from @carbon/[email protected]
npm ERR! node_modules/@carbon/icons-angular

Are there any plans to make this library compatible with Angular12?

I am facing the below issue on my Mac while pushing the code using the below command
git push origin angular-step-1

Permission to carbon-design-system/carbon-tutorial-angular.git denied to %username%.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

I was having a lot of problems with step 3.
And I restarted this step again.

On the beginning of fetch upstream step 3 it brings app.component.spect.ts file with:

"import { TutorialHeaderModule } from './tutorial-header/tutorial-header.module';"

when I run npm test it logs with "ERROR in app/app.component.spec.ts:5:38 - error TS2307: Cannot find module './tutorial-header/tutorial-header.module'."

Had to resolve ng test error after completing Step 2 in the tutorial.

The tutorial steps do not mention adding:

1. import { TableModule } from 'carbon-components-angular'; to the file head
2. imports: [ TableModule ] to the TestBed declaration

These steps should be added to Build repo page tutorial steps.

Hello team,

I'm learning Carbon design system using Angular Js. Downloaded the code using below link:

https://github.com/sushmithapaila/carbon-components-angular

I got errors when I run rpm install. Attached the errors file
2020-12-29T10_26_37_535Z-debug.log

Making an issue for myself to track progress

• dev mode in prod
• https://angular-step-6-carbon-tutorial.netlify.com/repos not loading
• https://angular-step-6-carbon-tutorial.netlify.com/repos not direct linkable
• possible style discrepancies

I use Angular 16.2.10 and "carbon-components-angular": "^5.20.3",

When AppModule import TableModel

Error: src/app/app.module.ts:51:3 - error NG6002: 'TableModel' does not appear to be an NgModule class.

51 TableModel,
~~~~~~~~~~

node_modules/carbon-components-angular/table/table-model.class.d.ts:44:22
44 export declare class TableModel implements PaginationModel {
~~~~~~~~~~
This likely means that the library (carbon-components-angular) which declares TableModel is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

@cal-smith @mattrosno @jeffchew @kennylam @Ratheeshrajan

For example:

<svg icon ibmIconNotification20></svg>

Should be:
<svg ibmIconNotification size="20"></svg>

I faced the below error while trying to push local code.

remote: Permission to carbon-design-system/carbon-tutorial-angular.git denied to eprashantmurthy.
fatal: unable to access 'https://github.com/carbon-design-system/carbon-tutorial-angular.git/': The requested URL returned error: 403

What can I do to address this issue?

The solution for resolving the non-fast-forward error in Carbon Tutorial Angular Step 1 is incorrect or misleading.

The user must git push origin angular-step-1 --force, other wise following the git pull upstream angular-step-1 will delete all files in your local angular-step-1 branch and leave you in a angular-step-1|MERGE (resolve conflict) state that contains no conflicts to resolve.

I have the following code:
<ibm-combo-box label="ItemsName" [(items)]="items" placeholder="TestSelect item..." (selected)="selectedItem($event.item)" class="card-form-combobox"> <ibm-dropdown-list></ibm-dropdown-list> </ibm-combo-box>

I am trying to add a on hover effect to show the full name of the item in ibm-dropdown-list in a tooltip like message box (balloon)

Hi After importing UI shell and pages on running npm start I get the following errors

`ERROR in Failed to compile entry-point carbon-components-angular (main as commonjs) due to compilation errors:
node_modules/carbon-components-angular/accordion/accordion.component.js:59:52 - error NG1010: @ContentChildren predicate cannot be interpreted

59         children: [{ type: ContentChildren, args: [AccordionItem,] }],`

In the Step 4 tutorial, it does not instruct you to compile and run. It directly gets you to commit and push. I however wanted to see how it looks when run. But it did not. It did build without any errors, but when run, on the dev console, I saw errors regarding ...

<ibm-icon-person-favorite32></ibm-icon-person-favorite32>, <ibm-icon-application32></ibm-icon-application32>, and <ibm-icon-globe32></ibm-icon-globe32> not being recognized as elements.

What I did, I did in home.module.ts alone. I added all these components in the right place.

Here's what I did...

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { InfoModule } from "./../info/info.module";
import { HomeRoutingModule } from './home-routing.module';
import { InfoCardComponent } from './../info/info-card/info-card.component';
import { PersonFavorite32Module } from "@carbon/icons-angular/lib/person--favorite/32";
import { Globe32Module } from "@carbon/icons-angular/lib/globe/32";
import { Application32Module } from "@carbon/icons-angular/lib/application/32";

import {
	BreadcrumbModule,
	ButtonModule,
	GridModule,
	TabsModule
} from 'carbon-components-angular';

@NgModule({
	declarations: [LandingPageComponent],
	imports: [
		CommonModule,
		HomeRoutingModule,
		BreadcrumbModule,
		ButtonModule,
		GridModule,
		TabsModule,
                InfoModule,
		PersonFavorite32Module,
		Globe32Module,
		Application32Module
	]
})
export class HomeModule { }

Hope this helps!

I tried generating multiple access tokens but still getting issues with authentication. The issues are as follows:

                                   POST https://api.github.com/graphql 502 (Bad Gateway)

I tried the ApolloStudio, even there I got this message:
Your API responded with a 401 status code. You may need to specify auth headers to introspect your schema.Hide details
{ "message": "This endpoint requires you to be authenticated.", "documentation_url": "https://docs.github.com/graphql/guides/forming-calls-with-graphql#authenticating-with-graphql" }

Tried authentications: "Fine-grained personal access tokens" and "Personal access tokens (classic)".

Someone, please help

Hi there,

Thank you for your interest in Hacktoberfest and in helping others make their first contributions to open source.

While we agree that it's important to help others, this repository does not do this in a way that is in line with the Hacktoberfest values. Please read the part that talks about high-quality contributions to understand why we are reaching out and taking action. Due to this, we've added this repository to the list of excluded repositories which means pull requests here will not count toward Hacktoberfest 2020.

This is not a DigitalOcean decision, it's one that is inspired by the community of maintainers and contributors who all agree that quality is more important than quantity when it comes to engagement in the Open Source community. The values remind us to shift the focus from contributions to repositories that encourage folks to quickly create and gain a pull request to contributions that will help people level-up their skills and contribute to open-source projects that are in need of help.

If you feel that this repository is an effective learning resource, we encourage you to keep running it since a core part of the aim for Hacktoberfest is to encourage new folks to get involved with open-source.

However, if you are interested in having contributions to this repo count toward Hacktoberfest we encourage you to take a look at this list of Hacktoberfest issues for inspiration and make the necessary changes to focus on enabling people to make meaningful contributions to open source projects.

If you have any questions about this or participating in Hacktoberfest, please contact our team via email [email protected] or join our community Discord server.

Happy Hacking,
The Hacktoberfest Team

Hacktoberfest is presented by DigitalOcean, Intel and DEV.

I am trying to get the

badge for Carbon Angular , but when I start the step 3 and install the Angula Apollo the application crashes. I have made both corrections anticipated by the team but the problem is still there, There is still something wrong with this code.

There is a default padding on the main tag class bx--content of 32px, preventing all child elements from covering / expanding to the full width of the screen.

Solution to align with design spec, override bx-content padding to 0 in styles.scss:

.bx--content {
  padding: 0;
}

I created this ticket to help fellow coders/learners with the issues I faced with completing step 3.

Many of you may not face any such issue depending on the version of node, angular, and other packages, so first thing first, here's my package.json.

node --version
v14.14.0

npm -version
6.14.8

package.json

{
  "name": "carbon-angular-starter",
  "version": "0.1.0",
  "license": "",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --aot",
    "test": "ng test",
    "test:once": "ng test --watch=false",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "engines": {
    "node": ">= 10.9"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.2.0",
    "@angular/common": "^8.2.0",
    "@angular/compiler": "^8.2.0",
    "@angular/core": "^8.2.0",
    "@angular/forms": "^8.2.0",
    "@angular/platform-browser": "^8.2.0",
    "@angular/platform-browser-dynamic": "^8.2.0",
    "@angular/router": "^8.2.0",
    "@carbon/icons-angular": "^10.4.0",
    "apollo-angular": "^2.0.4",
    "carbon-components": "^10.7.0",
    "carbon-components-angular": "^3.21.2",
    "core-js": "^2.5.2",
    "rxjs": "^6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1",
    "@apollo/client": "^3.0.0",
    "graphql": "^15.0.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.802.1",
    "@angular/cli": "^8.2.1",
    "@angular/compiler-cli": "^8.2.0",
    "@types/graphql": "^14.5.0",
    "@types/jasmine": "^2.8.2",
    "@types/node": "~8.0.53",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "2.0.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "node-sass": "^4.12.0",
    "postcss-loader": "3.0.0",
    "protractor": "^5.4.2",
    "ts-node": "~8.0.3",
    "tslint": "^5.15.0",
    "typescript": "3.5.3"
  }
}

1. The first issue I faced was with the following few errors, in no particular order. The code won't build.

ERROR in ../node_modules/@apollo/client/core/ObservableQuery.d.ts:22:9 - error TS1086: An accessor cannot be declared in an ambient context.

22     get variables(): TVariables | undefined;
           ~~~~~~~~~
../node_modules/@apollo/client/utilities/observables/Observable.d.ts:1:8 - error TS1259: Module '"/Users/pooshonbanerjee/Documents/Pooshon/IBM Projects/2020/IBM Carbon Design - Angular/carbon-tutorial-angular/node_modules/@types/zen-observable/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

1 import Observable from 'zen-observable';
         ~~~~~~~~~~

  ../node_modules/@types/zen-observable/index.d.ts:69:1
    69 export = Observable;
       ~~~~~~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
../node_modules/apollo-angular/apollo.d.ts:32:9 - error TS1086: An accessor cannot be declared in an ambient context.

32     get client(): ApolloClient<TCacheShape>;
           ~~~~~~
../node_modules/apollo-angular/apollo.d.ts:39:9 - error TS1086: An accessor cannot be declared in an ambient context.

39     set client(client: ApolloClient<TCacheShape>);
           ~~~~~~
../node_modules/graphql/subscription/subscribe.d.ts:41:12 - error TS2304: Cannot find name 'AsyncIterableIterator'.

41 ): Promise<AsyncIterableIterator<ExecutionResult> | ExecutionResult>;
              ~~~~~~~~~~~~~~~~~~~~~
../node_modules/graphql/subscription/subscribe.d.ts:52:12 - error TS2304: Cannot find name 'AsyncIterableIterator'.

52 ): Promise<AsyncIterableIterator<ExecutionResult> | ExecutionResult>;
              ~~~~~~~~~~~~~~~~~~~~~
../node_modules/graphql/subscription/subscribe.d.ts:80:12 - error TS2304: Cannot find name 'AsyncIterable'.

80 ): Promise<AsyncIterable<any> | ExecutionResult>;
              ~~~~~~~~~~~~~

To solve this you have to modify the typings.d.ts file like it said on the tutorial for step 3, by commenting the module variable declaration.

But the next part about modifying tsconfig.json doesn't work since angular cli >= 7 ignores that file, so instead you have to make the following changes in the tsconfig.app.json.

allowSyntheticDefaultImports, esModuleInterop, strictNullChecks, skipLibCheck, esnext.asynciterable

{
	"compilerOptions": {
		"sourceMap": true,
		"declaration": false,
		"moduleResolution": "node",
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"allowSyntheticDefaultImports": true,
		"esModuleInterop": true,
		"strictNullChecks": false,
		"skipLibCheck": true,
		"lib": [
			"es2016",
			"dom",
			"esnext.asynciterable"
		],
		"outDir": "../out-tsc/app",
		"target": "es2015",
		"module": "esnext",
		"baseUrl": "",
		"types": []
	},
	"include": [
		"**/*"
	],
	"exclude": [
		"test.ts",
		"**/*.spec.ts"
	]
}

This will get the code to build with no errors, but that won't be the end of it. When you run ng serve, you will see that the /repo route will come up blank and the dev console will show a long list of errors, beginning with No provider for Apollo!.

To solve this, do the following, and this is not mentioned in the training anywhere:

graphql.modue.ts

import { NgModule } from '@angular/core';
import { APOLLO_OPTIONS } from 'apollo-angular';
import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
// import { InMemoryCache } from '@apollo/client/core';
import { Apollo } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { environment } from '../environments/environment';
import { HttpHeaders } from '@angular/common/http';

const uri = 'https://api.github.com/graphql'; // <-- add the URL of the GraphQL server here
// export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
export function createApollo(httpLink: HttpLink) {
	return {
		link: httpLink.create({uri,
			headers: new HttpHeaders({
				Authorization: `Bearer ${environment.githubPersonalAccessToken}`,
			}),
		}),
		cache: new InMemoryCache(),
	};
}
@NgModule({
	providers: [ Apollo, HttpLink,
		{
			provide: APOLLO_OPTIONS,
			useFactory: createApollo,
			deps: [HttpLink],
		},
	],
})
export class GraphQLModule {}

Add provider for both Apollo and HttpLink under @NgModule. Make sure your imports match my imports above.

In repo-table-component.ts, change the Apollo import statement to ...

import { Apollo, gql } from 'apollo-angular';

Since Apollo version 2.x, gql is a part of apollo-angular.

Now this solves the dev console errors too. If you have not yet gotten to the part where you add the Skeleton and Pagination, then you won't see any real data yet because there is a slight mistake there as well.

Consider this part.

The statement this.prepareData(response.data.organization.repositories.nodes); alone will not make any difference, and you'll still see the static rows you added to ngOnInit() since the data for the model is never populated with the response data after the query has been executed. So to make this work, you have to modify this line to the following:

this.model.data = this.prepareData(response.data.organization.repositories.nodes);

Now, you'll see the data Apollo queries from the Git API.

Remember, when you delete the static rows from ngOnInit() as instructed, keep the model.header and keep the model declaration, you'll need those at the pagination step. Only delete the static rows.

Once you add the skeleton part, this /repo page will again come up blank, so do not worry, carry on to the end and complete everything with the pagination part. This will add the missing pieces from the skeleton step and you will see everything nicely packed with a pagination component.

Now that the running part is over, you'd move to ng lint --fix.

This gave me a lot of repo-table.component.ts:36:1 - tab indentation expected errors pointing to the gql query section which it could not fix, so I had to manually go into the editor and replace the spaces with tabs. I hope you don't get the same, but if you do, follow my footsteps and re-indent with tabs.

The second nightmare started here, with npm test, it repeated all the previous build errors and then some. And since I have little idea on how this badge is awarded, I believe that every pull request must pass the tests on GitHub to get approved, and so I had to make sure my code passes npm test on my computer first in order to pass on GitHub.

So I did the following. I will show you the errors first, one by one, with the solution.

First it was this...

Which I solved by modifying tsconfig.spec.json to the following. Same changes as tsconfig.app.json.

{
	"compilerOptions": {
		"sourceMap": true,
		"declaration": false,
		"moduleResolution": "node",
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"allowSyntheticDefaultImports": true,
		"esModuleInterop": true,
		"strictNullChecks": false,
		"skipLibCheck": true,		
		"resolveJsonModule": true,
		"lib": [
			"dom",
			"es2016",
			"esnext.asynciterable"
		],
		"outDir": "../out-tsc/spec",
		"module": "esnext",
		"target": "es2015",
		"baseUrl": "",
		"types": [
			"jasmine",
			"node"
		]
	},
	"files": [
		"test.ts",
	  "polyfills.ts"
  ],
	"include": [
		"**/*.spec.ts"
	]
}

Then there was a long list of errors about ibm-pagination tag. Shown below, in part...

Which I solved by importing PaginationModule to both repo-table.component.spec.ts and repo-page.component.spec.ts.

Also, after importing this module, you need to add it to the imports: section of TestBed.configureTestingModule.

Don't worry, at the end I will show both the files completely, so you can compare and make changes.

Next there was No provider for Apollo! errors.

Which I fixed by adding ...

import { Apollo } from 'apollo-angular';

to both repo-table.component.spec.ts and repo-page.component.spec.ts.

Also I had to add a providers: section and expose this module to TestBed.configureTestingModule.

providers: [Apollo]

Next there was Error: Client has not been defined yet

Which I fixed by adding ...

import { GraphQLModule } from '../../graphql.module';

to both repo-table.component.spec.ts and repo-page.component.spec.ts. And added GraphQLModule to the imports: section of TestBed.configureTestingModule.

Next there was NullInjectorError: No provider for HttpClient!

Which I solved by adding...

import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

to both repo-table.component.spec.ts and repo-page.component.spec.ts. And, adding HttpClientTestingModule to imports: and adding HttpClient to providers" section like this...

providers: [Apollo, HttpClient]

All this got me here ...

If you are wondering about ChromeHeadless have not captured in 120000 ms, killing.. I increased the duration from 1 minutes to 2 minutes since the styles.scss takes long to compile and by that time Chromeheadless times out.

I made that change in karma.conf.js. I also changed autoWatch to false and singleRun to true.

		port: 9876,
		colors: true,
		logLevel: config.LOG_INFO,
		autoWatch: false,
		browsers: ['ChromeHeadless'],
		singleRun: true,
		captureTimeout: 120000

So I guess that's it, and here are the files like I promised.

repo-table.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RepoTableComponent } from './repo-table.component';
import { TableModule, LinkModule, PaginationModule } from 'carbon-components-angular';
import { Apollo } from 'apollo-angular';
import { GraphQLModule } from '../../graphql.module';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

describe('RepoTableComponent', () => {
	let component: RepoTableComponent;
	let fixture: ComponentFixture<RepoTableComponent>;

	beforeEach(async(() => {
		TestBed.configureTestingModule({
			declarations: [ RepoTableComponent ],
			imports: [
				TableModule,
				LinkModule,
				PaginationModule,
				GraphQLModule,
				HttpClientTestingModule
			],
			providers: [Apollo, HttpClient]
		})
		.compileComponents();
	}));

	beforeEach(() => {
		fixture = TestBed.createComponent(RepoTableComponent);
		component = fixture.componentInstance;
		fixture.detectChanges();
	});

	it('should create', () => {
		expect(component).toBeTruthy();
	});
});

repo-page.component.spec.js

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RepoPageComponent } from './repo-page.component';
import { GridModule, TableModule, LinkModule, PaginationModule } from 'carbon-components-angular';
import { RepoTableComponent } from '../repo-table/repo-table.component';
import { Apollo } from 'apollo-angular';
import { GraphQLModule } from '../../graphql.module';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

describe('RepoPageComponent', () => {
	let component: RepoPageComponent;
	let fixture: ComponentFixture<RepoPageComponent>;

	beforeEach(async(() => {
		TestBed.configureTestingModule({
			declarations: [ RepoPageComponent, RepoTableComponent ],
			imports: [
				GridModule,
				TableModule,
				LinkModule,
				PaginationModule,
				GraphQLModule,
				HttpClientTestingModule
			],
			providers: [Apollo, HttpClient]
		})
		.compileComponents();
	}));

	beforeEach(() => {
		fixture = TestBed.createComponent(RepoPageComponent);
		component = fixture.componentInstance;
		fixture.detectChanges();
	});

	it('should create', () => {
		expect(component).toBeTruthy();
	});
});

I really hope this helps other people since to get here it took me 3 days of headbanging, and I almost gave up.

Following docs at https://www.carbondesignsystem.com/tutorial/angular/step-5/
At step Deploy app , when using cf command, seeing a fail message.

SPro:carbon-angular-starter suren$ cf login -a https://api.ng.bluemix.net -sso
API endpoint: https://api.ng.bluemix.net

Email: [email protected]

Password: 
Authenticating...
OK

Targeted org [email protected]

API endpoint:   https://api.ng.bluemix.net (API version: 3.81.0)
User:           [email protected]
Org:            [email protected]
Space:          No space targeted, use 'cf target -s SPACE'
Space 'so' not found.
FAILED

Is the tutorial still up to date?

https://www.carbondesignsystem.com/developing/angular-tutorial/step-1#add-ui-shell

At some point during this step, we need to import the icons from our @carbon/icons package like:

import Notification16 from '@carbon/icons/es/notification/16';
import UserAvatar16 from '@carbon/icons/es/user--avatar/16';
import AppSwitcher16 from '@carbon/icons/es/app-switcher/16';

But when I look into the files at GitHub, it looks like newer carbon components are used, for example:

import { Notification20Module } from '@carbon/icons-angular/lib/notification/20';
import { UserAvatar20Module } from '@carbon/icons-angular/lib/user--avatar/20';
import { AppSwitcher20Module } from '@carbon/icons-angular/lib/app-switcher/20';

Hi,

Problem
I am looking for a way to change the theme of carbon at runtime.

In the example given in the styles.scss of this repo the following variable is set.

$carbon--theme: <some-theme>;

Since this is a sass variable we won't be able to change this at runtime.

Desirable state
In the end, I would like to have something like this. Where I can have different themes that I change at runtime, by changing the class on the body tag

@import '@carbon/themes/scss/themes';

.light-theme {
  @include carbon--theme($carbon--theme--g10) {}
}

.dark-theme {
  @include carbon--theme($carbon--theme--g100) {}
}

But for some reason the mixin won't work.

@include carbon--theme(<some-theme>);

Solution

Could you provide an example on how to change the theme at runtime? Or point me in the right direction :)

Versions
Angular: 10.1.4
carbon-components: 10.21.0
carbon-components-angular: 4.19.1

I was having A LOT of trouble with doing npm install on prior to even starting on step 3. The thing that worked out for me was manually updating the node-sass library from: "node-sass": "^4.14.0" to "node-sass": "^5.0.0".

As I am using node version 15.1, that is the adaquate version of node-sass to be using. After that, doing npm install was not again a problem for me. No idea why it didn't affect in step 1 or 2.

Is there any support for Angular version 17?
If v5 is listed as future in the repository, is it still not in production?