英文:
Angular routing and importing components from a library
问题
我已经设置了一个简单的骨架,代表我的应用程序在这里:https://stackblitz.com/edit/angular-e68rbx
应用模块加载并传递给一个框架模块,该框架模块承载了我的应用程序的主要页面。
为了演示问题,我在framework
和test-page
组件中各放了一个我的组件库按钮,但无论我尝试什么,都无法使test-page
中的按钮以我的库中的按钮方式呈现。
如果我在app.module.ts
中导入ButtonModule
,那么两个按钮都不会正确呈现。
如果我在framework.module.ts
中导入ButtonModule
,那么framework
页面中的按钮将正确呈现,但test-page
中的按钮不会。
如何正确使一个库模块在整个Angular应用程序中工作?
英文:
I have set up a simple skeleton representing my application here: https://stackblitz.com/edit/angular-e68rbx
The app module loads and hands off to a framework module which hosts the main pages in my app.
To demonstrate the problem I have put 1 of my component library buttons in each of the framework
and test-page
components but no matter what I try I cannot get the button in the test-page
to render as a button from my library.
If I import the ButtonModule
in the app.module.ts
then neither button is rendered correctly.
If I import the ButtonModule
in the framework.module.ts
then the button in the framework
page is rendered correctly, but the button in the test-page
is not.
What is the correct way to get a library module working throughout an Angular app?
答案1
得分: 2
Your TestPageComponent
needs to be declared anywhere. So if you don't wanna do it in the App.Module.ts
so you need to do this in the Framework.Module
. With lazy loading it helps for better performance. So change your framework.module.ts
like this:
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FrameworkComponent } from './framework.component';
import { FrameworkRoutingModule } from './framework.routing.module';
import { ButtonModule } from 'jon-component';
import { TestPageComponent } from '../components/test-page/test-page.component';
@NgModule({
declarations: [FrameworkComponent, TestPageComponent],
imports: [FrameworkRoutingModule, CommonModule, ButtonModule],
exports: [FrameworkComponent, RouterModule],
})
export class FrameworkModule {}
You see the TestPageComponent in the line declarations: [FrameworkComponent, TestPageComponent],
does the trick.
英文:
Your TestPageComponent
needs to be declared anywhere. So if you don't wanna do it in the App.Module.ts
so you need to to this in the Framework.Module
. With lazy loading it helps for better performance. So change your framework.module.ts
like this:
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FrameworkComponent } from './framework.component';
import { FrameworkRoutingModule } from './framework.routing.module';
import { ButtonModule } from 'jon-component';
import { TestPageComponent } from '../components/test-page/test-page.component';
@NgModule({
declarations: [FrameworkComponent, TestPageComponent],
imports: [FrameworkRoutingModule, CommonModule, ButtonModule],
exports: [FrameworkComponent, RouterModule],
})
export class FrameworkModule {}
You see the TestPageComponent in the line declarations: [FrameworkComponent, TestPageComponent],
does the trick.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论