Spring Interview Question

Most Common Spring Interview Questions : This blog is just for a revision .

• What is dependency injection ?

Spring IoC container takes care of object creation and wiring them together.

1. Constructor constructor-arg : for mandatory dependencies
2. Setter ref : for optional dependencies
3. using @Autowired

• Types of IoC container?

1. BeanFactory
2. ApplicationContext

• What are the advantages of ApplicationContext?

1. Internationalization
2. Annotation support
3. Load all beans on start 
4. lazy-init for lazy loading
5. No need to register AutowiredBeanPostProcessor
6. Automatic BeanPostProcessor , BeanFactoryPostProcessor registration
7. Easy MessageSource access (for i18n)
8. ApplicationEvent publication

• Advantages of spring IoC ?

1. Less code
2. Easy testing
3. Loose coupling
4. Lazy loading

• What is spring bean ?

java class created by spring IoC container .

• Explain Spring bean life cycle.

1. Check the configuration
2. Initialization
3. Dependency Injection
4. set bean name
5. set bean class loader
6. set bean factory
7. set resource loader
8. set application event publisher
9. set message source 
10. set Application Context
11. set Servlet context
12. postProcessBeforeInitialization
13. afterPropertiesSet
14. init method
15. postProcessAfterInitialization
16. destroy
17. destroy

• Explain scope of bean .

1. singleton : default , one instance in the container 
2. prototype : new instance every time the getBean is called
3. request : one bean for life cycle of http request 
4. session : one bean for life cycle of http session
5. global session : one bean for life cycle of ServletContext

• What is BeanPostProcessor ?

implementation can define a callback method .

1. postProcessBeforeInitialization  before init method
2. postProcessAfterInitialization after init method

• How to create ApplicationContext ?

1. XML based :ClassPathXmlApplicationContext("xml file")
2. Annotation based : in web-servlet.xml use  <context:component-scan base-package= > .
3. Java based :  @Configuration ,  @Bean , @Scope, @Import , @ComponentScan

• Explain  JSR 250  annotations used in spring .

1. @PostConstruct : alternative to init 
2. @PreDestroy : alternative to destroy
3. @Resource(name ="")   : similar to @Autowired @Qualifier("") 

• Explain other annotations in spring to be used with annotation based configuration

1. @Required:applied on setter , the value should be provided in xml 
2. @Component parent of annotations
• @Controller , 
• @Repository , 
• @Service 

•  Explain Autowiring .

Enables us to inject dependency implicitly, using autowire in xml

1. no : explicit bean references 
2. byName : by the bean name in xml file.
3. byType : matches the type of the bean 
4. contructor : check the type of the parameter in constructor 

• Explain inner bean 

A bean used as property of another bean . A <bean> inside <property> .

• What are the new features in Spring 4 .

1. Added path to RequestMapping
2. MVC test framework
3. @RestController and AsyncRestTemplate is used.
4. instread of response it returns ListenableFuture 
5. uses java 8 , minimum requirement is Java 6.
6. define external bean configuration using a Groovy
7. Added @Description
8. @Lazy can be used in bean injection and definition .
9. @Autowired @Value can be used as meta annotations
10. Introduced ordering for autowired , using @Order and Ordered interface .
11. @Bean in @Configuration Class
12. Conditional filtering of beans added for @Conditional .
13. Generic type as qualifier for injecting bean
14. create custom annotation to expose attribute of the source annotation .

• New features added in Spring 5.

1. bean scopes : singleton, prototype , request , session , application , websocket (one bean for lifecycle of Websocket )

• Explain the components of Spring MVC.

1. Dispatcher Servlet
2. Handler Mapping
3. Controller
4. Model And View
5. View Resolver
6. View

• Explain Dispatcher Servlet

Front Controller for all incoming Request.

entry added in web.xml for dispatcher servlet

• org.springframework.web.servlet.DispatcherServlet
• loadOnStartUp = 1

Create {servlet-name}-servlet.xml,specify

• context:component-scan
• mvc:annotation-driven

• What is handler mapping

Dispatcher servlet checks with handler mapping and  redirects to the appropriate controller .

• What is view resolver ?

It determines the view to which the request has to be transferred .

1. InternalResourceViewResolver : based on URL , suffix and prifix
2. XmlViewResolver : view definition in  a dedicated XML .
3. ResourceBundleViewResolver : view definition in a property file .

• What is ServletContext ?

One per application , created once the web application is deployed .

To access in spring context , the controller must implement ServletContextAware   ,add either of the following code  
1. 

@Autowired

ServletContext context; 

2.
private ServletContext context;

public void setServletContext(ServletContext servletContext) {
    this.context = servletContext;
}

Methods :

1. getInitParameter () : returns value set in <context-param> <param-name>

• What is servletConfig?

One per servlet

1. getInitParameter(String name): returns value set in <init-param><name>  
2. getInitParameterNames(): returns all <init-param>
3. getServletContext(): returns ServletContext
4. getServletName(): returns value set in <servlet><servlet-name>

• What is servlet context listener ?

gets notified when servlet context is initialized or destroyed .

• Explain  Spring MVC annotations?

1. @Controller : class is a web request handler 
2. @Component : auto-detection when using annotation-based 
3.  @RestController = @Controller + @ResponseBody
4. @RequestMapping method: get/put value : URL
5. @PathVariable input in request URL.
6. @RequestParam input in url with ?id=
7. @Transactional : can be applied to class or method.
8. @EnableWebMvc enable spring MVC through java configuration.

• What is WebMvcConfigurer .

To customise web MVC configuration.
Like add view controller
View resolver in java code .

• What is WebApplicationInitializer

used to configure servlet context programmatically , used as an alternative to configuration in web.xml

• Explain file upload in spring 

1. use CommonsMultipartResolver add dependency commons-fileupload
2. add bean configuration in servlet-config.xml file 
• "multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
3. input type = file in html
4. @RequestParam MultipartFile

• What is a profile

If we want enable a bean only during development and not in production we can assign the profile to the bean , using @Profile("dev")

• How to declare a profile ?

1. Set the servlet context init Param using WebApplicationInitializer
2. Set context Param in web.xml
3. Set the JVM system parameter
4. Set the environment variable
5. Set in maven profile
6.  Configurable environment set active profile

• Explain spring events 

1. event class should extend ApplicationEvent
2. publish event can be done using applicationEventPublisher.publishEvent(customSpringEvent);
3. listener has to implement ApplicationListener<MyEvent>
4. listener need to override onApplicationEvent(MyEvent myEvent)

• What are the events related to ApplicationContext

1. ContextRefreshedEvent
2. ContextStartedEvent
3. ContextStoppedEvent
4. ContextClosedEvent

• What is Join Point ?

An event occurred during the execution of a program.

1. method called 
2. state changed
3. exception occurred 

• What is an Point Cut ?

an expression

• What is an advice ?

Action taken (method ).

1. before
2. after
3. around : decides whether the method gets executed or not
4. afterReturning :executed only if method executed successfully .
5. afterThrowing : executed only if exception is occurred during method execution .

• What is aspect ?

class that implements cross cutting concerns .

1. logging
2. security
3. transaction management
4. exception handling
5. performance testing

• What is weaving?

Linking aspect with other objects/application types to create adviced object.

• What is proxy?

Object created after applying advice to target object.

• What are the features of spring boot?

1. Auto configuration : configure beans based on the jar available at classpath  and beans used in the project . Annotations used : @ConditionalOnClass, @ConditionalOnMissingBean .
2. Starters project
3. Cli using groovy
4. Actuator
5. Initializer

• Explain Spring Boot Annotations

1. @SpringBootApplication 
2. @EnableAutoConfiguration

• What is Spring Boot Initilizr ?

It is used to generate a new project .

• What is Spring Boot Actuator

adds production grade services to the application

1. info
2. health : up
3. trace
4. httptrace

• How do you create Logger in Spring boot .

org.slf4j.Logger logger = org.slf4j.LoggerFactory.getLogger(MyClass.class);

configure logger level , file path , pattern console profile in application.properties

create logback.xml

Angular interview Questions

Most Common Angular Interview Questions :

• What is Angular  ?

Client Side Framework based on node js and typescript

• What are the building blocks of Angular ?

Component , Template , Service , Dependency Injection , Data binding , Routing , Module

• How does Angular Application starts ?

main.ts -> platformBrowserDynamic().bootstrapModule(AppModule) -> AppModule

• What is a component ?

Basic building block , it has template which is loaded on using the selector .

• What is a template ?

it is the html part of component .
Two types are there
1. within the component.ts enclosed in back tick
2. in a separate html file .

• How to style a component ?

Three ways : 1. inside the component.ts using style
2. in a separate css using styleUrl
3 . multiple css files can be included using styles [] .

• What is providers for component ?

It specifies the Services to be used in the component .

• Explain model to view binding ?

Two ways : {{}} Interpolation : variables defined in component can be used in template .
[] property binding : a known property of html element is bound to a variable defined in component .

• Explain view to model binding ?

using () : event binding : binds an event to method defined in component .

• Explain two way binding ?

using [()] : it is a combination of event binding and property binding , it synchronizes the data between model and view . 
eg : <input [(ngModel)] = "myInput" > <span >you entered {{myInput}} </span>

• What is a module ?

Module groups related components , services , directives and pipes .
4 Parts :
1. declarations [] : list of components , pipes and directives
2. imports [] : list of modules , used to import routes
3. providers [] : list of services
4. bootstrap : the root component that Angular creates and inserts into the index.html.

• What is a root module ?

The module loaded on start of the app . This imports BrowserModule  . Only one per app .

• What are directives ?

Add to the DOM .

3 Types :
Components :directives with template.
Structural :  add / remove DOM elements. *ng-if , *ng-for
Attribute  : change the appearance or behavior of an element, component, or another directive. Eg : ngClass

• How to create custom attribute directive ?

using @Directive , in the constructor we can access the native element from ElementRef.nativeElement , using which we can manipulate the DOM.
we can also use @Input to get the input in the specified property .

• How to create custom structural directive ?

using @Directive , inject ViewContainerRef and TemplateRef , in ngOnChanges()  using this.container.createEmbeddedView  .

• How to pass data from parent and child component ?

Using @Input on a property in child component and pass the data to property in while it is called in parent component .

• How to pass data from child to parent component ?

1.  Using @ViewChild(Component class) add to a variable of Child component in parent  component  
2.  Using @Output and EventEmitter .eg :  @Output() voted = new EventEmitter<boolean>();            this.voted.emit(agreed);

Note: EventEmitter is subclass of Observable .

• How to pass data between unrelated component ?

Using a service , create a variable as BehaviorSubject type , another variable as observable for the variable  and a method to change the value . Subscribe the observable in both components , if value is changed from one component it will be reflected in other component .

• What is LifeCycle hook?

For a component Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM. 

1. ngOnChanges()
2. ngOnInit()
3. ngDoCheck()
4. ngAfterContentInit()
5. ngAfterContentChecked()
6. ngAfterViewInit()
7. ngAfterViewChecked()
8. ngOnDestroy() 

Before these methods the constructor is called .

• What is a service ?

It is used to perform a task , like http put or get .

• What is dependency Injection ?

Angular creates instance of all  the services and makes it available for the component . Services are singleton .

1. constructor injection :dependencies are made available through constructor 
2. property injection :directly setting the object property .

• What is @optional

For optional dependencies , injector will inject null if dependencies are not found.

• What is injector?

resolves token into dependency .

• Explain   Hierarchical injector.

tree of injectors that parallels an app's component tree

• What is a provider ?

is an instruction to the DI system on how to obtain a value for a dependency .

• What is view provider

does not allow content be injected in the projected content

• How to create a service ?

using @Injectible

• When to use @providedin : root ?

when service is used anyway , if service is rarely used specify the service in provider [] of component .providedIn can also hold any module other than root .

• What is routing?

Loading of components based on URL .

• How to add routing to an angular app?

Create Routes[] in module , in imports add RouterModule.forRoot(appRoutes).Add router-outlet where the component should be loaded.

• What is RouterLink directive ?

generates hyperlink that can be embedded in anchor tags for navigation .

• What is redirectTo ?

It is used to match a wildcard and redirect to a different URL . The component associated with the redirected URL will be loaded .

• What is useHash:true

enables hash(#) based routing .

• What is Routing module?

AppRoutingModule is top level module dedicated for routing .In the ng module exports: [ RouterModule ]

• What is a feature module ?

Contains a group of components, directives pipes  with similar features  and imported in root module .

• What is lazy routing ?

Root module should be split into feature module and a routing module . Feature modules can have its own routing module . RouterModule.forRoot() is used in the app Routing Module and RouterModule.forChild() is used in the Routing Module of feature module . In the app routing module loadChildren is used instead of component .

• What is route Guards ?

tells the router whether or not to navigate to the requested route 

CanActivate

CanActivateChild

CanDeactivate

CanLoad

Resolve

• What is form ?

Handles user data . 2 Types :

1. Template driven :
2. Model Driven /Reactive

• Explain Template driven form .

Used for the following :

1.  two-way data binding : ngModel , ngModelGroup
2.  change tracking: pristine, dirty , valid 
3.  validation : required  , pattern , minlength 
4.  error handling  *ngIf

• Explain Model Driven / reactive Forms .

Using ReactiveFormsModule
1. FormGroup FormControl
2. FormBuilder
3. FormArray

• How to create a custom validator ?

Create a typescript class with a method
Add it in formbuilder . Group method for the name

• What is shadow DOM?

provides hidden area on the page for scripts HTML and CSS . Markup and styles in this area will not affect the other part of the page also will not be affected by other  part .

• What is view encapsulation ?

Added to a component using encapsulation attribute .

1. ViewEncapsulation.Native : lets angular to use the shadow DOM . isolates the component , default styles will not be applied to this component . 
2. ViewEncapsulation.Emulated : applied by  default 
3. ViewEncapsulation.None : the styles defined for this component is applied to all other component .

• Diffentiate observable and promise.

1. Promise is executed immediately, observable is lazy and executes only if it is subscribed.
2. Observable can be cancelled, promise can't.
3. Promise handles single event , observable is a stream and allows multiple events.

• What is async pipe?

It allows to bind with the observable directly in the template.
The advantage of using AsyncPipe is that we don’t need to call subscribe on our observable and store the intermediate data on our component.

• How to create a promise .

Promise handles single event when async operation completes or fails
let promise = new Promise((resolve, reject) => {

    //http call 

  });

return promise;

•  What is transpilation ?

Convert from one type of source code to another type of source code .

1. Build time : takes the type script files and compiles it to javascript files 
2. Runtime : happens at the browser at runtime . Typescript compiles is loaded in the browser which compiles the typescript files on the fly .

• What is webpack?

A tool to bundle application source code and load that code from server to browser .

• What are the special characters in angular ?

1. [] : property binding 
2. {{}} : interpolation
3. () : event binding
4. [()] : two way binding 
5. | : pipe
6. * : structural directive
7. ?  : safe navigation 
8. # : template reference variable 

• Explain folders in angular project ?

1. e2e : contain end to end tests
2. src : application code
3. assets : static content like images .
4. environments : configuration for developer and production environments .

• Explain the important files in Angular .

1. package.json
2. angular.json
3. main.ts
4. tslint.json
5. tsconfig.app.json
6. proxyconfig.json

• How do you change the path of node_modules?
• What are the symbols ~ and ^ in node modules 
• How do you build your application for production

ng build --prod
the bundles will be generated in dist folder

• What are polyfils

Polyfil scripts should be loaded for angular application to work on the supported browser .

• Explain angular binding Construct .

1. Interpolation
2. property binding
3. attribute binding
4. class binding
5. style binding
6. event binding

• What is XHR ?

XML Http Request built in object in browser to request data from server .

• How does angular safegaurd the app against XSS attacks ?

Cross side scripting is injecting malicious code in web pages gain access and steal data .Sanitization : Inspection of untrusted value and turing it value that is safe to insert in DOM. Security Constructs are as below

1. HTML 
2. style
3. URL
4. resource URL

• What is DomSanitizer ?

helps preventing the cross side .

1. Sanitize :
2. bypassSecurityTrustHtml
3. bypassSecurityTrustScript
4. bypassSecurityTrustStyle
5. bypassSecurityTrustUrl
6. bypassSecurityTrustResourceUrl

• How does hot reloading works internally?

ERROR Error: Found the synthetic property @transitionMessages.

Hi Guys ,

Today I have faced this error :

ERROR Error: Found the synthetic property @transitionMessages.

The fix is to add the following modules to your ng module file .

------------app.module.ts---------------------------------------------------------

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { HttpModule } from '@angular/http';

import {MatSelectModule} from '@angular/material/select';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

const appRoutes:Routes =[

{path:'cust-detail',component: CustDetailComponent},

{path:'mcq',component: MCQComponent},

{path:'sign-up',component: SignUpComponent}

];

@NgModule({

  declarations: [

    AppComponent,

    CustDetailComponent,

    MCQComponent,

    SignUpComponent

  ],

  imports: [

    BrowserModule,

FormsModule,

MatSelectModule,

BrowserAnimationsModule

  ],

  providers: [QuizServiceService],

  bootstrap: [AppComponent]

})

export class AppModule { }

----------------------------------------------------------------------------------------

This error comes if you are using mat-select and mat-option . This is required module so we need to import it to make the select functionality work .

The full stack trace is as below :

ERROR Error: Found the synthetic property @transitionMessages. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

    at checkNoSyntheticProp (platform-browser.js:1141)

    at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setProperty (platform-browser.js:1125)

    at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.setProperty (core.js:11505)

    at setElementProperty (core.js:8261)

    at checkAndUpdateElementValue (core.js:8212)

    at checkAndUpdateElementInline (core.js:8159)

    at checkAndUpdateNodeInline (core.js:10503)

    at checkAndUpdateNode (core.js:10469)

    at debugCheckAndUpdateNode (core.js:11102)

    at debugCheckRenderNodeFn (core.js:11088)

View_MatFormField_10 @ MatFormField.html:1

push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:11306

push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1719

(anonymous) @ core.js:4578

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391

push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150

push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3779

push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4578

(anonymous) @ core.js:4462

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391

onInvoke @ core.js:3820

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390

push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150

push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3734

next @ core.js:4462

schedulerFn @ core.js:3551

push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196

push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134

push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77

push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54

push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47

push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3535

checkStable @ core.js:3789

onHasTask @ core.js:3833

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:443

push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:463

push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:291

push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:212

drainMicroTaskQueue @ zone.js:601

Promise.then (async)

scheduleMicroTask @ zone.js:584

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413

push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238

push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258

scheduleResolveOrReject @ zone.js:879

ZoneAwarePromise.then @ zone.js:1012

push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4345

./src/main.ts @ main.ts:11

__webpack_require__ @ bootstrap:76

0 @ main.ts:12

__webpack_require__ @ bootstrap:76

checkDeferredModules @ bootstrap:43

webpackJsonpCallback @ bootstrap:30

(anonymous) @ main.js:1

ERROR in node_modules/rxjs-compat/operator/shareReplay.d.ts(2,10): error TS2305:

Hi Guys ,

Today I have faced this error :

ERROR in node_modules/rxjs-compat/operator/shareReplay.d.ts(2,10): error TS2305:



You will face this error if you are using "rxjs-compat": "^6.4.0", in package .json .

To fix set the version of rxjs and rxjs-compat as below .

---------------------package.json--------------------------------

"rxjs": "6.3.3",
    "rxjs-compat": "6.3.3"

----------------------------------------------------------------------

update to package.json needs npm update
ng serve , it works !

The full stack trace is as below :


ERROR in node_modules/rxjs-compat/operator/shareReplay.d.ts(2,10): error TS2305: Module '"F://study/angular4/projects/mcq/mcq/node_modules/rxjs/internal-compatibility/index"' has no exported member 'ShareReplayConfig'.

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.

Hi Guys ,

Today I have faced this error :

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.

I faced this error since i didn't installed material module. Here's the solution if you face the same  issue.
Go to the command prompt and type the following command:

npm install --save rxjs-compat 

Once installed ng serve,it should work.

The full stack trace is as below :

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.

node_modules/rxjs/Rx.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat'.

src/app/quiz-service.service.ts(4,10): error TS2305: Module '"F:/shahbaz/study/angular4/projects/mcq/mcq/node_modules/rxjs/Observable"' has no exported member 'Observable'.

src/app/quiz-service.service.ts(14,5): error TS2339: Property 'map' does not exist on type 'Observable<Response>'.

ERROR Error: Found the synthetic property @transitionMessages. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

Hi Guys ,

Today I have faced this error :

ERROR Error: Found the synthetic property @transitionMessages. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.


The solution is to add  in the @Component annotation use animations: [ <specify your Animation Method here> ]

compiler.js:1021 Uncaught Error: Template parse errors: 'mat-form-field' is not a known element:

Hi Guys ,

Today I have faced this error :

compiler.js:1021 Uncaught Error: Template parse errors: 'mat-form-field' is not a known element:

The solution to this is to import the required mat modules in app.module.ts  highlighted below .

----------------app.module.ts-----------------------------------------------------------------------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatInputModule, MatCardModule } from '@angular/material';
import 'hammerjs';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatInputModule,
    MatCardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

------------------------------------------------------------------------------------------------------

Test your understanding

angular-cli.json was deprecated in which version ?

v5

v4

v6

v7

Info

Next