marcellpaganini/angular-lazy-loading

angular-lazy-loading

Built With

• TypeScript
• Angular

Getting Started

Prerequisites

• Node.js

Project Setup (VS Code)

• Angular

  • Install Angular CLI globally (one time setup)

  npm install -g @angular/cli
  ng version

  • Open project in vsCode (command run in the project directory)

  code .

  • Create Angular App

  ng new project-name

  • Run the project and open http://localhost:4200

  ng serve

• Create new Angular Component

  ng generate component componentName
  
  --dry-run 
  --skip-tests
  --module=app
  --skip-import 

  • Create new Angular Service

  ng generate service service-name

  • Lazy loading

  ng generate module name --route name --module app.module

Topics practiced to get things done

Angular

• Lazy loading
  • Feature module with routing
  • forRoot() / forChild()
  • Dynamic reactive forms
• Pre loading
  • Resolver

Error messages for future reference

✖ Error: Invalid Character (typing ng --version in the terminal)
Solution: Use bash (workaround)
✖ Error: Property 'name' has no initializer and is not definitely assigned in the constructor.
Solution: Add "strictPropertyInitialization": false in the compiler options of the tsconfig.json or a default value to the property.
✖ Error: Can't bind to 'ngModel' since it isn't a known property of 'input'.
Solution: Add FormsModule and ReactiveFormsModule to the imports array in app.module.ts.