1

I have the following structure in my project,

src
- component-a
-- component-a.component.ts
-- component-a.html
-- component-a.scss
-- component-a.component.spec.ts

- component-b
-- component-b.component.ts
-- component-b.html
-- component-b.scss
-- component-b.component.spec.ts

- app.component.ts
- app.module.ts
- app.html

I'm using component-a inside my app.component.ts, so I have included it in declarations in the app.module.ts.

declarations: [
        App, ComponentA,
    ],

And in the app.html: <component-a></component-a>

Now I want to add component-b inside my component-a. So whatever I tried, when I use <component-b></component-b> inside component-a.html I get this error:

Unhandled Promise rejection: Template parse errors:
'component-b' is not a known element:
1. If 'component-b' is an Angular component, then verify that it is part of this module.
2. If 'component-b' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
      [ERROR ->]<component-b></component-b>
"): ng:///AppModule/ComponentA.html@7:6 ; Zone: <root> ; Task: Promise.then ; Value:

How do use component-b in component-a.html?

  • I tried importing component-b in component-a.component.ts
  • I tried importing and adding component-b in the app.module.ts declarations.
Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175
user3607282
  • 2,465
  • 5
  • 31
  • 61
  • You have to create separate module for component A (ng g module componnent-a), move there component-a and component-b and then import that module inside main module (app.module). – elzoy Mar 29 '17 at 10:37
  • Try this [fix](http://stackoverflow.com/questions/40145633/angular2-unhandled-promise-rejection-template-parse-errors) , this may solve your problem – Sujatha Mar 29 '17 at 10:47
  • Try this [fix](http://stackoverflow.com/questions/40145633/angular2-unhandled-promise-rejection-template-parse-errors) , this may solve your problem – Sujatha Mar 29 '17 at 10:48
  • You can use [entryComponents](http://stackoverflow.com/questions/39756192/what-is-entrycomponents-in-angular-ngmodule). – Jai Mar 29 '17 at 10:49
  • Why don't you just add `ComponentB` to `declarations` of `app.module` just like you did with `ComponentA` ? – eko Mar 29 '17 at 10:53
  • @echonax Hi. I tried that. error is still there. – user3607282 Mar 29 '17 at 10:55
  • @user3607282 Seems to be working here: http://plnkr.co/edit/H929znCRMcqlwuI4ySvp?p=preview – eko Mar 29 '17 at 10:59
  • @echonax I'm in rc1. I believe the current version is rc2? Could that be a reason? – user3607282 Mar 29 '17 at 11:01
  • @user3607282 do you use angular 4 or 2? – eko Mar 29 '17 at 11:04
  • @echonax angular 2. sorry i'm still learning all of these. :( – user3607282 Mar 29 '17 at 11:05
  • @user3607282 no problem, I'm just trying to figure out the issue. If you have an `@NgModule`, you are at least using version rc.5. Do you have an `@NgModule`? – eko Mar 29 '17 at 11:07
  • @echonax yeah i do. – user3607282 Mar 29 '17 at 11:11
  • @user3607282 can you include the full app.module (`@NgModule` part)? – eko Mar 29 '17 at 11:16
  • @echonax Ok. I'm very confused now. It's working when I declare it in the app.module like you said. It didn't work before. Can you add it as an answer so I can mark it. Thanks for all your replies. I really appreciate it! – user3607282 Mar 30 '17 at 07:23

2 Answers2

2

As we've discussed in the comment section. You can provide ComponentB inside your app.module to import it throughout your app.

import {NgModule} from '@angular/core';

@NgModule({
  ...
  declarations: [
    AComponent, BComponent
  ]
})    
export class AppModule {}

http://plnkr.co/edit/H929znCRMcqlwuI4ySvp?p=preview

eko
  • 39,722
  • 10
  • 72
  • 98
  • This is the bad way of doing it though.. :| – Chrillewoodz Apr 05 '17 at 16:50
  • @Chrillewoodz why? – eko Apr 05 '17 at 16:57
  • In real applications you build with modules, and then lazy load the modules with the declarations also inside the modules. Although this works it'll get out of hand quick in a bigger app. – Chrillewoodz Apr 05 '17 at 16:58
  • @Chrillewoodz the question does not state that this is a big app. This could be a 2 component app. Would you still create 2 modules for it? Of course I know what you mean and appreciate the comment but saying that it is **the** bad way is a bit premature at this point. And as you know: _Premature optimization is the root of all evil_ -- DonaldKnuth – eko Apr 05 '17 at 17:00
  • 1
    It could, but most likely isn't unless it's a hobby project. I just dislike when examples show you **a** way of doing it, but not necessarily the one that you should or would use in a real example. Then you're more likely to always use that solution because "that's how I learned to do it in the first place". Your answer works but mine is more complete. So I guess our answers complements each other's. – Chrillewoodz Apr 05 '17 at 17:07
  • 1
    @Chrillewoodz I fully support you idealist thoughts but I disagree on the idea of giving a "professional" answer. I'm sure you didn't learn lazy loading from a SO answer, at least the core concept of it. And it's hard for a starter to jump start with the module/lazy-loading concepts without knowing the core concepts. If you bring up these kind of contexts then it becomes more complex for a starter. Your answer is a bit complex for a starter and as OP mentioned in the comments it couldn't handle the task. There might be lots of reasons for that as we know only the part of the architecture. – eko Apr 05 '17 at 17:16
  • 1
    @Chrillewoodz In my opinion answers that are complex may discourage a starter from learning angular because things are not happening soon. But if they see the "Hello World" in the html, I'm sure they will dig deeper into the documentation. – eko Apr 05 '17 at 17:18
  • 1
    Yeah I agree. I don't usually take the person's individual skill into account when posting answers, perhaps I should take your advice and start doing that. – Chrillewoodz Apr 05 '17 at 17:19
  • 1
    @Chrillewoodz And I will keep in mind to give more real-life suitable answers :-) – eko Apr 05 '17 at 17:24
0
  1. Create a module for both components.
  2. Import component B into component A's module imports.
  3. Done.

Example (A Module)

import {NgModule} from '@angular/core';

import {BModule} from '@components/b/b.module';

@NgModule({
  imports: [
    BModule
  ],
  exports: [
    AComponent
  ],
  declarations: [
    AComponent
  ]
})

export class AModule {}

Example (B Module):

import {NgModule} from '@angular/core';

@NgModule({
  exports: [
    BComponent
  ],
  declarations: [
    BComponent
  ]
})

export class BModule {}
Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175