D4mations.com

Building an Angular 5 + Bootstrap 4 application

[ad_1]
https://i.ytimg.com/vi/zEvzW_sSXk0/hqdefault.jpg



This is a walkthrough tutorial on how to build a Serverless Event Registration system using Angular 5, Angular CLI, Bootstrap 4, and Form.io. In 1 hour, we will complete a full application with User Authentication, Event Management, and Event Registration.

Here is are the links from the presentation.

– http://travistidwell.com/presentations/eventmanager
– https://portal.form.io
– https://github.com/formio/angular-formio
– https://github.com/formio/angular-app-starterkit
– https://github.com/formio/formio.js

Original source

d4mer

,
, , , , , , , ,

39 responses to “Building an Angular 5 + Bootstrap 4 application”

  5. Getting schema validation error when I add below code in angular.json (angular6 i am using). Can you pls tell me what to do for angular 6 ,

    "addons": [

    "../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"

    ]

  6. Travis, I am having a tough time pathing to an image file, using your git repo as my base. What is your best practice for locating/ pathing to an image folder? Do you take into account a routine that copies the images folder to production when you move from dev to production? Thanks for a great tutorial!

  13. I came here to learn about Angular 5 and Bootstrap 4. Once installed, I was presented with a formio tutorial that will not help me, or many others, when aiming to code at an enterprise position. Please edit the title because it's misleading.

  14. my heroku deployment of this project failed and says that I have to `Consider changing the function expression into an exported function`. Pointing to appModule failing during compilation – it is specifically pointing to the lazy loading. To be more specific here —> loadChildren: () => AuthModule under decorator. Appreciate your input.

  15. Awesome tutorial! I'm new to all this. Found this video youtubing how to build an app using angular and formio. I followed every steps, however, using my formio server (open source version – https://github.com/formio/formio) instead of the form.io cloud version.

    In the open source version, there's no Premium Nested Form Component, however, found a "Form Component" located under the Special Components menu when creating a Resource object.

    I ran into the following issue whereas my Participant gets created in formio without the Event resource associated. Therefore, when I consult the Event Participants I see 0 records. When consulting formio, the Participant resource shows 1 record, however, the Event field is empty.

    Is there anything I need to add into my participant,module.ts file? Is there a difference between the formio Cloud "Nested Form Component" vs the open source "Form Component"?

    Thank you for clarifying

  17. great tuto dude ! you forgot to show the declarations of the "HeaderComponent" in app.module.ts if not we can't see the navBar ! really thank you for this video i'm new to angular and ur video really helps me!
    waiting for new videos 💪

  20. Title is misleading in order to get better hit in searches, cause its basically a formio tutorial with angular scaffolds, but I am totally satisfied with the content as I was looking for some cool Angular projects to learn more, and formio is in my wishlist for future projects, although I was expecting a bit more stress on Angular and Bootstrap too, instead of deep-diving in formio unlike the title suggests, but good learning and time not wasted.
    Thank you

  28. I reinstalled Formio and this is the same error I get. ERROR in ./node_modules/angular-formio/grid/grid.component.js
    Module not found: Error: Can't resolve 'formiojs/build/components' in 'C:Projectssafetynetwebnode_modulesangular-formiogrid' . But, the grid module is there so I'm not sure why it says it's not

  33. I am doing ditto as in the video but went into huge errors. It says it can not find the three files in style.css. The Yeti _variable can not be found or is unreadable. Things change every other day. The npm install –save font-awsome did not work either. need help here.

  36. font-awesome crashed for me. Didn't like it when added in the cli? I did upgrade the cli to 1.7 today, was having bootstrap 4 issues from another project. Looks like I need to import the fontawesome module why!! @import { AngularFontAwesomeModule } from 'angular-font-awesome';
    @NgModule({
    //…
    imports: [
    //…
    AngularFontAwesomeModule
    ],
    //…
    })
    export class AppModule { }

Leave a Reply