Git Product home page Git Product logo

angular-core-workshop's Introduction

Angular Core Workshop

We are going to use the Angular CLI and NRWL Extensions extensively in the workshop to streamline development and free us up to focus on core concepts.

Follow the steps below to get started!

NOTE: If you start from the 01-getting-started branch, the workspace and app is already generated with the correct npm scope set.

The Stack

NRWL Workspace

A NRWL workspace contains one or all of you Angular projects and libraries. It creates a monorepo for your applications domains. Nx helps add extra layer of tooling that can help manage your enterprise applications.

External Video Reference: Angular in a Microservices world

Angular Material

Angular Material is a UI library for Angular that gives you access to a modern material UI that works across web, mobile, and desktop applications with minimal custom CSS and setup.

JSON Server

Creates a quick and simple way to mock out a backend REST service. We can then deliver some mocked out data in JSON format to make sure everything is working as expected once our real backend is connected.

Getting Started

An Nx workspace is an Angular CLI project that has been enhanced to be enterprise ready. Being an Angular CLI project means it will be handy to have the Angular CLI installed globally, which can be done via npm or yarn as well.

npm install -g @angular/cli

Note: If you do not have the Angular CLI installed globally you may not be able to use ng from the terminal to run CLI commands within the project. But the package.json file comes with npm scripts to run ng commands, so you can run npm start to ng serve and you can run npm run ng to run any of the ng commands.

After you have installed the Angular CLI, install @nrwl/schematics.

npm install -g @nrwl/schematics

After installing, if you want to create a new Nx workspace with an application, you can by running:

create-nx-workspace angular-core-workshop --preset=empty --cli=angular --npmScope=workshop

NOTE: because the @nrwl/schematics have been installed the above command works, if you have issues with this command not working properly or would rather not install the Nrwl shcematics globally please refer to https://nx.dev/web/getting-started/getting-started for further instruction.

After the workspace is created you will need to cd into the app directory cd angular-core-workshop and install the Nrwl Angular schematic:

ng add @nrwl/angular

The next step is to generate an app in your workspace. Do so by running:

ng generate @nrwl/angular:application dashboard

You'll then be prompted to answer a few setup questions. Run the following for each question:

Which stylesheet format would you like to use? SASS(.scss)

Would you like to configure routing for this application? y

Lastly, please install the npm dependencies by running:

npm install

Then run the application:

npm run start

Navigate to localhost:4200 and you should see this:

You are good to go!

angular-core-workshop's People

Contributors

1marc avatar mburri avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-core-workshop's Issues

Document options when running create-nx-workspace

I am going through the setup as specified in this readme and after running npx create-nx-workspace angular-core-workshop I am asked a few questions. It would be nice to get some guidance about the answers to those questions.

The first one asks what to create in the new workspace. I assumed that the type would be an Angular application, but it looks like a blank workspace is expected. Given that answer, I guessed that the cli would be the Angular CLI because it's what he's talking about in the videos

It would be nice if the correct options were specified.

create-nx-workspace: command not found

Installed globally with:

  1. npm i -g @angular/cli
  2. npm i -g @nrwl/schematics

I have tried deleting my node_modules globally but to no avail.

Current node version is v10.16.0

Master isn't empty

It doesn't look like the branches are the same as what is expected from the course.

Angular v7

I have not been able to create the workspace with Angular 7, do I have to use version 6?

Name of font.

Hi, please help me to find font which Lukas used in VS Code during Frontend Masters course.

Finished the ng core video course

I finished the course a few days ago and my Front-end masters subscription expired (won't renew) and wanted to go deeper by completing the project.

I remember Lukas mentioning in the course that he encouraged to finish the other parts of the application

Where can I find the requirements/specs for this? or was that material exclusive to the workshop?

Course is not in sync with FrontendMasters workshop

Setup (02): As you are explaining in workshop. master branch is supposed to be clean. and no contents inside apps/ or libs/ but here i see lot of contents.

Can you help me. I feel like i am following wrong course or repository

image

Schematics app not found in @nrwl/workspace

I started the course sometime ago and when following the command ng new app it said that schematic app was not found in @nrwl/workspace. I spent some time fixing things around and have reduced the solution to following steps:

  1. Create the workspace using the following command:
    npx create-nx-workspace angular-core-workshop --preset=empty --cli=angular

  2. Change into the angular-core-workshop directory.
    cd angular-core-workshop

  3. Open nx.json file and replace "npmScope" property value to "workshop"

  4. Run the following command:
    ng config schematics.@nrwl/schematics:component.styleext scss

  5. Run the following command:
    ng add @nrwl/angular

  6. Open angular.json and replace

"cli": {
    "defaultCollection": "@nrwl/workspace"
}

with

"cli": {
    "defaultCollection": "@nrwl/angular"
}
  1. Use the following command to generate the dashboard application:

ng g app dashboard --routing -p=app --style=scss --unit-test-runner=karma

  1. Run following commands:
npm install @ngrx/store --save
npm install @ngrx/router-store --save
npm install @ngrx/effects --save
  1. Goto app.module.ts in dashboard application

Add this line at the top:

import { NxModule } from '@nrwl/angular';
And then add the following line in the imports array:

NxModule.forRoot()

Can't import from @angular/material

In version 9 of @angular/material you can no longer import from @angular/material directly:

Breaking changes:
Components can no longer be imported through "@angular/material". Use the individual secondary entry-points, such as @angular/material/button.
source

The wiki should probably reflect that.. here's the new snippet:

import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatIconModule } from '@angular/material/icon';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.