CODEWITHSUNDEEP
angularwebpackangular-cli
yankee
yankee

Reputation: 40750

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

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?

Upvotes: 0

Views: 574

Answers (2)

yankee
yankee

Reputation: 40750

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
    ]
})

Upvotes: 1

Mavlarn
Mavlarn

Reputation: 3883

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.

Upvotes: 1

Related Questions