Question

我已经构建了一个Angular应用程序，以便在一个正常运行的tomcat生产环境中使用。

但是，每次在jsp页面中使用角度组件时，我必须首先加载app-root。

有没有办法直接调用Angular中的特定组件而不通过根组件？

App-Root - 商店组件 - 购物车组件 - 计算 - 发票

例如：<cart></cart>

已更新 @Mina Michael

您的回答有效！但这并不是我想要的（也许我没有采取正确的方法。）我有两个不同的模块，每个都带有一个bootstrap组件。

在我的主页

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));

platformBrowserDynamic().bootstrapModule(CounterModule).catch(err => console.log(err));

在我的index.html中，我有两个，这都有效！但是，如果我停止应用程序并执行“npm start或npm build”，它会在bootrstrapping中崩溃显示错误...不知道为什么

<app-root></app-root>
<counter></counter>

有什么想法吗？

您的解决方案很好，但我需要使用相同的应用程序代码才能执行我需要的任何组件。

Answer 1

我假设您的项目是由angular-cli生成的，文件遵循标准名称。

在index.html中<app-root></app-root>替换<cart></cart>

在app.module.ts

1）您将找到一条导入＆＃34; AppComponent＆＃34;

的行

import { AppComponent } from './app.component';

将其删除（或保留）并导入购物车组件。

import {Cart} from './path/to/cart.component';

2）同时添加＆＃34; Cart＆＃34;到＆＃34;声明＆＃34;。你会发现这个：

  declarations: [
    AppComponent,

像这样：

  declarations: [
    Cart,

3）也改变这一行

bootstrap: [AppComponent]

是

bootstrap: [Cart]

那应该这样做。

另一种更简单的方法是打开app.component.html并将购物车放在那里，而不是放在那里，如下所示：

<cart></cart>

Answer 2

我找到了解决方案：

使用webpack可以指定多个入口点。

在我的情况下，我有两个模块AppModule和CounterModule，我想独立调用它们。

我已经创建了counter.ts文件和main.ts，并在webpack.common.js文件中引用它们。

现在我可以通过调用app-root或counter tag来启动我的应用程序。

来源：

Can your webpack.config file serve multiple entry points?

https://webpack.github.io/docs/multiple-entry-points.html

感谢您的努力！

调用Angular组件而不调用根组件

2 个答案: