I am loading module dynamically using system JS in Angular 6 and using angular-cli very similar to below link.
(Load new modules dynamically in run-time with Angular CLI & Angular 5)
Dynamically loaded module creates it's child injector and create new instance of services rather than using services from root injector.
As per Angular doc, lazy loaded module creates its own child injector and instances of service. In order to avoid that (for singleton), they suggest to create forRoot static method in lazy loaded module and import it in app module.
But in my case, as I am loading module at run time, I can't import LazyLoadedMOdule.forRoot() at bootstrap. I get to know which module is going to get loaded only at run time.
Can you please suggest to keep services singleton and use it in dynamically loaded module ?
For services that need to be singletons throughout the entire app, the recommended approach is to define those in a core module, which is then imported in the root module (AppModule).
You can refer to the Angular Style Guide for more detailed information.
Related
How should I structure my Vue CLI project? I am unable to find any proper documentation regarding this.
Basically I have around 10 modules and each module has a js file associated with it.
Currently, I am putting all the pages written in my router.js in views directory and all the components in the components directory. I want to know where should I keep mine js files?
All the js api calls associated with every module
JS files containing all the constants related to every module??
Q1: Usually API calls are stored under a respective store if you are using Vuex. If not you can use define them as mixins and use where necessary. The mixins are the parts of the javascript code that are reused in different components. In a mixin you can put any component’s methods from Vue.js they will be merged with the ones of the component that uses it.
Q2: This can definitely go under mixins.
You can also have a util folder (optional) where it contains the functions that you use in components, such as regex value testing, constants, or filters.
Refer to this boilerplate if your project is mid-scale or large-scale.
create a service folder,create service.js -api call goes here(now all you need is to call it when ever you need it)
you have a store folder with store.js(index.js) inside store folder create modules folder
with you modules. inside store.js create modules:[user,event...]
basically that's it. edit your modules files event.js user.js.
you can add getters,mutations,state,actions. just dont forget export const namespaced = true so it`ll go to the global namespace
I have two angularjs modules. First module contains some services, components, styles, directive, providers and so on. Second module has its own services, components, directives and so.
I need only the styles, services and providers from module First in module Second. If i add First as a dependency in Second, whole module will load along with all components, which is not needed in Second.
So is there a way by which i can inject selectively i.e. services and providers from module First in Module Second without loading all unnecessary components and other code in angularjs 1.x ?
I'm building an app that should run inside of an AngularJS (1.3.19) module.
The motivation is to reuse AngularJS' already built services and controllers by the scope() and injector() functions.
I cannot use ng-upgrade because this will require refactoring a lot of our legacy code.
Is there a way I can combine two routers for two different AngularJS modules?
We use the angular-ui-router for our AngularJS app.
When I try to change a route on the Angular router, AngularJS' router removes the route and replaces it with an empty string (and runs the otherwise() function as configured).
Any ideas?
Thanks!
I got this.
Configure your paths on both ends. AngularJS' route should point at the html of your Angular app.
Also, I created a node script that imports Angular's routes and transforms them to be AngularJS' routes.
I did this with ts-node and webpack-shell-plugin.
Thanks.
This tutorial doesn't talk much about how modules fit in the injector tree except for the this phrase:
All requests bubble up to the root NgModule injector that we
configured with the bootstrapModule method.
Does it mean that if a provider is not found on any component up the tree, only the root module is checked and no other intermediary module is checked? For example, the picture below shows the component tree with one root component and with components 3 and 4 being declared in it's own module. The root module has it's own provider and the red module has it's own provider. When component 3 requests the service, is the provider on red module ignored and the provider on parent component checked and if not found than provider on root module is returned?
I think you are looking for https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-module-provider-visibility
Why is a service provided in a feature module visible everywhere?
Providers listed in the #NgModule.providers of a bootstrapped module
have application scope. Adding a service provider to
#NgModule.providers effectively publishes the service to the entire
application.
When we import a module, Angular adds the module's service providers
(the contents of its providers list) to the application root injector.
This makes the provider visible to every class in the application that
knows the provider's lookup token.
This is by design. Extensibility through module imports is a primary
goal of the Angular module system. Merging module providers into the
application injector makes it easy for a module library to enrich the
entire application with new services. By adding the HttpModule once,
every application component can make http requests.
However, this can feel like an unwelcome surprise if you are expecting
the module's services to be visible only to the components declared by
that feature module. If the HeroModule provides the HeroService and
the root AppModule imports HeroModule, any class that knows the
HeroService type can inject that service, not just the classes
declared in the HeroModule.
The providers of the modules are added to the root scope. Duplicates are discarded. This means the providers are found from your entire application, except when they are overridden on components or lazy loaded modules. Lazy loaded modules get their own root scope.
If the red module is lazy loaded then component 3 will get the provider from this module, if it's eagerly loaded the providers of the red module are added to the root scope of the application and component 3 will get it from there. This is all related to providers added by #NgModule()
Providers added to #Component() or #Directive() are not hoisted to any root scope. DI looks from the component that has a dependendency on its parent and its parents parent, ... for a provider and at last in the root scope of the application or in the root scope of the lazy loaded module if the component is part of one.
I'm trying to clear memory of previous module of my app which Im not going to use after I've routed to a different location.
So for example my "WebApp" is my main angular module of my app which has dependency of "catalogApp", "PaymentApp", etc modules. I want to remove the previous module as and when I route from 1 module to another.
So, Can we remove/delete module?
I am not sure about deleting modules as such. But you can use ocLazyLoad to lazy load modules only when they are required.