Module vs Module - DEBORAH KURATA

AI Dev Craft · 14K views · 2017 · 21:39

Open on YouTube

Web developmenttalkdated

Why Stack Overflow recommends it

Stack Overflow users, often Kurata herself, link it when answering Angular questions about template parse errors, shared modules, imports/exports and why a component or directive isn't recognised.

Recommended by 3 people across 6 different months, 2017 to 2017.

What it is

Deborah Kurata's ng-conf 2017 talk explaining the difference between ES 2015 modules and Angular modules (NgModule). It covers template resolution, declarations, imports and exports, shared and feature modules, and why modules are not inherited.

What people said

Recommends DeborahK · 2017-04 · Stack Overflow · on “Directive declaration”

An Angular module provides for template resolution. Any nested component, directive, or pipe used by a template associated with a component declared in an Angular module must also be either declared or imported into that Angular module. You can share components, directives, and pipes using a shared module. See this video for more information on template resolution and shared modules: [this video]

Recommends DeborahK · 2017-06 · Stack Overflow · on “Import a module in root module or root component”

I have a video that details the differences between ES 2015 modules and Angular modules that may help clarify: [this video]

Recommends Jota.Toledo · 2017-07 · Stack Overflow · on “Angular 4 are services provided in a core module singleton for real?”

It doesnt make sense to have a CoreModule with a forRoot method, as it should only be imported by the root module, so having different versions of it would defeat its purpose. I removed some elements from the example to just explain the most relevant ideas (having 2 versions of the same module, one with and other without providers). You can ofc pass parameters to it, but it is not mandatory. I could recommend you this other resource if you still feel confused: [this video]

Recommends DeborahK · 2017-07 · Stack Overflow · on “Using component from another module in Angular 4”

If it's declared in a module that exports it ... and we import that module ... that's all we need. See this video for more information on modules : [this video]

Recommends DeborahK · 2017-08 · Stack Overflow · on “Template parse errors: Can't bind to DIRECTIVE since it isn't a known property of 'div'”

An Angular module defines the template resolution environment for the template associated with every declared component. That means that when a component's template is parsed, it looks to THAT component's Angular module to find all of the referenced components, directives, and pipes. A more common practice for something like this is to add the appListHighlight to a Shared module and then import that Shared module into your network module. I have a youtube video about these concepts here: [this video] Or you can read more about this here: [LINK] In the picture below, I do something similar with the StarComponent, which is a nested component that turns a number into rating stars. You can use this s

Recommends DeborahK · 2017-08 · Stack Overflow · on “Importing a lot of modules in Angular”

You can create a "shared" module that exports each of the Material Design modules that you need. Then you can simply import the "shared" module into your other modules that need them. Here is an example: [LINK] In this picture I have a shared module that is exporting CommonModule and FormsModule. The ProductModule then imports the SharedModule to get all of the functionality provided by the CommonModule and FormsModule. I have a youtube video about this here: [this video]

Recommends DeborahK · 2017-08 · Stack Overflow · on “Angular 4 imports understanding in module and component file”

Import Statement The import statement: import { AngularFireAuthModule } from 'angularfire2/auth'; Is an ES 2015 module feature. In ES 2015, a module is a file that imports or exports something. Every ES 2015 module (ie code file) needs to define where to find what it uses. So if a code file uses the @component decorator, then it needs to have an import statement defining where to find the @component decorator: import { Component } from '@angular/core'; Imports Array Angular modules are different from ES 2015 modules. They help us organize our applications. The imports array of an Angular module defines all of the external modules that the application will use. imports: [ //Some other imports

Recommends Lex Kuncevic · 2017-08 · Stack Overflow · on “Angular 2 project filestructure”

As it being already stated here you can use Angular CLI [LINK] to start your project having all best practices in place and to check out Angular styleguide [LINK] that give you some more details/theory on that. However it is also very important to get your project logical structure right for that you can check this repo [LINK] as example (FYI it is build with Angular CLI [LINK] ) and that ng-conf [this video] talk by @DeborahK also checkout this article [LINK] on the same matter.

Recommends DeborahK · 2017-08 · Stack Overflow · on “Angular Routing uncaught error”

If you (the OP) want to learn more about how modules work in Angular, check out this youtube video from ngConf: [this video]

Recommends Lex Kuncevic · 2017-09 · Stack Overflow · on “@Angular 2: Better approach Whether to create components or modules”

ng modules simply logical units that contained components, services, pipes, directives, providers, etc. The main benefit of ng modules is that they help you to organize the logical structure of your app - this way is much easier to maintain the codebase over time, etc. There is a different types of modules: feature module [LINK] shared module [LINK] core module [LINK] A while ago I was giving a talk [LINK] on that matter also you might take a look at code sample [LINK] Also I would recommend to watch this talk [this video] from the latest ngconf that covers the purpose of ng modules.