3

I want to use an UI-Framework globally for all other modules (sub-modules from routing).

I'm using the latest versions of Angular and Material (7.2+). https://material.angular.io/

I created an Angular module that imports all Angular Material UI Modules. Imported in app.module.ts. It works fine until I change the route by loading another module. - I know why. Because every module is a separate scope. But it should be possible to import a module globally, that every component can access the UI (html).

I want to import all Mat..Modules in app.module.ts (already done) accessible also for my other modules like DashboardModule. Currently, I have to import the MaterialModules again to each Module Component (Page). Im sure / hope that this is possible. Because an UI should accessible globally to the whole page.

Dag
  • 161
  • 1
  • 2
  • 6
  • best thing to do is to create a shared module and import that module in every other submodule – programoholic Feb 15 '19 at 19:49
  • Yes I already doing this. I created a module "AllMaterialModules" that imports and exports all Mat...Modules. But I do not want to import it in every other module. Only in app.module.ts. – Dag Feb 15 '19 at 19:51

2 Answers2

1

I think that want is not possible. The whole point of modules is to encapsulate their content, and only expose specific content via exports. The flip side of that is that if you want to use something that's exported by another module, you have to import it. There is no "global import"

GreyBeardedGeek
  • 29,460
  • 2
  • 47
  • 67
0

That is not how Angular Modules works.

NOTE: This approach is not working, will update answer if find some solution

But there is a workaround, Creating your own Decorator to wrap NgModule decorator and use that while declaring other module.

Here is an example:

function CustomeNgModule(options: NgModule){
    options.imports = options.imports || []; 
    options.imports.push(SharedModule);
    return NgModule(options);
}

and use it as,

@CustomeNgModule({/*options*/})
export class AbcModule {
}

I have not tested my code, but it should work, let me know if it doesn't.

In case needs more information about Decorates https://www.typescriptlang.org/docs/handbook/decorators.html

goyaltushar92
  • 296
  • 1
  • 13
  • @SimoneMSR, I tried it myself after your comment and confirms this is not working. will be updating my answer If i solves this problem. – goyaltushar92 May 27 '19 at 01:56
  • I have also tried this, but does not work neigther http://prideparrot.com/blog/archive/2018/7/extending_component_decorator_angular_6 – SimoneMSR May 27 '19 at 10:18
  • meanwhile you may use a function to transform options, i.e. instead of using `CustomNgModule` decorator use transform function `@NgModule(myTranform({/*options*/}))`. – goyaltushar92 May 27 '19 at 10:25