Angular App using Bulma CSS Framework and GitHub Users API (ngbulmagithubusers)
This project was generated with Angular CLI version 8.1.2.
npm install -g @angular/cli
ng new ng8bulmatemplate --routing --style scss --enable-ivy --skip-install
Until the Ivy Renderer Engine is in production I strongly recogmend disabling it. In the angularCompilerOptions in your project's tsconfig.app.json file set enableIvy to false.
{
"compilerOptions": { ... },
"angularCompilerOptions": {
"enableIvy": false
}
}
AOT compilation with Ivy is faster and should be used by default. In the angular.json workspace configuration file, set the default build options for your project to always use AOT compilation.
{
"projects": {
"ng8bulmatemplate": {
"architect": {
"build": {
"options": {
...
"aot": true,
...
}
}
}
}
}
}
The style option specifies what CSS preprocessor is used in building the project. the options are: css, scss, less, sass, styl.
The routing option generates a file app-routing.module.ts file.
The enable-ivy option enables the next generation renderer.
This skip-install option disables the npm install after code generation.
ng new ngbulmagithubusers --routing --style scss --enable-ivy --skip-install
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
ng generate module core -m app
ng generate service core/services/user
ng generate component core/components/footer -m core
ng generate component core/components/header -m core
ng generate component contact -m app
ng generate component home -m app
ng generate component users/user-signal -m app
ng generate component users/user-list -m app
ng generate module users --routing
npm install bulma --save
Update the styles property in angular.json to include the new stylesheet for Bulma.
{
...
"styles": [
"node_modules/bulma/css/bulma.min.css",
"src/styles.css"
],
...
}
Modify the file src/app/core/core.module.ts add exports for HeaderComponent and FooterComponent.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FooterComponent } from './components/footer/footer.component';
import { HeaderComponent } from './components/header/header.component';
@NgModule({
declarations: [
FooterComponent,
HeaderComponent
],
imports: [
CommonModule
],
exports: [
HeaderComponent,
FooterComponent
]
})
export class CoreModule { }
npn install
At times, the package.json file can get out of date from what is current. To check for outdated packages install npm-check-update, run ncu to see outdated packages, and then run ncu -u to update the packages.
npm install -g npm-check-updates
ncu
ncu -u
npm install
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.