Angular 6: How can I add modules depending on the configuration?

Question

What I have done so far (and what worked fine)

I have an angular-app that is used by multiple different customers, which I am currently updating from angular 4 to angular 6. The customers have their own differing extensions so in angular 4 I created one module for each customer (which sets up the customizations) and then I created one environment.CUSTOMER_NAME.ts file for each customer with a content like this:

export const environment: Environment = {
    extraModules: [MODULE_FOR_THIS_CUSTOMER]
};

Then in my main module I used:

@NgModule({
    imports: (<Array<Type<any> | ModuleWithProviders | any[]>>[
        BrowserModule,
        FormsModule,
        /* .. */
    ].concat(environment.extraModules)),
    /* .. */
})
export class AppModule { }

That worked great. Running ng build --env=SOME_CUSTOMER build the whole application including the modules for that particular customer.

The problem

Now I upgraded to angular 6 and I was getting the error:

ERROR in : 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<router-outlet></router-outlet>")

After a day of building up grey hair and considering to quit my job and become a bus driver, I eventually figured out, that my concat-command seems to be the root of the problem. At least it is in combination with the options

"aot": true,
"buildOptimizer": true,

in the angular.json file. If I set both of those to false, everything works fine, even with my old structure. Removing the concat command also fixes the problem.

Naturally I don't really want to leave these options off, so what can I do to still include a module only if a certain configuration is active?

Mavlarn · Accepted Answer · 2018-05-17 16:38:40Z

1

It said:

ERROR in : 'router-outlet' is not a known element:

I think you maybe using the router-outlet in your customer modules. You need to make sure that you import router module in your modules.

answered May 17, 2018 at 16:38

Mavlarn

3,8812 gold badges41 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yankee Over a year ago

No, I am not using router-outlet in customer modules. Nevertheless I assure you that I extensively tested adding imports, before I eventually realized that I am on the wrong track...

yankee · Accepted Answer · 2018-05-18 04:51:29Z

1

While the concat call is not possible anymore it works fine when using the spread-operator ... which is also supported by TypeScript since version 2.1:

@NgModule({
    imports: [
        /* .. */
        ...environment.extraModules
    ]
})

answered May 18, 2018 at 4:51

yankee

41.3k17 gold badges113 silver badges169 bronze badges

Collectives™ on Stack Overflow

Angular 6: How can I add modules depending on the configuration?

What I have done so far (and what worked fine)

The problem

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What I have done so far (and what worked fine)

The problem

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related