Is an angular component then verify that it is part of this module

If » is an Angular component, then verify that it is part of this module

I am working on an Angular 9 project. As long as the project was growing, I decided to split code into feature modules. I’ve created a separate feature module, declared and exported every child component. I’ve also imported the feature module in the AppModule.

Here’s a snippet

landing-page.module.ts

landing-page-routing.module.ts

app.module.ts

app-routing.module.ts

After reading docs and toturials, I can’t find the reason why it isn’t working. I tried to npm update/install and ng serve again but still not working. Thanks in advance for your help.

2 Answers 2

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Few things which should be clarified:

So if you want to split your app with lazy loaded modules you should be sure that:

Firstly, if would be easier to debug the issue if you can share a link to your code in stackblitz or in some other way.

BUG: «If ‘ng-template’ is an Angular component, then verify that it is part of this module.» #6159

Comments

darrenbrett commented May 2, 2017

My dev environment:
MacBook Air, OS X El Capitan 10.11.6
@angular/cli: 1.0.1
node: 7.4.0
NPM: 4.6.1

After running an «npm install», and then running «ng s», my app is compiling:

** NG Live Development Server is running on http://localhost:4600 **
Hash: 2c393e67e8c2251c234e
Time: 56121ms
chunk <0>main.bundle.js, main.bundle.js.map (main) 1.5 MB <3>[initial] [rendered]
chunk <1>polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 239 kB <4>[initial] [rendered]
chunk <2>styles.bundle.js, styles.bundle.js.map (styles) 87.4 kB <4>[initial] [rendered]
chunk <3>vendor.bundle.js, vendor.bundle.js.map (vendor) 5.64 MB [initial] [rendered]
chunk <4>inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

But in the browser the app load stalls, and I get this error in the console:

zone.js:567 Unhandled Promise rejection: Template parse errors:
‘ng-template’ is not a known element:

I am not using «ng-template» anywhere in my app. In addition I have run a «find» over my entire «node_modules» folder, and it doesn’t show up there either. I am using «material», and have heard that can be an issue here. But it didn’t show up in my «find» over the «node_modules».

My package.json looks like this:

The text was updated successfully, but these errors were encountered:

Angular 2 ‘component’ is not a known element

I’m trying to use a component I created inside the AppModule in other modules. I get the following error though:

«Uncaught (in promise): Error: Template parse errors:

‘contacts-box’ is not a known element:

My project structure is quite simple:

I keep my pages in pages directory, where each page is kept in different module (e.g. customers-module) and each module has multiple components (like customers-list-component, customers-add-component and so on). I want to use my ContactBoxComponent inside those components (so inside customers-add-component for example).

As you can see I created the contacts-box component inside the widgets directory so it’s basically inside the AppModule. I added the ContactBoxComponent import to app.module.ts and put it in declarations list of AppModule. It didin’t work so I googled my problem and added ContactBoxComponent to export list as well. Didn’t help. I also tried putting ContactBoxComponent in CustomersAddComponent and then in another one (from different module) but I got an error saying there are multiple declarations.

What am I missing?

22 Answers 22

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

These are the 5 steps I perform when I get such an error.

When the error occurs during unit testing, make sure your declared the component or imported the module in TestBed.configureTestingModule

I also tried putting ContactBoxComponent in CustomersAddComponent and then in another one (from different module) but I got an error saying there are multiple declarations.

You can’t declare a component twice. You should declare and export your component in a new separate module. Next you should import this new module in every module you want to use your component.

It is hard to tell when you should create new module and when you shouldn’t. I usually create a new module for every component I reuse. When I have some components that I use almost everywhere I put them in a single module. When I have a component that I don’t reuse I won’t create a separate module until I need it somewhere else.

Though it might be tempting to put all you components in a single module, this is bad for the performance. While developing, a module has to recompile every time changes are made. The bigger the module (more components) the more time it takes. Making a small change to big module takes more time than making a small change in a small module.

Angular2 RC6: ‘ is not a known element’

I am getting the following error in the browser console when trying to run my Angular 2 RC6 app:

I don’t get why the component isn’t found. My PlannerModule looks like this:

and as far as I understood the concept of Modules in ng2, the parts of the modules are declared in ‘declarations’. For completeness, here is the PlannerComponent:

and the HeaderAreaComponent:

Did I get something wrong?

Update: Complete code

22 Answers 22

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

I received this error when I imported Module A into Module B, and then tried to use a component from Module A in Module B.

The solution is to declare that component in the exports array.

I fixed it with help of Sanket’s answer and the comments.

What you couldn’t know and was not apparent in the Error Message is: I imported the PlannerComponent as a @NgModule.declaration in my App Module (= RootModule).

The error was fixed by importing the PlannerModule as @NgModule.imports.

Thanks for your help 🙂

I fetch same problem for with angular 5.

You just need add below lines in app.module.ts file

NB: I am using this one for message flash-messages

In your planner component, you must be missing import HeaderAreaComponent like this-

See if this helps.

The error coming in unit test, when component is out of in main app page. so should define the component in test file like below.

and then needs to add in spec.ts file as below.

Another possible cause of having the same error message is a mismatch between tag name and selector name. For this case:

tag name must exactly match ‘header-area’ from the component declaration:

I had the same problem and i fixed by adding the component (MyComponentToUse) in exports array in the module where my component was declared (ModuleLower). Then i import ModuleLower in ModuleHigher, so i can reuse now my component ( MyComponentToUse) in the ModuleLower and the ModuleHigher

I had the same issue with angular RC.6 for some reason it doesn’t allow passing component to other component using directives as component decorator to the parent component

But it if you import the child component via app module and add it in the declaration array the error goes away. There are no much explanation to why this is an issue with angular rc.6

When I had this problem, it was because I used ‘templateUrl’ instead of just ‘template’ in the decorator, since I use webpack and need to use require in it. Just be careful with the decorator name, in my case I generated the boilerplate code using a snippet, the decorator was created as:

but for webpack the decorator should be just ‘template‘ NOT ‘templateUrl‘, like so:

changing this solved the problem for me.

wanna know more about the two methods? read this medium post about template vs templateUrl

I got this error when I had a filename and class exported mismatch:

class exported: ListStudentsComponent

Changing from ListStudentsComponent to ListComponent fixed my issue.

NG TEST SOLUTION:

beforEach(.. declarations[]) to app.component.spec.ts.

A newbie mistake was generating the same error message in my case.

The app-root tag wasn’t present in index.html

For me path for templateUrl was not correct

Whereas it should have been

Silly mistake but happens when starting out. Hope that helps somebody in distress.

I had the same issue with Angular 7 when I am going to refine the test module by declaring the test component. Just added schemas: [ CUSTOM_ELEMENTS_SCHEMA ] as follows and error was solved.

For future problems. If you think you followed all the good answers and yet, the problem is there.

Try turning the server off and on.

I had the same problem, followed all the steps, couldn’t solve it. Turn off, on and it was fixed.

Ok, let me give the details of code, how to use other module’s component.

For example, I have M2 module, M2 module have comp23 component and comp2 component, Now I want to use comp23 and comp2 in app.module, here is how:

this is app.module.ts, see my comment,

this is m2 module:

My commend in code explain what you need to do here.

now in app.component.html, you can use

Late answer for the thread, but I’m sure there’s more people that can use this information explained in another perspective.

Here’s a sample ComponentsModule

Excerpt of AppModule:

Why I got misled: The component I wanted to consume (ComponentA) was correctly declared in it’s module (ModuleA). It was correctly exported there, too. The module (ModuleB) of the component (ComponentB) I am working in, had the import for ModuleA correctly specified. However, because of the error message being is not a known element’, my entire focus was in thinking that it was a problem with ModuleA/ComponentA as that is what the error message contained; I didn’t think to look at the component I was trying to consume it from. I followed every single post in every threat about this, but was ultimately missing one vital step:

I’m trying to use in an Angular project using Material2 but I’ve hit a wall.

Getting the error message below.

This is my code I’ve got.

app.module.ts

search.component.html

search.component.ts

package.json

11 Answers 11

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

You’re only exporting it in your NgModule, you need to import it too

update

You’re declaring component (SearchComponent) depending on Angular Material before all Angular dependency are imported

Try moving it to MaterialModule, or before it

You’re trying to use the MatFormFieldComponent in SearchComponent but you’re not importing the MatFormFieldModule (which exports MatFormFieldComponent ); you only export it.

Your MaterialModule needs to import it.

When using the ‘mat-form-field’ MatInputModule needs to be imported also

I had this problem too. It turned out I forgot to include one of the components in app.module.ts

the problem is in the MatInputModule:

Make sure that you’ve added import from ‘@angular/material/input’; as import statement.

When using MatAutocompleteModule in your angular application, you need to import Input Module also in app.module.ts

Please import below:

import < MatInputModule >from ‘@angular/material’;

Check the namespace from where we are importing

In my case, this happened because I had copied the whole directory of a component that I had created from an old project into a new project and forgot to include my component in app.module.ts

(Hopefully this saves someone a lot of time.. as stackoverflow has done for me so many times:)