{"componentChunkName":"component---src-pages-tutorial-angular-step-1-mdx","path":"/tutorial/angular/step-1/","result":{"pageContext":{"frontmatter":{"title":"1. Installing Carbon","tabs":["Overview","Step 1","Step 2","Step 3","Step 4","Step 5","Wrapping up"]},"relativePagePath":"/tutorial/angular/step-1.mdx","titleType":"prepend","MdxNode":{"id":"4e6a6360-ad63-5eb2-b4f4-40ab1b2c7f0e","children":[],"parent":"3a6dedcb-8a7d-56b2-b157-3d578366ab0c","internal":{"content":"---\ntitle: 1. Installing Carbon\ntabs:\n ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']\n---\n\nimport Preview from 'components/Preview';\n\n### Starting with the Carbon Angular, there are two ways to begin working with Carbon components. By the end, these two methods will produce the same result.\n\n\n\nPrerequisites\nUse starter app - recommended\nStart from scratch\n\n\n\n## Preview\n\nA [preview](https://angular-step-2-carbon-tutorial.netlify.com) of what you will build:\n\n\n\n\n\n**Note:** If you get lint errors when you copy the code from the snippets, run `ng lint --fix` to fix them.\n\n\n\n## Prerequisites\n\n### Fork, clone and branch\n\nThis tutorial has an accompanying GitHub repository called [carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular) that we’ll use as a starting point for each step.\n\n### Fork\n\nTo begin, fork [carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular) using your GitHub account.\n\n### Clone\n\nGo to your forked repository, copy the SSH or HTTPS URL and in your terminal run the two commands to get the repository in your local file system and enter that directory.\n\n```bash\ngit clone [your fork SSH/HTTPS]\ncd carbon-tutorial-angular\n```\n\n### Add upstream remote\n\nAdd a remote called `upstream` so we can eventually submit a pull request once you have completed this tutorial step.\n\n##### SSH:\n\n```bash\ngit remote add upstream git@github.com:carbon-design-system/carbon-tutorial-angular.git\n```\n\nOr, if you prefer to use HTTPS instead of SSH with your remotes:\n\n##### HTTPS:\n\n```bash\ngit remote add upstream https://github.com/carbon-design-system/carbon-tutorial-angular.git\n```\n\nVerify that your forked repository remotes are correct:\n\n```bash\ngit remote -v\n```\n\nYour terminal should output something like this:\n\n```bash\norigin\t[your forked repo] (fetch)\norigin\t[your forked repo] (push)\nupstream\tgit@github.com:carbon-design-system/carbon-tutorial-angular.git (fetch)\nupstream\tgit@github.com:carbon-design-system/carbon-tutorial-angular.git (push)\n```\n\n### Branch\n\nNow that we have our repository set up, let's check out the branch for this tutorial step's starting point. Run the two commands:\n\n```bash\ngit fetch upstream\ngit checkout -b angular-step-1 upstream/angular-step-1\n```\n\n## Use starter app (recommended)\n\n\n\nAdd starter remote\nPull starter code\nRemove starter remote\nBuild and start\nUpdate UI Shell\nCreate pages\nAdd routing\nSubmit pull request\n\n\n\n### Add starter remote\n\nAdd a temporary remote called `starter` so we can clone the [carbon-angular-starter](https://github.com/carbon-design-system/carbon-angular-starter).\n\n##### SSH:\n\n```bash\ngit remote add starter git@github.com:carbon-design-system/carbon-angular-starter.git\n```\n\nOr, if you prefer to use HTTPS instead of SSH with your remotes:\n\n##### HTTPS:\n\n```bash\ngit remote add starter https://github.com/carbon-design-system/carbon-angular-starter.git\n```\n\n### Pull starter code\n\nNow that we a have starter remote, we can rebase our branch to match whatever is in the starter app. Run the two commands:\n\n```bash\ngit fetch starter\ngit reset --hard starter/master\n```\n\n### Remove starter remote\n\nRemove the temporary remote called `starter` since we have no use for it anymore.\n\n```bash\ngit remote remove starter\n```\n\n## Build and start\n\nWe have the repository forked to your GitHub account, cloned down to your machine, and the starting branch checked out. Next, install the Carbon app's dependencies with:\n\n```bash\nnpm install\n```\n\nAfter the dependencies are installed, you can start the app with:\n\n```bash\nnpm start\n```\n\nYour app should now be running with the message: `** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **`\n\nThat's it! Your browser should now resemble our [starter-app](https://carbon-angular-starter.netlify.com/).\n\n## Update UI Shell\n\nLet's update the UI Shell so it has a link to the repos page that we will create shortly. In `header.component.html` replace the code with:\n\n```html path=src/app/header/header.component.html\n\n \n Repositories\n \n \n \n \n \n \n \n \n \n \n \n \n\n```\n\nBefore we continue on to the next step, we want to begin developing with a clean app. So let's delete the `src/app/starter-home` folder and update the routing in `app-routing.module.ts` by removing the below block:\n\n```javascript path=src/app/app-routing.module.ts\n{\n path: '',\n loadChildren: () => import('./starter-home/starter-home.module').then(m => m.StarterHomeModule)\n},\n```\n\nNow you can skip most of [Start from scratch](#start-from-scratch) and jump straight to [Create pages](#create-pages).\n\n## Start from scratch\n\n\n\nInstall Angular CLI\nCreate an Angular App\nInstall Carbon\nCode style\nProgressive web app\nRun the app\nAdd UI Shell\nCreate pages\nAdd routing\nSubmit pull request\n\n\n\n## Install Angular CLI\n\nSince we are starting from scratch, we need to first install Angular CLI.\n\n```bash\nnpm install -g @angular/cli\n```\n\n\n\n**Note:** If you are using macOS you might need to execute as a `sudo` command.\n\n\n\n## Create an Angular App\n\nNow that we have our environment set up, starting a new Angular app is easy! If you haven't set up the environment yet, please do so using the steps provided in Prerequisites (above). We will be using the Angular CLI to create and generate our components. It can also generate services, router, components, and directives.\n\nTo create a new Angular project with Angular CLI, just run:\n\n```bash\nng new carbon-angular-tutorial --directory ./\n```\n\nThis will create the new project within the current directory. Make sure you do this within the cloned fork of the project.\nWhen you get prompted, enter the following.\n\n```bash\n? Would you like to add Angular routing? Yes\n? Which stylesheet format would you like to use? SCSS\n```\n\nThis command will install the Angular app with all the configurations needed. Within the project folder `carbon-angular-tutorial`, the `src` directory should have the following structure:\n\n```bash\ncarbon-angular-tutorial\n...\n ├── src\n ├── app\n │   ├── app-routing.module.ts\n │   ├── app.component.html\n │   ├── app.component.scss\n │   ├── app.component.spec.ts\n │   ├── app.component.ts\n │   └── app.module.ts\n ├── assets\n ├── environments\n │   ├── environment.prod.ts\n │   └── environment.ts\n ├── favicon.ico\n ├── index.html\n ├── main.ts\n ├── polyfills.ts\n ├── styles.scss\n └── test.ts\n```\n\n## Install Carbon\n\nEven though we installed some dependencies while creating the new app, we've yet to install the Carbon packages.\n\n- `carbon-components` - component styles\n- `carbon-components-angular` - Angular components\n- `@carbon/icons-angular` - Angular icons\n\n```bash\nnpm install carbon-components carbon-components-angular @carbon/icons-angular\n```\n\n### Import carbon-component styles\n\nIn `src/styles.scss`, import the Carbon styles by adding the following to the top of the file:\n\n```scss path=src/styles.scss\n@import '~carbon-components/scss/globals/scss/styles';\n```\n\n## Code style\n\nNext, we will edit the code style to match Carbon Angular recommendations. Through the conventions listed in our `tslint.js`, the app will look clean and easier to read and maintain. So replace your code in `tslint.json` with the code below.\n\n```javascript path=tslint.json\n{\n\t\"rulesDirectory\": [\n \"node_modules/codelyzer\"\n\t],\n\t\"rules\": {\n\t\t\"callable-types\": true,\n\t\t\"class-name\": true,\n\t\t\"comment-format\": [\n\t\t\ttrue,\n\t\t\t\"check-space\"\n\t\t],\n\t\t\"curly\": true,\n\t\t\"eofline\": true,\n\t\t\"forin\": true,\n\t\t\"import-blacklist\": [true],\n\t\t\"import-spacing\": true,\n\t\t\"indent\": [\n\t\t\ttrue,\n\t\t\t\"tabs\",\n\t\t\t2\n\t\t],\n\t\t\"interface-over-type-literal\": true,\n\t\t\"label-position\": true,\n\t\t\"max-line-length\": [\n\t\t\ttrue,\n\t\t\t140\n\t\t],\n\t\t\"member-access\": false,\n\t\t\"member-ordering\": [\n\t\t\ttrue,\n\t\t\t{\n\t\t\t\t\"order\": [\n\t\t\t\t\t\"public-static-field\",\n\t\t\t\t\t\"protected-static-field\",\n\t\t\t\t\t\"private-static-field\",\n\t\t\t\t\t\"public-static-method\",\n\t\t\t\t\t\"protected-static-method\",\n\t\t\t\t\t\"private-static-method\",\n\t\t\t\t\t\"public-instance-field\",\n\t\t\t\t\t\"protected-instance-field\",\n\t\t\t\t\t\"private-instance-field\",\n\t\t\t\t\t\"public-constructor\",\n\t\t\t\t\t\"protected-constructor\",\n\t\t\t\t\t\"private-constructor\",\n\t\t\t\t\t\"public-instance-method\",\n\t\t\t\t\t\"protected-instance-method\",\n\t\t\t\t\t\"private-instance-method\"\n\t\t\t\t]\n\t\t\t}\n\t\t],\n\t\t\"no-arg\": true,\n\t\t\"no-bitwise\": true,\n\t\t\"no-console\": [\n\t\t\ttrue,\n\t\t\t\"debug\",\n\t\t\t\"info\",\n\t\t\t\"time\",\n\t\t\t\"timeEnd\",\n\t\t\t\"trace\"\n\t\t],\n\t\t\"no-construct\": true,\n\t\t\"no-debugger\": true,\n\t\t\"no-duplicate-variable\": true,\n\t\t\"no-empty\": false,\n\t\t\"no-empty-interface\": true,\n\t\t\"no-eval\": true,\n\t\t\"no-inferrable-types\": [true, \"ignore-params\"],\n\t\t\"no-shadowed-variable\": true,\n\t\t\"no-string-literal\": false,\n\t\t\"no-string-throw\": true,\n\t\t\"no-switch-case-fall-through\": true,\n\t\t\"no-trailing-whitespace\": true,\n\t\t\"no-unused-expression\": true,\n\t\t\"no-use-before-declare\": true,\n\t\t\"no-var-keyword\": true,\n\t\t\"object-literal-sort-keys\": false,\n\t\t\"one-line\": [\n\t\t\ttrue,\n\t\t\t\"check-open-brace\",\n\t\t\t\"check-catch\",\n\t\t\t\"check-else\",\n\t\t\t\"check-whitespace\"\n\t\t],\n\t\t\"prefer-const\": true,\n\t\t\"quotemark\": [\n\t\t\ttrue,\n\t\t\t\"single\"\n\t\t],\n\t\t\"radix\": true,\n\t\t\"semicolon\": [\n\t\t\ttrue,\n\t\t\t\"always\"\n\t\t],\n\t\t\"triple-equals\": [\n\t\t\ttrue,\n\t\t\t\"allow-null-check\",\n\t\t\t\"allow-undefined-check\"\n\t\t],\n\t\t\"typedef-whitespace\": [\n\t\t\ttrue,\n\t\t\t{\n\t\t\t\t\"call-signature\": \"nospace\",\n\t\t\t\t\"index-signature\": \"nospace\",\n\t\t\t\t\"parameter\": \"nospace\",\n\t\t\t\t\"property-declaration\": \"nospace\",\n\t\t\t\t\"variable-declaration\": \"nospace\"\n\t\t\t}\n\t\t],\n\t\t\"typeof-compare\": true,\n\t\t\"unified-signatures\": true,\n\t\t\"variable-name\": [\n\t\t\ttrue,\n\t\t\t\"ban-keywords\",\n\t\t\t\"check-format\",\n\t\t\t\"allow-leading-underscore\"\n\t\t],\n\t\t\"whitespace\": [\n\t\t\ttrue,\n\t\t\t\"check-branch\",\n\t\t\t\"check-decl\",\n\t\t\t\"check-operator\",\n\t\t\t\"check-module\",\n\t\t\t\"check-separator\",\n\t\t\t\"check-rest-spread\",\n\t\t\t\"check-type\",\n\t\t\t\"check-preblock\"\n\t\t],\n\n\t\t\"directive-selector\": [true, \"attribute\", [\"app\", \"test\"], \"camelCase\"],\n\t\t\"component-selector\": [true, \"element\", [\"app\", \"test\"], \"kebab-case\"],\n\n\t\t\"no-inputs-metadata-property\": true,\n\t\t\"no-outputs-metadata-property\": true,\n\t\t\"no-host-metadata-property\": true,\n\t\t\"no-attribute-decorator\": true,\n\t\t\"no-input-rename\": true,\n\t\t\"no-output-rename\": true,\n\t\t\"no-forward-ref\": true,\n\t\t\"use-lifecycle-interface\": true,\n\t\t\"use-pipe-transform-interface\": true,\n\n\t\t\"templates-use-public\": true,\n\t\t\"invoke-injectable\": true\n\t}\n}\n```\n\nNow that our guidelines are defined, we need to apply them to our app.\n\n```bash\nng lint --fix\n```\n\nAll files should now pass linting. Finally, to help the editor indent lines properly in our project and to keep code styles consistent, we need to edit `.editorconfig`.\n\n```ini path=.editorconfig\n# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = tab\nindent_size = 4\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n```\n\n\n\n**Note:** This only works with editors that support editorconfigs.\n\n\n\n## Progressive web app\n\nBefore we start adding components, let's explore progressive web app, or PWA. PWA is a web application that has a set of capabilities (similar to native apps) which provide an app-like experience to users. Some other capabilities include full responsiveness and browser compatibility, connectivity independence and self-updates. In the `src` directory create a file called `sw.js` and paste the code below.\n\nFor more information on PWAs, check out the [developer's documentation](https://developers.google.com/web/progressive-web-apps/).\n\n```javascript path=src/sw.js\nlet log = console.log.bind(console);\nlet err = console.error.bind(console);\n\nlet version = '1';\nlet cacheName = 'pwa-client-v' + version;\nlet dataCacheName = 'pwa-client-data-v' + version;\nlet appShellFilesToCache = [\n './',\n './index.html',\n // \"./inline.bundle.js\",\n // \"./polyfills.bundle.js\",\n // \"./styles.bundle.js\",\n // \"./vendor.bundle.js\",\n // \"./main.bundle.js\",\n './manifest.json',\n];\n\nself.addEventListener('install', ev => {\n ev.waitUntil(self.skipWaiting());\n log('Service Worker: Installed');\n\n ev.waitUntil(\n caches.open(cacheName).then(cache => {\n log('Service Worker: Caching App Shell');\n return cache.addAll(appShellFilesToCache);\n })\n );\n});\n\nself.addEventListener('activate', ev => {\n ev.waitUntil(self.clients.claim());\n log('Service Worker: Active');\n\n ev.waitUntil(\n caches.keys().then(keyList => {\n return Promise.all(\n keyList.map(key => {\n if (key !== cacheName) {\n log('Service Worker: Removing old cache', key);\n return caches.delete(key);\n }\n })\n );\n })\n );\n});\n\nself.addEventListener('fetch', e => {\n log('Service Worker: Fetch URL ', e.request.url);\n\n // Match requests for data and handle them separately\n e.respondWith(\n caches.match(e.request.clone()).then(response => {\n return (\n response ||\n fetch(e.request.clone()).then(r2 => {\n return caches.open(dataCacheName).then(cache => {\n console.log('Service Worker: Fetched & Cached URL ', e.request.url);\n cache.put(e.request.url, r2.clone());\n return r2.clone();\n });\n })\n );\n })\n );\n});\n```\n\nNow we need to register our service worker and use it to cache files locally. In `index.html` add the below code in a script block using `` under the `app-root` tag.\n\n\n```html path=src/index.html\n\n```\n\n\nNext, we need to add the web app manifest. The manifest is a file in `json` format that provides the name, description, icon locations and other information required for an app to be considered a PWA. It lets users install the web app on the home screen just like native apps without going through an app store. Create a `manifest.json` in the `src` directory the paste the following code.\n\n```javascript path=src/manifest.json\n{\n \"name\": \"Carbon Angular Starter\",\n \"short_name\": \"Starter\",\n \"icons\": [\n {\n \"src\": \"/assets/icons/favicon-32x32.png\",\n \"sizes\": \"32x32\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/assets/icons/android-chrome-192x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/assets/icons/icon-144x144.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/assets/icons/icon-192x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/assets/icons/icon-256x256.png\",\n \"sizes\": \"256x256\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/assets/icons/icon-384x384.png\",\n \"sizes\": \"384x384\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/assets/icons/icon-512x512.png\",\n \"sizes\": \"512x512\",\n \"type\": \"image/png\"\n }\n ],\n \"background_color\": \"#ff00ff\",\n \"theme_color\": \"#ffff00\",\n \"display\": \"standalone\",\n \"start_url\": \"/\"\n}\n```\n\nWe will also need to add `sw.js` and `manifest.json` into our asset entities (build & test) in `angular.json` and reference the `manifest.json` and `theme-color` in the `index.html` `` tags. The theme color tells the browser with what color to tint UI elements such as the address bar.\n\n```javascript path=angular.json\n\"assets\": [\n \"src/favicon.ico\",\n \"src/assets\",\n \"src/sw.js\",\n \"src/manifest.json\"\n],\n```\n\n```html path=src/index.html\n\n\n```\n\nFinally, let's download the different sizes of icons to the `src/assests/icons` directory by running the following commands:\n\n```bash\nmkdir src/assets/icons\ncurl -o src/assets/icons/android-chrome-192x192.png https://raw.githubusercontent.com/carbon-design-system/carbon-angular-starter/master/src/assets/icons/android-chrome-192x192.png\ncurl -o src/assets/icons/icon-144x144.png https://raw.githubusercontent.com/carbon-design-system/carbon-angular-starter/master/src/assets/icons/icon-144x144.png\ncurl -o src/assets/icons/icon-192x192.png https://raw.githubusercontent.com/carbon-design-system/carbon-angular-starter/master/src/assets/icons/icon-192x192.png\ncurl -o src/assets/icons/icon-256x256.png https://raw.githubusercontent.com/carbon-design-system/carbon-angular-starter/master/src/assets/icons/icon-256x256.png\ncurl -o src/assets/icons/icon-384x384.png https://raw.githubusercontent.com/carbon-design-system/carbon-angular-starter/master/src/assets/icons/icon-384x384.png\ncurl -o src/assets/icons/icon-512x512.png https://raw.githubusercontent.com/carbon-design-system/carbon-angular-starter/master/src/assets/icons/icon-512x512.png\n```\n\n## Run the app\n\nNow we can run our app for a quick preview inside the browser.\n\n```bash\nnpm start\n```\n\nYour app should now be running with the message: `** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **`\n\nBefore we start adding components we want to start with an empty project, so delete everything in `app.component.html` except for the `router-outler`. We will also have to delete the test that was associated with this code. So in `app.component.spec.ts`, delete the `should render title` and `should have as title 'carbon-angular-tutorial'` test.\n\n## Add UI Shell\n\nNext, we're going to create an Angular component called `Header` to use with the UI Shell Carbon component. Using Angular CLI we will create this component inside the `src/app` directory.\n\n```bash\nng g component header --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/header\n├── header.component.html\n├── header.component.scss\n├── header.component.spec.ts\n└── header.component.ts\n```\n\n### Import UI Shell\n\nNext we'll import our Carbon UI Shell components into `app.module.ts`, `app.component.spec.ts` and `header.component.spec.ts`. Set up the file like so:\n\n\n```javascript path=src/app/app.module.ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { HeaderComponent } from './header/header.component';\n\n// carbon-components-angular default imports\nimport { UIShellModule } from 'carbon-components-angular';\n\n@NgModule({\n declarations: [\n AppComponent,\n HeaderComponent\n ],\n imports: [\n BrowserModule,\n AppRoutingModule,\n UIShellModule\n ],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n\n\n```javascript path=src/app/app.component.spec.ts,src/app/header/header.component.spec.ts\nimport { UIShellModule } from 'carbon-components-angular/ui-shell/ui-shell.module';\n```\n\n\n\n```javascript path=src/app/app.component.spec.ts,src/app/header/header.component.spec.ts\nTestBed.configureTestingModule({\n declarations: [HeaderComponent],\n imports: [UIShellModule]\n});\n```\n\n\n\n\n**Note:** You can find a description of the different components used in UI Shell in our [carbon-components-angular](https://github.com/IBM/carbon-components-angular/tree/master/src/ui-shell) package.\n\n\n\n### Import icons\n\nNow let's import the icons from our `@carbon/icons-angular` package. In `app.module.ts`, `app.component.spec.ts` and `header.component.spec.ts`, we need to import each individual icon we will use.\n\n\n```javascript path=src/app/app.module.ts,src/app/app.component.spec.ts,src/app/header/header.component.spec.ts\nimport { Notification20Module } from '@carbon/icons-angular/lib/notification/20';\nimport { UserAvatar20Module } from '@carbon/icons-angular/lib/user--avatar/20';\nimport { AppSwitcher20Module } from '@carbon/icons-angular/lib/app-switcher/20';\n```\n\n\n```javascript path=src/app/app.module.ts,src/app/app.component.spec.ts,src/app/header/header.component.spec.ts\nimports: [Notification20Module, UserAvatar20Module, AppSwitcher20Module];\n```\n\nThen we need to add the template code. Populate `header.component.html` with:\n\n\n```html path=src/app/header/header.component.html\n\n\t\n\t\tRepositories\n\t\n\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\n\n```\n\n\nNext import the header compoenent in `app.component.spec.ts` and add the component in `app.component.html`\n\n\n```javascript path=src/app/app.component.spec.ts\nimport { HeaderComponent } from './header/header.component';\n```\n\n\n```javascript path=src/app/app.component.spec.ts\ndeclarations: [HeaderComponent];\n```\n\n```html path=src/app/app.component.html\n\n
\n \n
\n```\n\nLet's add some padding to the top of the document, so the content is below the header. We are going to do this by using the `bx--header` class provided by carbon. So in `header.component.ts` lets hostbind that class.\n\n```javascript\nimport { Component, HostBinding } from '@angular/core';\n ...\n\t@HostBinding('class.bx--header') headerClass = true;\n```\n\n## Create pages\n\nNext thing we need to do is create the files for our content. These files will be located in the `app` folder inside of `src`. It should be a sibling of `header`.\n\nOur app will have two pages. First, we need a landing page. Go ahead and stop your development server (with `CTRL-C`) and then:\n\n```bash\nng g module home --routing --lint-fix\nng g component home/landing-page --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/home\n├── home\n│   ├── landing-page.component.html\n│   ├── landing-page.component.scss\n│   ├── landing-page.component.spec.ts\n│   └── landing-page.component.ts\n├── home-routing.module.ts\n└── home-page.module.ts\n```\n\nAnd a repo page:\n\n```bash\nng g module repositories --routing --lint-fix\nng g component repositories/repo-page --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/repositories\n├── repositories\n│   ├── repo-page.component.html\n│   ├── repo-page.component.scss\n│   ├── repo-page.component.spec.ts\n│   └── repo-page.component.ts\n├── repositories-routing.module.ts\n└── repositories.module.ts\n```\n\nNow you can restart your server with `npm start`.\n\n## Add routing\n\nWe need to update routing functionality to enable the loading of `repositories`. Inside `app-routing.module.ts` we'll add the following code in the routes array:\n\n```javascript path=src/app-routing.module.ts\nconst routes: Routes = [\n {\n path: '',\n loadChildren: () => import('./home/home.module').then(m => m.HomeModule),\n },\n {\n path: 'repos',\n loadChildren: () =>\n import('./repositories/repositories.module').then(\n m => m.RepositoriesModule\n ),\n },\n];\n```\n\nAnd modify the `NgModule` declaration to use the hash router:\n\n```javascript path=src/app-routing.module.ts\n@NgModule({\n imports: [RouterModule.forRoot(routes, { useHash: true })],\n exports: [RouterModule],\n})\nexport class AppRoutingModule {}\n```\n\nAnd add routes for the landing and repo pages:\n\n```javascript path=src/app/home/home-routing.module.ts\nimport { LandingPageComponent } from './landing-page/landing-page.component';\n\nconst routes: Routes = [\n {\n path: '',\n component: LandingPageComponent,\n },\n];\n```\n\n\n\n```javascript path=src/app/repositories/repositories-routing.module.ts\nimport { RepoPageComponent } from './repo-page/repo-page.component';\n\nconst routes: Routes = [\n {\n path: '',\n component: RepoPageComponent\n }\n];\n```\n\n\n\nAfter that we need to do a couple quick fixes to the UI Shell to have it route to the repo page.\n\n```html path=src/app/header/header.component.html\nRepositories\n```\n\nYou should now have a working header that routes to the repos pages without full page reload!\n\n## Submit pull request\n\nWe're going to submit a pull request to verify completion of this tutorial step and demonstrate a couple related concepts.\n\n### Continuous integration (CI) check\n\n\n\n**Note:** Before you run any tests, make sure that you are using ChromeHeadless in `karma.conf.js` instead of Chrome.\n\n\n\nWe have `lint` and `test` scripts defined in `package.json` that verify file formatting for files that have been touched since the last Git commit. You'd typically also have that script run your test suite as part of your CI build. Go ahead and make sure everything looks good with:\n\n```bash\nng lint --fix\nnpm run lint && npm test\n```\n\n\n\n**Note:** If this gives an error, it's likely that some of your source files are not properly formatted.\n\n\n\n### Git commit and push\n\nBefore we can create a pull request, we need to stage and commit all of our changes:\n\n```bash\ngit add --all && git commit -m \"feat(tutorial): complete step 1\"\n```\n\nThen, push to your repository:\n\n```bash\ngit push origin angular-step-1\n```\n\n\n\n**Note:** If your Git remote protocol is HTTPS instead of SSH, you may be prompted to authenticate with GitHub when you push changes. If your GitHub account has two-factor authentication enabled, we recommend that you follow these instructions to [create a personal access token for the command line](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line). That lets you use your token instead of password when performing Git operations over HTTPS.\n\n\n\n\n\n**Note:** If you receive a `non-fast-forward` error, it's likely that your forked repository is behind the original repository and needs updated. This can happen if the tutorial was updated after you began working on it. To fix, run `git pull upstream angular-step-1` to merge the changes into your branch, then you can try pushing again. Or, you can [manually merge](https://help.github.com/en/articles/syncing-a-fork) in the upstream changes.\n\n\n\n### Pull request (PR)\n\nFinally, visit [carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular) to \"Compare & pull request\". In doing so, make sure that you are comparing to `angular-step-1` into `base: angular-step-1`. Take notice of the [Netlify](https://www.netlify.com) bot that deploys a preview of your PR every time that you push new commits. These previews can be shared and viewed by anybody to assist the PR review process.\n\n\n\n**Note:** Expect your tutorial step PRs to be reviewed by the Carbon team but not merged. We'll close your PR so we can keep the repository's remote branches pristine and ready for the next person!\n\n\n","type":"Mdx","contentDigest":"ade3014fa44b187e2c3c7dd00f0f8559","counter":1630,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"1. Installing Carbon","tabs":["Overview","Step 1","Step 2","Step 3","Step 4","Step 5","Wrapping up"]},"exports":{},"rawBody":"---\ntitle: 1. Installing Carbon\ntabs:\n ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']\n---\n\nimport Preview from 'components/Preview';\n\n### Starting with the Carbon Angular, there are two ways to begin working with Carbon components. By the end, these two methods will produce the same result.\n\n\n\nPrerequisites\nUse starter app - recommended\nStart from scratch\n\n\n\n## Preview\n\nA [preview](https://angular-step-2-carbon-tutorial.netlify.com) of what you will build:\n\n\n\n\n\n**Note:** If you get lint errors when you copy the code from the snippets, run `ng lint --fix` to fix them.\n\n\n\n## Prerequisites\n\n### Fork, clone and branch\n\nThis tutorial has an accompanying GitHub repository called [carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular) that we’ll use as a starting point for each step.\n\n### Fork\n\nTo begin, fork [carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular) using your GitHub account.\n\n### Clone\n\nGo to your forked repository, copy the SSH or HTTPS URL and in your terminal run the two commands to get the repository in your local file system and enter that directory.\n\n```bash\ngit clone [your fork SSH/HTTPS]\ncd carbon-tutorial-angular\n```\n\n### Add upstream remote\n\nAdd a remote called `upstream` so we can eventually submit a pull request once you have completed this tutorial step.\n\n##### SSH:\n\n```bash\ngit remote add upstream git@github.com:carbon-design-system/carbon-tutorial-angular.git\n```\n\nOr, if you prefer to use HTTPS instead of SSH with your remotes:\n\n##### HTTPS:\n\n```bash\ngit remote add upstream https://github.com/carbon-design-system/carbon-tutorial-angular.git\n```\n\nVerify that your forked repository remotes are correct:\n\n```bash\ngit remote -v\n```\n\nYour terminal should output something like this:\n\n```bash\norigin\t[your forked repo] (fetch)\norigin\t[your forked repo] (push)\nupstream\tgit@github.com:carbon-design-system/carbon-tutorial-angular.git (fetch)\nupstream\tgit@github.com:carbon-design-system/carbon-tutorial-angular.git (push)\n```\n\n### Branch\n\nNow that we have our repository set up, let's check out the branch for this tutorial step's starting point. Run the two commands:\n\n```bash\ngit fetch upstream\ngit checkout -b angular-step-1 upstream/angular-step-1\n```\n\n## Use starter app (recommended)\n\n\n\nAdd starter remote\nPull starter code\nRemove starter remote\nBuild and start\nUpdate UI Shell\nCreate pages\nAdd routing\nSubmit pull request\n\n\n\n### Add starter remote\n\nAdd a temporary remote called `starter` so we can clone the [carbon-angular-starter](https://github.com/carbon-design-system/carbon-angular-starter).\n\n##### SSH:\n\n```bash\ngit remote add starter git@github.com:carbon-design-system/carbon-angular-starter.git\n```\n\nOr, if you prefer to use HTTPS instead of SSH with your remotes:\n\n##### HTTPS:\n\n```bash\ngit remote add starter https://github.com/carbon-design-system/carbon-angular-starter.git\n```\n\n### Pull starter code\n\nNow that we a have starter remote, we can rebase our branch to match whatever is in the starter app. Run the two commands:\n\n```bash\ngit fetch starter\ngit reset --hard starter/master\n```\n\n### Remove starter remote\n\nRemove the temporary remote called `starter` since we have no use for it anymore.\n\n```bash\ngit remote remove starter\n```\n\n## Build and start\n\nWe have the repository forked to your GitHub account, cloned down to your machine, and the starting branch checked out. Next, install the Carbon app's dependencies with:\n\n```bash\nnpm install\n```\n\nAfter the dependencies are installed, you can start the app with:\n\n```bash\nnpm start\n```\n\nYour app should now be running with the message: `** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **`\n\nThat's it! Your browser should now resemble our [starter-app](https://carbon-angular-starter.netlify.com/).\n\n## Update UI Shell\n\nLet's update the UI Shell so it has a link to the repos page that we will create shortly. In `header.component.html` replace the code with:\n\n```html path=src/app/header/header.component.html\n\n \n Repositories\n \n \n \n \n \n \n \n \n \n \n \n \n\n```\n\nBefore we continue on to the next step, we want to begin developing with a clean app. So let's delete the `src/app/starter-home` folder and update the routing in `app-routing.module.ts` by removing the below block:\n\n```javascript path=src/app/app-routing.module.ts\n{\n path: '',\n loadChildren: () => import('./starter-home/starter-home.module').then(m => m.StarterHomeModule)\n},\n```\n\nNow you can skip most of [Start from scratch](#start-from-scratch) and jump straight to [Create pages](#create-pages).\n\n## Start from scratch\n\n\n\nInstall Angular CLI\nCreate an Angular App\nInstall Carbon\nCode style\nProgressive web app\nRun the app\nAdd UI Shell\nCreate pages\nAdd routing\nSubmit pull request\n\n\n\n## Install Angular CLI\n\nSince we are starting from scratch, we need to first install Angular CLI.\n\n```bash\nnpm install -g @angular/cli\n```\n\n\n\n**Note:** If you are using macOS you might need to execute as a `sudo` command.\n\n\n\n## Create an Angular App\n\nNow that we have our environment set up, starting a new Angular app is easy! If you haven't set up the environment yet, please do so using the steps provided in Prerequisites (above). We will be using the Angular CLI to create and generate our components. It can also generate services, router, components, and directives.\n\nTo create a new Angular project with Angular CLI, just run:\n\n```bash\nng new carbon-angular-tutorial --directory ./\n```\n\nThis will create the new project within the current directory. Make sure you do this within the cloned fork of the project.\nWhen you get prompted, enter the following.\n\n```bash\n? Would you like to add Angular routing? Yes\n? Which stylesheet format would you like to use? SCSS\n```\n\nThis command will install the Angular app with all the configurations needed. Within the project folder `carbon-angular-tutorial`, the `src` directory should have the following structure:\n\n```bash\ncarbon-angular-tutorial\n...\n ├── src\n ├── app\n │   ├── app-routing.module.ts\n │   ├── app.component.html\n │   ├── app.component.scss\n │   ├── app.component.spec.ts\n │   ├── app.component.ts\n │   └── app.module.ts\n ├── assets\n ├── environments\n │   ├── environment.prod.ts\n │   └── environment.ts\n ├── favicon.ico\n ├── index.html\n ├── main.ts\n ├── polyfills.ts\n ├── styles.scss\n └── test.ts\n```\n\n## Install Carbon\n\nEven though we installed some dependencies while creating the new app, we've yet to install the Carbon packages.\n\n- `carbon-components` - component styles\n- `carbon-components-angular` - Angular components\n- `@carbon/icons-angular` - Angular icons\n\n```bash\nnpm install carbon-components carbon-components-angular @carbon/icons-angular\n```\n\n### Import carbon-component styles\n\nIn `src/styles.scss`, import the Carbon styles by adding the following to the top of the file:\n\n```scss path=src/styles.scss\n@import '~carbon-components/scss/globals/scss/styles';\n```\n\n## Code style\n\nNext, we will edit the code style to match Carbon Angular recommendations. Through the conventions listed in our `tslint.js`, the app will look clean and easier to read and maintain. So replace your code in `tslint.json` with the code below.\n\n```javascript path=tslint.json\n{\n\t\"rulesDirectory\": [\n \"node_modules/codelyzer\"\n\t],\n\t\"rules\": {\n\t\t\"callable-types\": true,\n\t\t\"class-name\": true,\n\t\t\"comment-format\": [\n\t\t\ttrue,\n\t\t\t\"check-space\"\n\t\t],\n\t\t\"curly\": true,\n\t\t\"eofline\": true,\n\t\t\"forin\": true,\n\t\t\"import-blacklist\": [true],\n\t\t\"import-spacing\": true,\n\t\t\"indent\": [\n\t\t\ttrue,\n\t\t\t\"tabs\",\n\t\t\t2\n\t\t],\n\t\t\"interface-over-type-literal\": true,\n\t\t\"label-position\": true,\n\t\t\"max-line-length\": [\n\t\t\ttrue,\n\t\t\t140\n\t\t],\n\t\t\"member-access\": false,\n\t\t\"member-ordering\": [\n\t\t\ttrue,\n\t\t\t{\n\t\t\t\t\"order\": [\n\t\t\t\t\t\"public-static-field\",\n\t\t\t\t\t\"protected-static-field\",\n\t\t\t\t\t\"private-static-field\",\n\t\t\t\t\t\"public-static-method\",\n\t\t\t\t\t\"protected-static-method\",\n\t\t\t\t\t\"private-static-method\",\n\t\t\t\t\t\"public-instance-field\",\n\t\t\t\t\t\"protected-instance-field\",\n\t\t\t\t\t\"private-instance-field\",\n\t\t\t\t\t\"public-constructor\",\n\t\t\t\t\t\"protected-constructor\",\n\t\t\t\t\t\"private-constructor\",\n\t\t\t\t\t\"public-instance-method\",\n\t\t\t\t\t\"protected-instance-method\",\n\t\t\t\t\t\"private-instance-method\"\n\t\t\t\t]\n\t\t\t}\n\t\t],\n\t\t\"no-arg\": true,\n\t\t\"no-bitwise\": true,\n\t\t\"no-console\": [\n\t\t\ttrue,\n\t\t\t\"debug\",\n\t\t\t\"info\",\n\t\t\t\"time\",\n\t\t\t\"timeEnd\",\n\t\t\t\"trace\"\n\t\t],\n\t\t\"no-construct\": true,\n\t\t\"no-debugger\": true,\n\t\t\"no-duplicate-variable\": true,\n\t\t\"no-empty\": false,\n\t\t\"no-empty-interface\": true,\n\t\t\"no-eval\": true,\n\t\t\"no-inferrable-types\": [true, \"ignore-params\"],\n\t\t\"no-shadowed-variable\": true,\n\t\t\"no-string-literal\": false,\n\t\t\"no-string-throw\": true,\n\t\t\"no-switch-case-fall-through\": true,\n\t\t\"no-trailing-whitespace\": true,\n\t\t\"no-unused-expression\": true,\n\t\t\"no-use-before-declare\": true,\n\t\t\"no-var-keyword\": true,\n\t\t\"object-literal-sort-keys\": false,\n\t\t\"one-line\": [\n\t\t\ttrue,\n\t\t\t\"check-open-brace\",\n\t\t\t\"check-catch\",\n\t\t\t\"check-else\",\n\t\t\t\"check-whitespace\"\n\t\t],\n\t\t\"prefer-const\": true,\n\t\t\"quotemark\": [\n\t\t\ttrue,\n\t\t\t\"single\"\n\t\t],\n\t\t\"radix\": true,\n\t\t\"semicolon\": [\n\t\t\ttrue,\n\t\t\t\"always\"\n\t\t],\n\t\t\"triple-equals\": [\n\t\t\ttrue,\n\t\t\t\"allow-null-check\",\n\t\t\t\"allow-undefined-check\"\n\t\t],\n\t\t\"typedef-whitespace\": [\n\t\t\ttrue,\n\t\t\t{\n\t\t\t\t\"call-signature\": \"nospace\",\n\t\t\t\t\"index-signature\": \"nospace\",\n\t\t\t\t\"parameter\": \"nospace\",\n\t\t\t\t\"property-declaration\": \"nospace\",\n\t\t\t\t\"variable-declaration\": \"nospace\"\n\t\t\t}\n\t\t],\n\t\t\"typeof-compare\": true,\n\t\t\"unified-signatures\": true,\n\t\t\"variable-name\": [\n\t\t\ttrue,\n\t\t\t\"ban-keywords\",\n\t\t\t\"check-format\",\n\t\t\t\"allow-leading-underscore\"\n\t\t],\n\t\t\"whitespace\": [\n\t\t\ttrue,\n\t\t\t\"check-branch\",\n\t\t\t\"check-decl\",\n\t\t\t\"check-operator\",\n\t\t\t\"check-module\",\n\t\t\t\"check-separator\",\n\t\t\t\"check-rest-spread\",\n\t\t\t\"check-type\",\n\t\t\t\"check-preblock\"\n\t\t],\n\n\t\t\"directive-selector\": [true, \"attribute\", [\"app\", \"test\"], \"camelCase\"],\n\t\t\"component-selector\": [true, \"element\", [\"app\", \"test\"], \"kebab-case\"],\n\n\t\t\"no-inputs-metadata-property\": true,\n\t\t\"no-outputs-metadata-property\": true,\n\t\t\"no-host-metadata-property\": true,\n\t\t\"no-attribute-decorator\": true,\n\t\t\"no-input-rename\": true,\n\t\t\"no-output-rename\": true,\n\t\t\"no-forward-ref\": true,\n\t\t\"use-lifecycle-interface\": true,\n\t\t\"use-pipe-transform-interface\": true,\n\n\t\t\"templates-use-public\": true,\n\t\t\"invoke-injectable\": true\n\t}\n}\n```\n\nNow that our guidelines are defined, we need to apply them to our app.\n\n```bash\nng lint --fix\n```\n\nAll files should now pass linting. Finally, to help the editor indent lines properly in our project and to keep code styles consistent, we need to edit `.editorconfig`.\n\n```ini path=.editorconfig\n# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = tab\nindent_size = 4\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n```\n\n\n\n**Note:** This only works with editors that support editorconfigs.\n\n\n\n## Progressive web app\n\nBefore we start adding components, let's explore progressive web app, or PWA. PWA is a web application that has a set of capabilities (similar to native apps) which provide an app-like experience to users. Some other capabilities include full responsiveness and browser compatibility, connectivity independence and self-updates. In the `src` directory create a file called `sw.js` and paste the code below.\n\nFor more information on PWAs, check out the [developer's documentation](https://developers.google.com/web/progressive-web-apps/).\n\n```javascript path=src/sw.js\nlet log = console.log.bind(console);\nlet err = console.error.bind(console);\n\nlet version = '1';\nlet cacheName = 'pwa-client-v' + version;\nlet dataCacheName = 'pwa-client-data-v' + version;\nlet appShellFilesToCache = [\n './',\n './index.html',\n // \"./inline.bundle.js\",\n // \"./polyfills.bundle.js\",\n // \"./styles.bundle.js\",\n // \"./vendor.bundle.js\",\n // \"./main.bundle.js\",\n './manifest.json',\n];\n\nself.addEventListener('install', ev => {\n ev.waitUntil(self.skipWaiting());\n log('Service Worker: Installed');\n\n ev.waitUntil(\n caches.open(cacheName).then(cache => {\n log('Service Worker: Caching App Shell');\n return cache.addAll(appShellFilesToCache);\n })\n );\n});\n\nself.addEventListener('activate', ev => {\n ev.waitUntil(self.clients.claim());\n log('Service Worker: Active');\n\n ev.waitUntil(\n caches.keys().then(keyList => {\n return Promise.all(\n keyList.map(key => {\n if (key !== cacheName) {\n log('Service Worker: Removing old cache', key);\n return caches.delete(key);\n }\n })\n );\n })\n );\n});\n\nself.addEventListener('fetch', e => {\n log('Service Worker: Fetch URL ', e.request.url);\n\n // Match requests for data and handle them separately\n e.respondWith(\n caches.match(e.request.clone()).then(response => {\n return (\n response ||\n fetch(e.request.clone()).then(r2 => {\n return caches.open(dataCacheName).then(cache => {\n console.log('Service Worker: Fetched & Cached URL ', e.request.url);\n cache.put(e.request.url, r2.clone());\n return r2.clone();\n });\n })\n );\n })\n );\n});\n```\n\nNow we need to register our service worker and use it to cache files locally. In `index.html` add the below code in a script block using `` under the `app-root` tag.\n\n\n```html path=src/index.html\n\n```\n\n\nNext, we need to add the web app manifest. The manifest is a file in `json` format that provides the name, description, icon locations and other information required for an app to be considered a PWA. It lets users install the web app on the home screen just like native apps without going through an app store. Create a `manifest.json` in the `src` directory the paste the following code.\n\n```javascript path=src/manifest.json\n{\n \"name\": \"Carbon Angular Starter\",\n \"short_name\": \"Starter\",\n \"icons\": [\n {\n \"src\": \"/assets/icons/favicon-32x32.png\",\n \"sizes\": \"32x32\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/assets/icons/android-chrome-192x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/assets/icons/icon-144x144.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/assets/icons/icon-192x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/assets/icons/icon-256x256.png\",\n \"sizes\": \"256x256\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/assets/icons/icon-384x384.png\",\n \"sizes\": \"384x384\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/assets/icons/icon-512x512.png\",\n \"sizes\": \"512x512\",\n \"type\": \"image/png\"\n }\n ],\n \"background_color\": \"#ff00ff\",\n \"theme_color\": \"#ffff00\",\n \"display\": \"standalone\",\n \"start_url\": \"/\"\n}\n```\n\nWe will also need to add `sw.js` and `manifest.json` into our asset entities (build & test) in `angular.json` and reference the `manifest.json` and `theme-color` in the `index.html` `` tags. The theme color tells the browser with what color to tint UI elements such as the address bar.\n\n```javascript path=angular.json\n\"assets\": [\n \"src/favicon.ico\",\n \"src/assets\",\n \"src/sw.js\",\n \"src/manifest.json\"\n],\n```\n\n```html path=src/index.html\n\n\n```\n\nFinally, let's download the different sizes of icons to the `src/assests/icons` directory by running the following commands:\n\n```bash\nmkdir src/assets/icons\ncurl -o src/assets/icons/android-chrome-192x192.png https://raw.githubusercontent.com/carbon-design-system/carbon-angular-starter/master/src/assets/icons/android-chrome-192x192.png\ncurl -o src/assets/icons/icon-144x144.png https://raw.githubusercontent.com/carbon-design-system/carbon-angular-starter/master/src/assets/icons/icon-144x144.png\ncurl -o src/assets/icons/icon-192x192.png https://raw.githubusercontent.com/carbon-design-system/carbon-angular-starter/master/src/assets/icons/icon-192x192.png\ncurl -o src/assets/icons/icon-256x256.png https://raw.githubusercontent.com/carbon-design-system/carbon-angular-starter/master/src/assets/icons/icon-256x256.png\ncurl -o src/assets/icons/icon-384x384.png https://raw.githubusercontent.com/carbon-design-system/carbon-angular-starter/master/src/assets/icons/icon-384x384.png\ncurl -o src/assets/icons/icon-512x512.png https://raw.githubusercontent.com/carbon-design-system/carbon-angular-starter/master/src/assets/icons/icon-512x512.png\n```\n\n## Run the app\n\nNow we can run our app for a quick preview inside the browser.\n\n```bash\nnpm start\n```\n\nYour app should now be running with the message: `** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **`\n\nBefore we start adding components we want to start with an empty project, so delete everything in `app.component.html` except for the `router-outler`. We will also have to delete the test that was associated with this code. So in `app.component.spec.ts`, delete the `should render title` and `should have as title 'carbon-angular-tutorial'` test.\n\n## Add UI Shell\n\nNext, we're going to create an Angular component called `Header` to use with the UI Shell Carbon component. Using Angular CLI we will create this component inside the `src/app` directory.\n\n```bash\nng g component header --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/header\n├── header.component.html\n├── header.component.scss\n├── header.component.spec.ts\n└── header.component.ts\n```\n\n### Import UI Shell\n\nNext we'll import our Carbon UI Shell components into `app.module.ts`, `app.component.spec.ts` and `header.component.spec.ts`. Set up the file like so:\n\n\n```javascript path=src/app/app.module.ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { HeaderComponent } from './header/header.component';\n\n// carbon-components-angular default imports\nimport { UIShellModule } from 'carbon-components-angular';\n\n@NgModule({\n declarations: [\n AppComponent,\n HeaderComponent\n ],\n imports: [\n BrowserModule,\n AppRoutingModule,\n UIShellModule\n ],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n\n\n```javascript path=src/app/app.component.spec.ts,src/app/header/header.component.spec.ts\nimport { UIShellModule } from 'carbon-components-angular/ui-shell/ui-shell.module';\n```\n\n\n\n```javascript path=src/app/app.component.spec.ts,src/app/header/header.component.spec.ts\nTestBed.configureTestingModule({\n declarations: [HeaderComponent],\n imports: [UIShellModule]\n});\n```\n\n\n\n\n**Note:** You can find a description of the different components used in UI Shell in our [carbon-components-angular](https://github.com/IBM/carbon-components-angular/tree/master/src/ui-shell) package.\n\n\n\n### Import icons\n\nNow let's import the icons from our `@carbon/icons-angular` package. In `app.module.ts`, `app.component.spec.ts` and `header.component.spec.ts`, we need to import each individual icon we will use.\n\n\n```javascript path=src/app/app.module.ts,src/app/app.component.spec.ts,src/app/header/header.component.spec.ts\nimport { Notification20Module } from '@carbon/icons-angular/lib/notification/20';\nimport { UserAvatar20Module } from '@carbon/icons-angular/lib/user--avatar/20';\nimport { AppSwitcher20Module } from '@carbon/icons-angular/lib/app-switcher/20';\n```\n\n\n```javascript path=src/app/app.module.ts,src/app/app.component.spec.ts,src/app/header/header.component.spec.ts\nimports: [Notification20Module, UserAvatar20Module, AppSwitcher20Module];\n```\n\nThen we need to add the template code. Populate `header.component.html` with:\n\n\n```html path=src/app/header/header.component.html\n\n\t\n\t\tRepositories\n\t\n\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\n\n```\n\n\nNext import the header compoenent in `app.component.spec.ts` and add the component in `app.component.html`\n\n\n```javascript path=src/app/app.component.spec.ts\nimport { HeaderComponent } from './header/header.component';\n```\n\n\n```javascript path=src/app/app.component.spec.ts\ndeclarations: [HeaderComponent];\n```\n\n```html path=src/app/app.component.html\n\n
\n \n
\n```\n\nLet's add some padding to the top of the document, so the content is below the header. We are going to do this by using the `bx--header` class provided by carbon. So in `header.component.ts` lets hostbind that class.\n\n```javascript\nimport { Component, HostBinding } from '@angular/core';\n ...\n\t@HostBinding('class.bx--header') headerClass = true;\n```\n\n## Create pages\n\nNext thing we need to do is create the files for our content. These files will be located in the `app` folder inside of `src`. It should be a sibling of `header`.\n\nOur app will have two pages. First, we need a landing page. Go ahead and stop your development server (with `CTRL-C`) and then:\n\n```bash\nng g module home --routing --lint-fix\nng g component home/landing-page --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/home\n├── home\n│   ├── landing-page.component.html\n│   ├── landing-page.component.scss\n│   ├── landing-page.component.spec.ts\n│   └── landing-page.component.ts\n├── home-routing.module.ts\n└── home-page.module.ts\n```\n\nAnd a repo page:\n\n```bash\nng g module repositories --routing --lint-fix\nng g component repositories/repo-page --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/repositories\n├── repositories\n│   ├── repo-page.component.html\n│   ├── repo-page.component.scss\n│   ├── repo-page.component.spec.ts\n│   └── repo-page.component.ts\n├── repositories-routing.module.ts\n└── repositories.module.ts\n```\n\nNow you can restart your server with `npm start`.\n\n## Add routing\n\nWe need to update routing functionality to enable the loading of `repositories`. Inside `app-routing.module.ts` we'll add the following code in the routes array:\n\n```javascript path=src/app-routing.module.ts\nconst routes: Routes = [\n {\n path: '',\n loadChildren: () => import('./home/home.module').then(m => m.HomeModule),\n },\n {\n path: 'repos',\n loadChildren: () =>\n import('./repositories/repositories.module').then(\n m => m.RepositoriesModule\n ),\n },\n];\n```\n\nAnd modify the `NgModule` declaration to use the hash router:\n\n```javascript path=src/app-routing.module.ts\n@NgModule({\n imports: [RouterModule.forRoot(routes, { useHash: true })],\n exports: [RouterModule],\n})\nexport class AppRoutingModule {}\n```\n\nAnd add routes for the landing and repo pages:\n\n```javascript path=src/app/home/home-routing.module.ts\nimport { LandingPageComponent } from './landing-page/landing-page.component';\n\nconst routes: Routes = [\n {\n path: '',\n component: LandingPageComponent,\n },\n];\n```\n\n\n\n```javascript path=src/app/repositories/repositories-routing.module.ts\nimport { RepoPageComponent } from './repo-page/repo-page.component';\n\nconst routes: Routes = [\n {\n path: '',\n component: RepoPageComponent\n }\n];\n```\n\n\n\nAfter that we need to do a couple quick fixes to the UI Shell to have it route to the repo page.\n\n```html path=src/app/header/header.component.html\nRepositories\n```\n\nYou should now have a working header that routes to the repos pages without full page reload!\n\n## Submit pull request\n\nWe're going to submit a pull request to verify completion of this tutorial step and demonstrate a couple related concepts.\n\n### Continuous integration (CI) check\n\n\n\n**Note:** Before you run any tests, make sure that you are using ChromeHeadless in `karma.conf.js` instead of Chrome.\n\n\n\nWe have `lint` and `test` scripts defined in `package.json` that verify file formatting for files that have been touched since the last Git commit. You'd typically also have that script run your test suite as part of your CI build. Go ahead and make sure everything looks good with:\n\n```bash\nng lint --fix\nnpm run lint && npm test\n```\n\n\n\n**Note:** If this gives an error, it's likely that some of your source files are not properly formatted.\n\n\n\n### Git commit and push\n\nBefore we can create a pull request, we need to stage and commit all of our changes:\n\n```bash\ngit add --all && git commit -m \"feat(tutorial): complete step 1\"\n```\n\nThen, push to your repository:\n\n```bash\ngit push origin angular-step-1\n```\n\n\n\n**Note:** If your Git remote protocol is HTTPS instead of SSH, you may be prompted to authenticate with GitHub when you push changes. If your GitHub account has two-factor authentication enabled, we recommend that you follow these instructions to [create a personal access token for the command line](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line). That lets you use your token instead of password when performing Git operations over HTTPS.\n\n\n\n\n\n**Note:** If you receive a `non-fast-forward` error, it's likely that your forked repository is behind the original repository and needs updated. This can happen if the tutorial was updated after you began working on it. To fix, run `git pull upstream angular-step-1` to merge the changes into your branch, then you can try pushing again. Or, you can [manually merge](https://help.github.com/en/articles/syncing-a-fork) in the upstream changes.\n\n\n\n### Pull request (PR)\n\nFinally, visit [carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular) to \"Compare & pull request\". In doing so, make sure that you are comparing to `angular-step-1` into `base: angular-step-1`. Take notice of the [Netlify](https://www.netlify.com) bot that deploys a preview of your PR every time that you push new commits. These previews can be shared and viewed by anybody to assist the PR review process.\n\n\n\n**Note:** Expect your tutorial step PRs to be reviewed by the Carbon team but not merged. We'll close your PR so we can keep the repository's remote branches pristine and ready for the next person!\n\n\n","fileAbsolutePath":"/zeit/26e993f/src/pages/tutorial/angular/step-1.mdx"}}}}