aot and No component factory found for DeviceSelectComponent. Did you add it to @NgModule.entryComponents?

[farfromrefug]

I can't make my app work with aot.
In my app I have a component that I want to show within a modal dialog.
I define my component within a shared.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { DeviceSelectComponent } from "~/deviceselect/DeviceSelectComponent";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { NativeScriptLocalizeModule } from "nativescript-localize/angular";
import { ModalDialogService } from 'nativescript-angular/modal-dialog';

import { CapitalizePipe } from "~/pipes/CapitalizePipe";
import { LocalizePipe } from 'nativescript-localize/angular';
@NgModule({
    imports: [
        NativeScriptCommonModule,
        NativeScriptLocalizeModule
     ],
     entryComponents: [DeviceSelectComponent],
     declarations: [
        DeviceSelectComponent, CapitalizePipe
    ],
    exports: [
        DeviceSelectComponent, CapitalizePipe, LocalizePipe
    ],
    providers: [ModalDialogService],

    schemas: [NO_ERRORS_SCHEMA]
})
  
export class SharedModule {}

But with aot enabled I get

Error: No component factory found for DeviceSelectComponent. Did you add it to @NgModule.entryComponents?

whenever I try to show the modal dialog.
I tried almost every possible solutions:

• put entryComponents in the modules declarations of the components I am showing the modal from
• put entryComponents in the app module
• differents packages versions for nativescript-angular, nativescript-dev-webpack

Nothing works. Any help would be appreciated
Thanks

[jibon57]

@farfromrefug, in shared module I think you don't need to use entryComponents but in your component. So, you can try like this:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { DeviceSelectComponent } from "~/deviceselect/DeviceSelectComponent";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { NativeScriptLocalizeModule } from "nativescript-localize/angular";
import { ModalDialogService } from 'nativescript-angular/modal-dialog';

import { CapitalizePipe } from "~/pipes/CapitalizePipe";
import { LocalizePipe } from 'nativescript-localize/angular';
@NgModule({
    imports: [
        NativeScriptCommonModule,
        NativeScriptLocalizeModule
     ],
     declarations: [
        DeviceSelectComponent, CapitalizePipe
    ],
    exports: [
        DeviceSelectComponent, CapitalizePipe, LocalizePipe
    ],
    providers: [ModalDialogService],

    schemas: [NO_ERRORS_SCHEMA]
})
  
export class SharedModule {}

For example you want to import in home.module.ts. So:

@NgModule({
    imports: [
        NativeScriptCommonModule,
        SharedModule,
        HomeRoutingModule
    ],
    declarations: [
        HomeComponent
    ],
    entryComponents: [DeviceSelectComponent],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})

That should work.

[farfromrefug]

@jibon57 still no luck :s I feel like there is an issue with aot compilation.

[jibon57]

In this case please use https://play.nativescript.org/ for more details. The above solution is working for me.

[tsonevn]

Hi @farfromrefug,
Did you solve the issue, which you were facing? If the problem persists, please provide sample project, which can be used for debugging and give us more info about the exact steps, which you used while building the project.

[farfromrefug]

@tsonevn I ll try to create a sample app reproducing it. Thanks

[farfromrefug]

@tsonevn here is a sample showing the issue.
run with tns run android --bundle --env.aot to see the issue
issue-modal.zip

[tsonevn]

Hi @farfromrefug,
Thank you for the sample project.
I tested it on my side and the first thing that I found was that there were missing resources in the App_Resources folder, which prevents me from building the project. Regarding to that I add the below attached code in the App_Resources/android/src/main/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="ns_primary">#F5F5F5</color>
	<color name="ns_primaryDark">#757575</color>
	<color name="ns_accent">#33B5E5</color>
    <color name="ns_blue">#272734</color>
</resources>

About the modal page. It seems that there was an issue with the webpack.config.js file set up. You can try deleting it and then start tns run android --bundle --env.aot command again. This will generate again the config file and should build properly the project.

[farfromrefug]

@tsonevn I saw that about the resources sorry! I can send you a new one. about the webpack issue can you tell me what it is? I cant really delete as I had to modify the default one. but I compare I don t see any issue

[farfromrefug]

@tsonevn I found the issue. It comes from the order in resolve.extensions
The default one comes with this [".ts", ".js", ".scss", ".css"]
and mine is this [".js", ".ts", ".scss", ".css"] which makes modal view not show.
This is actually a big deal for people developing plugins like I do.

The default one order makes module dev not work when you use plugin package version like this file:../nativescript-background-gps/plugin because this folder will also contains plugin ts files.

For example with nativescript-bluetooth installed with "nativescript-bluetooth": "file:../nativescript-bluetooth/plugin", in package.json and with the default webpack you get that error :

System.err: Error: Module build failed: Error: /Volumes/data/dev/nativescript/nativescript-bluetooth/plugin/src/android/android_main.ts is missing from the TypeScript compilation. Please make sure itis in your tsconfig via the 'files' or 'include' property.
System.err:     at AngularCompilerPlugin.getCompiledFile (/Volumes/data/dev/nativescript/Mini2SmartApp/node_modules/@ngtools/webpack/src/packages/ngtools/webpack/src/angular_compiler_plugin.ts:951:15)
System.err:     at plugin.done.then (/Volumes/data/dev/nativescript/Mini2SmartApp/node_modules/@ngtools/webpack/src/packages/ngtools/webpack/src/loader.ts:49:29)
System.err:     at <anonymous>
System.err:     at process._tickCallback (internal/process/next_tick.js:182:7)

That's because of the order in resolve.extensions

If I am correct the order should always be js first? Why is that an issue with entryComponents in angular.

[farfromrefug]

after looking a little bit more at that issue, here are more explanation. The current order won't work for any nativescript plugin that publishes its ts file with npm. The problem with that is that the node_modules folder will contains

plugin.common.ts
plugin.android.ts
plugin.js

When AngularCompilerPlugin will run it will read plugin.js and will see a require('plugin.common') then as it will see a plugin.common.ts it will report the error:

 plugin.common.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (/Volumes/data/dev/nativescript/Mini2SmartApp/node_modules/@ngtools/webpack/src/packages/ngtools/webpack/src/angular_compiler_plugin.ts:951:15)

There does not seem to be a way around this.

So the solution seems to force AngularCompilerPlugin to look for js files first with webpack option resolve.extensions. But then you end with another angular error which is that lazy loaded components are not working. It might be related to this issue angular/angular-cli#8508