Problems with Step 1: Add UI Shell

[Jasbee-IBM]

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';

[reev-create]

Having the same issue :/

[pyrobit]

it seems the tutorial instructions got outdated.

[reev-create]

I found an alternative using a bootstrap and CSS of the actual library

[weirdyang]

seems like the new way is to first import the following modules in app.module.ts

import {
  NotificationModule,
  UserAvatarModule,
  AppSwitcherModule
} from '@carbon/icons-angular';

and use it like so:

<ibm-header name="Carbon Tutorial Angular">
    <ibm-header-navigation>
        <ibm-header-item routerLink="/repos">Repositories</ibm-header-item>
    </ibm-header-navigation>

    <ibm-header-global>
        <ibm-header-action title="action">
            <svg ibmIconNotification
                size="20"></svg>
        </ibm-header-action>
        <ibm-header-action title="action">
            <svg ibmIconUserAvatar
                size="20"></svg>
        </ibm-header-action>
        <ibm-header-action title="action">
            <svg ibmIconAppSwitcher
                size="20"></svg>
        </ibm-header-action>
    </ibm-header-global>
</ibm-header>

[weirdyang]

import { UIShellModule } from 'carbon-components-angular/ui-shell/ui-shell.module';

should the above line be import { UIShellModule } from 'carbon-components-angular'; ?

[lordememphis]

It seems @carbon/icons-angular is not yet Ivy compatible as well.

[danielmontes9]

Hi everyone!
You just need to add one file to make everything work properly module.d.ts

You can check out my solution here:
https://github.com/danielmontes9/coderbyte-angular-challenges/commit/d17db765bc6aaf8c022ad19cd04f45e493eee9ad