Step 4: Simple Angular app - solargis/cdk-workshop GitHub Wiki
In this step we will replace simple index.html web with simple Angular application.
Angular app is the same code as generated by ng new, but included in our project structure. We will add build scripts to build both API and web.
We will use some Angular code to call simple API and display the response.
git checkout step-4/angular
npm install
NOTE: if you have uncommited work in project repository it is not possible to checkout new Git branch, you have 3 options:
git stash- move all local changes into a 'drawer', more info heregit commit -a -m "my change"- commit all changes to local branchgit reset --hard HEAD- remove all local changes
- Check Angular app setup:
ng serve - Open app in browser: http://localhost:4000
Install Angular CLI:
npm install -g @angular/cli
Add npm dependencies:
npm install --save @angular/animations @angular/common @angular/compiler @angular/core @angular/forms @angular/platform-browser @angular/platform-browser-dynamic [email protected] tslib [email protected]
npm install --save-dev @angular-devkit/build-angular @angular/cli @angular/compiler-cli @angular/language-service trash-cli
Extract Angular app code from step4-angular.zip into ./
./lib/web/src/app/app.component.ts - root Angular component
./lib/web/src/app/app.module.ts - root Angular module
./lib/web/src/assets/solargis.svg - Solargis logo image
./lib/web/src/environments/environment.prod.ts - production environment file
./lib/web/src/environments/environment.ts - dev environment file
./lib/web/src/favicon.ico - favicon for Angular app
./lib/web/src/index.html - base index.html for Angular app
./lib/web/src/main.ts - Angular bootstrap javascript code
./lib/web/src/polyfills.ts - default polyfills
./lib/web/src/styles.scss - root SCSS styles
./lib/web/browserslist - defined target browsers
./lib/web/tsconfig.app.json - TypeScript configuration for app
./lib/tsconfig.web.json - generic TypeScript config for web
./angular.json - Angular CLI config file
Delete simple index.html: ./lib/web/index.html
- Check Angular app setup:
ng serve - Open app in browser: http://localhost:4000
Change source of the web app to dist/web in CDK stack: ./cdk/cdk-workshop-stack.ts
const source = Source.asset(resolve(rootPath, 'dist/web'));
Add build scripts into ./package.json
"scripts": {
"build": "npm run api:build && npm run web:build",
"api:build": "trash dist/api && tsc -p lib/tsconfig.api.json",
"web:build": "trash dist/web && ng build --aot --prod"
},
Build and deploy
npm run build
cdk deploy
Add Angular config factory: ./lib/web/src/app/config.ts
import { Meta } from '@angular/platform-browser';
export class Config {
apiBaseUrl: string
}
export function configFactory(meta: Meta): Config {
// read API base url from <meta> tag
const apiBaseMeta = meta.getTag('name=x-api-base');
return {
apiBaseUrl: apiBaseMeta.content
};
}
Update app component to display hello message from API: ./lib/web/src/app/app.component.ts
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Config } from './config';
<!-- in the template -->
<pre>{{ hello$ | async | json }}</pre>
export class AppComponent implements OnInit {
title = 'cdk-workshop web';
hello$: Observable<any>;
constructor(private config: Config, private http: HttpClient) {}
ngOnInit(): void {
this.hello$ = this.http.get(this.config.apiBaseUrl + 'hello');
}
}
Add config provider in Angular module: ./lib/web/src/app/app.module.ts
import { HttpClientModule } from '@angular/common/http';
import { Config, configFactory } from './config';
// module imports
imports: [
BrowserModule,
HttpClientModule
],
providers: [
{ provide: Config, useFactory: configFactory, deps: [Meta] }
],
Build and deploy
npm run build
cdk deploy
- Test in browser