Nativescript: error NG8001: 'StackLayout' is not a known element

[pguti778]

Environment
I don't think this is a NativeScript issue itself, but maybe someone got stacked with this and this could help.

"@nativescript/angular": "~10.1.0",
"@nativescript/core": "~7.0.0",
"@nativescript/theme": "~2.5.0", 
"@nativescript/webpack": "~3.0.0",

Describe the bug
Unfortunately I was not able to find a pattern on how to reproduce, but it happened to me from time to time. I got these errors on several components when simply ns build android:

```ERROR in src/app/query/query.component.html:2:1 - error NG8001: 'StackLayout' is not a known element:

1. If 'StackLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

Yes, yes: I have put the NO_ERRORS_SCHEMA in the module. My project structure was one module and several components. Something like:

```@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    FormComponent,
...
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

and on components:

@Component({ moduleId: module.id, selector: 'app-form', templateUrl: './form.component.html', styleUrls: ['./form.component.css'] }) export class FormComponent implements OnInit {

To Reproduce
Not really sure. I'll continue working on steps. I've tried clean and build, but same thing.

Expected behavior
Build

Solution
I've created another temporal module and imported the complaining components into that new module and voilà! I haven't removed them from the app module. After that I've commented the temporal module and everything was back working.

Looks like components got messed up with their parent modules.

Just Wondering

• How do I get files of the build process so I can have a deeper look into the issue?
• Am I correct doing one module+several components?

[Ross-Olivares]

Hi @pguti778
Thank you for reporting this issue.
We are going to try replicate this case on our end. Let me know if you can send us a sample project that can reproduce the issue.

[pguti778]

Sure, I'll share the project. Anyhow, I don't mean this for a fix. but just try to help in case someone is having the same issue.

[fabioalpizar]

Hello @pguti778 could you explain a bit more or possibly share the code used for the solution you were able to apply to fix the issue? I seem to be having the same issue but don't really understand what the solution was when you say:

I've created another temporal module and imported the complaining components into that new module and voilà!

[pguti778]

Sorry the delay, I've got distracted by latest video/song from AC/DC...
apal.zip Here the sample project (actually the project I was working with).

@fabioalpizar My app has 2/3 components. They are all included in the app.module like this:

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    CharlangaComponent,
    FormComponent,
    QueryComponent,
    StringinputComponent,
    NumberinputComponent
  ],
  imports: [
//    TempmodModule,
    NativeScriptModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

After the issue. I've created another module tempmod.module and imported it in the app.module. The tempmod is like this:

@NgModule({
  declarations: [
    FormComponent, 
    QueryComponent],
  imports: [
    NativeScriptCommonModule
  ],
  schemas: [NO_ERRORS_SCHEMA]
})
export class TempmodModule { }

To workaround the issue, I remove the comment for the tempmod in the app.module just like this:

  imports: [
    TempmodModule,
    NativeScriptModule,
    AppRoutingModule
  ],
  providers: [],

and it worked back. This worked for me. After I don't-know-what, I was able to comment the tempmod from the app.module and everything worked back again.

Again, I was not able to find a pattern on how to reproduce.

[Arystosedes]

The same errors on my side

[MohammedrezaFouladi]

I got the error after migrate to NS7 from NS6.5
the error's like this:
error NG8001: 'TextField' is not a known element:

1. If 'TextField' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

and the 'NO_ERRORS_SCHEMA' is already exist in module.tns.ts files in schemas: schemas: [NO_ERRORS_SCHEMA]

[danstavonl]

Sorry the delay, I've got distracted by latest video/song from AC/DC...
apal.zip Here the sample project (actually the project I was working with).

@fabioalpizar My app has 2/3 components. They are all included in the app.module like this:

Hi, I had same error
Fix: make sure all dot component.ts files in the app folder are referenced in app.module.ts, and checked app-routing.module.ts had all the necessary information

[jchavezberkeley]

How would I go about solving this very issue if instead the component having issues was app.component.ts? Would I have to reimport it in the tempmod? Thanks

[jchavezberkeley]

src/app/app.component.html:70:29 - error NG8001: 'Image' is not a known element:
1. If 'Image' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
...
@NgModule({
declarations: [AppComponent, ...],
imports: [...],
providers: [...],
bootstrap: [AppComponent],
schemas: [NO_ERRORS_SCHEMA]
})

[pguti778]

@jchavezberkeley I think components can be included in 2 modules. Try including it in tempmod too. After compilation is fixed, you can remove it from tempmod and it will work as normal. Give it a try and share your experience.

[jchavezberkeley]

Thanks! I'll share what happens.

[jchavezberkeley]

However, should this be happening in the app.module.ts file or the app.module.tns.ts file?

[pguti778]

It should be in The .tns.ts, which is used for the mobile app.

The .ts is used for the shared angular web application.

[jchavezberkeley]

Thanks, I'll give it a shot.

[jchavezberkeley]

Hello, I'm still a little confused. I created a tempmodModule in my app.module.tns.ts as such

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        NativeScriptCommonModule,
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class TempmodModule { } 

Am I supposed to import this into the AppModule in app.module.tns.ts as well? Thanks

EDIT: I tried this solution but had no luck. This is what my AppModule looks like in app.module.tns.ts

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        TempmodModule,
        SentryModule.forRoot({ dsn: environment.sentryDSN }),
        NativeScriptModule,
        NativeScriptUIChartModule,
        NativeScriptUISideDrawerModule,
        NativeScriptUIGaugeModule,
        AppSharedComponentsModule,
        ComponentsModule,
        HttpClientModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        DialogComponent,
        AndroidRedirectComponent
    ],
    entryComponents: [
        DialogComponent,
        AndroidRedirectComponent,
    ],
    providers: [
        HttpService,
        SentryConfigService,
        NotificationApiService,
        NotificationService,
        VPPViewModelService
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

[jchavezberkeley]

Tried the same solution in app.module.ts just to see what would happen, but unfortunately no progress. Do is look like I'm trying it wrong? Thanks

[jchavezberkeley]

Could this be because 'Image' is a core module not an angular module? This also happens with me an 'StackLayout' in the same 'app.component'

[pguti778]

Ouh, I see, try removing the AppComponent from the app.module.tns.ts but keep the import of the tempmod in the app.module.tns.ts

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        TempmodModule,
        SentryModule.forRoot({ dsn: environment.sentryDSN }),
        NativeScriptModule,
        NativeScriptUIChartModule,
        NativeScriptUISideDrawerModule,
        NativeScriptUIGaugeModule,
        AppSharedComponentsModule,
        ComponentsModule,
        HttpClientModule,
        AppRoutingModule
    ],
    declarations: [
        //AppComponent,
        DialogComponent,
        AndroidRedirectComponent
    ],
    entryComponents: [
        DialogComponent,
        AndroidRedirectComponent,
    ],
    providers: [
        HttpService,
        SentryConfigService,
        NotificationApiService,
        NotificationService,
        VPPViewModelService
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

[jchavezberkeley]

I will try this out and see what happens. Thanks

[jchavezberkeley]

Just tried the solution but it looks like I'm still getting the same errors in the same AppComponent file. A different developer said these were "layout" issues? Thanks.

EDIT: Not sure if this is related other different layout issues are being raised

error NG8002: Can't bind to 'ngClass' since it isn't a known property of 'div'.

10     <div class="image" [ngStyle]="dimension" [ngClass]="{'circle': displayType && displayType == 'circle'}">
                                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/shared/components/image-uploader/image-uploader.component.ts:11:18
    11     templateUrl: "./image-uploader.component.html",
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ImageUploaderComponent.

Perhaps a much broader problem affecting the UI? I just can't seem to pin point it.

[izub]

I believe I'm having the same issue after upgrading to NS7/Angular 10. The angular (web) builds are working without any issues or errors.

The majority of errors seem to be in components which are specific to web. For some reason it comes across these components even though they are not even imported anywhere in any TNS module.

[jchavezberkeley]

At this point, I'm going to brute force everything and build the entire project back up under a N7 base, un migrated.

[chuckmitchell]

At this point, I'm going to brute force everything and build the entire project back up under a N7 base, un migrated.

Ugh. I'm in the same boat. Guess I'm going to lose a few days to rebuild the app in a new Nativescript 7 base. :(

[pguti778]

@chuckmitchell Sorry to hear that. Have you tried the workaround or found any way to reproduce it ?