Angular Project setup
- install angular client with npm
- “code .” to open studio code here
- “ng-serve” start the server // clear the app.component.html page
install -g @angular/cli code . ng-serve
Connecting Angular to Netlify
- create .tolm file for netlify build automatisation
- install netlify client avec npm
- create & config a new site, my team, site name
install -g netlify-cli netlify init
build command: ng build --prod dir to deploy: dist/angular-explorer
Creating a Pre-rendered Site Angular and Scully
Scully is the one static site generator
ng add @scullyio/init
ng build --prod
npm run scully
with "netly init" we choose the dir dist/angular-explorer as build dir with scully run, it became dist/static
now it’s live, if you do
- ctrl+p then
- disable javascript you will see the site is still up (no error)
Adding Signup and Login
create component in command line
ng generate component navigation --module app.module
add in navigation.component.html ```
<div class="login" data-netlify-identity-button></div>
add in app.component.html the component called app-navigation
selector: 'app-navigation', templateUrl: './navigation.component.html', styleUrls: ['./navigation.component.css'] })
<h1>Let's start explorer</h1> <app-navigation></app-navigation> <router-outlet></router-outlet>
- add script on index.html
- enable external provider for authentication on netlify administration panel
- then
Adding an Angular Contact Form
- use netlify function to pre-render a contact form
- check the doc at docs.netlify.com/forms/setup/#html-forms
ng component generate contact-form --module app.module
hidden field value need to match form name value<form name="contact-form" class="contact-form" method="POST" data-netlify="true" > <input type="hidden" name="form-name" value="contact-form">
=> add the component in app.component
@Component({
selector: 'app-contact-form',
templateUrl: './contact-form.component.html',
styleUrls: ['./contact-form.component.css']
})
<h1>Let's start explorer</h1>
<app-navigation></app-navigation>
<app-contact-form></app-contact-form>
<router-outlet></router-outlet>
=> check on Netlify dashboard > Form
can also trigger a notification on settings