首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 2如何单独加载2个App根组件

在Angular 2中,可以通过使用Angular的模块化系统来单独加载两个App根组件。以下是一种实现方式:

  1. 创建两个独立的Angular模块,每个模块都有自己的根组件。
  2. 在每个模块中,使用@NgModule装饰器来定义模块,并通过imports属性引入所需的依赖模块。
  3. 在每个模块中,使用bootstrap属性来指定根组件。
  4. 在主应用程序的入口文件(通常是main.ts),使用Angular的动态引导机制来加载这两个模块。

下面是一个示例:

  1. 创建两个独立的Angular模块,例如AppModule1和AppModule2。
  2. 在每个模块中,使用@NgModule装饰器来定义模块,并通过imports属性引入所需的依赖模块。例如:
代码语言:txt
复制
// AppModule1.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent1 } from './app.component1';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent1],
  bootstrap: [AppComponent1]
})
export class AppModule1 { }

// AppModule2.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent2 } from './app.component2';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent2],
  bootstrap: [AppComponent2]
})
export class AppModule2 { }
  1. 在主应用程序的入口文件(通常是main.ts),使用Angular的动态引导机制来加载这两个模块。例如:
代码语言:txt
复制
// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule1 } from './app.module1';
import { AppModule2 } from './app.module2';

// 加载AppModule1
platformBrowserDynamic().bootstrapModule(AppModule1)
  .catch(err => console.error(err));

// 加载AppModule2
platformBrowserDynamic().bootstrapModule(AppModule2)
  .catch(err => console.error(err));

通过以上步骤,你可以单独加载两个App根组件。每个模块都有自己的根组件,并且可以独立运行。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法提供相关链接。但你可以通过访问腾讯云官方网站,搜索相关产品来获取更多信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

前言:   上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库,并且快速构建后台管理页面框架模板。...这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加...Angular项目目录介绍(重要): ? app.module.ts(模块): NgModule 用于描述应用的各个部分如何组织在一起。...2、配置首页组件路由(多模块路由完美解决): 首先,我们的博客项目存在博客管理和用户管理两个核心模块,我们创建了两个模块,那么我们如何在【app-routing.module.ts】应用路由文件中配置多个模块的路由...,我们可以通过延迟加载子路由的方式来加载相关模块的子路由。

3.9K20

模块化开发 Angular 应用

AppModule 是你应用中的模块,并且对于运行我们的应用程序是必要的模块。在这里,我们可以定义应用程序使用哪些组件或者哪些模块。那么它长什么样呢?...App-Module 是应用程序的模块。该模块导入其他模块,这些模块可以自己导入其他模块。 就像组件一样,生成的结构是一个模块树。...让我们仔细点看,这些属性是什么,又干了些什么: Bootstrap 定义应用程序的组件。仅在 AppModule 中使用它。 Exports 我们在这里定义要组件、指令或者管道。...如果你想在多个模块中使用你的组件,你需要将改组件捆绑到一个单独的模块中,并将其导入到模块中。 Imports 说到导入... 你的模块可以导入任意数量的子模块。还没有定义任何自定义模块?...减少加载时间的一种方法是将应用程序拆分成模块。 当你以惰性方式加载模块时,它不会包含在初始的程序中。相反,它仅在需要的时候才下载。为啥要下载我们还没用得上的组件呢,是吧? 那么,它是怎么工作的?

3K10

Angular 从入坑到挖坑 - 模块简介

一、Overview Angular 入坑记录的笔记第七篇,介绍 Angular 中的模块的相关概念,了解相关的使用场景,以及知晓如何通过特性模块来组织我们的 Angular 应用 对应官方文档地址:...,只有模块中才会存在 3.2、应用的模块 模块是用来启动此 Angular 应用的模块, 按照惯例,它通常命名为 AppModule 通过 Angular CLI 新建一个应用后,默认的模块代码如下...,通过使用 @NgModule 装饰器装饰 AppModule 类,定义了这个模块的一些属性特征,从而告诉 Angular 如何编译和启动本应用 import { BrowserModule } from...应用通过引导模块来启动的,因为会涉及到构建组件树,形成实际的 DOM,因此需要在 bootstrap 数组中添加组件用来作为组件树的 3.3、特性模块 特性模块是用来将特定的功能或具有相关特性的代码从其它代码中分离出来...特性模块通过它提供的服务以及共享出的组件、指令和管道来与模块和其它模块合作 在上一章中,定义了一个 CrisisModule 用来包括包含与危机有关的功能模块,创建特性模块时可以通过 Angular

1.8K20

Angular Provider 作用域

当你注册级别的服务时,Angular 会创建一个单独的共享服务实例。如果在 @Injectable 元数据中注册服务,Angular 会在构建阶段自动剔除无用的服务,进而优化我们的应用程序。...需要注意的是在非懒加载的特性模块中,如果我们也注册了同一个服务。在模块和特性模块中是使用同一个服务实例,即服务是单例的。 “Talk is cheap,show me your code”。...非懒加载模块 下面我们先来定义一个 UserModule 模块,然后分别定义 UserService 服务和 UserComponent 组件: user.module.ts import { NgModule...中配置的 provider 会生效,此后 Angular 会根据合并的 providers 创建级注入器。...当在懒加载的模块中使用模块外的服务时,它将使用注入器创建的服务实例。但如果已经在懒加载模块中注册了 provider,在模块内获取对应的服务时,它将从模块的子注入器中获取对应的服务实例。

1.8K20

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular 2中的路由工作原理是什么? 路由是能够让用户在视图/组件之间导航的机制。Angular 2简化了路由,并提供了在模块级(延迟加载)下配置和定义的灵活性。 ...它是如何Angular 2中工作的? Angular 2不具有双向digest cycle,这是与Angular 1不同的。...什么是延迟加载如何Angular 2中启用延迟加载? 大多数企业应用程序包含用各式各样的用于特定业务案例的模块。捆绑整个应用程序代码并完成加载,会在初始调用时,产生巨大的性能开销。...启用延迟加载的Plunkr示例:  我们不需要在模块中导入或声明延迟加载模块。 将路由添加到顶层路由(app.routing.ts)并设置loadChildren。...更少的Http请求数:如果应用程序没有捆绑来支持延迟加载(或任何原因),对于每个关联的HTML和CSS,都会有一个单独的服务器请求。

17.3K80

Angular 工具篇之国际化处理

providers: [], bootstrap: [AppComponent] }) export class AppModule {} 在导入 TranslateModule 模块之后,我们需要在组件...接着我们需要分别更新 zh-cn.json、zh-hk.json 和 en.json 文件: { "hello": "hello {{value}}", "home": "首页" } 最后我们在介绍如何在懒加载的模块中启用国际化...懒加载模块国际化 假设我们已经定义了一个 UserModule 懒加载模块,该模块内包含一个 UserComponent 组件,具体如下: user.module.ts import { NgModule...,我们可以使用 ngx-translate-extract 这个库,单独抽取该模块内的国际化配置信息。...最后我们再来浏览一下模块的相关文件: app.module.ts import { BrowserModule } from "@angular/platform-browser"; import {

2K20

Angular 启用预加载

在使用路由延迟加载中,我们介绍了如何使用模块来拆分应用,在访问到这个模块的时候, Angular 加载这个模块。但这需要一点时间。在用户第一次点击的时候,会有一点延迟。...在上一节中,我们的路由定义在 main.routing.ts,我们在 app.module.ts 中使用了路由定义。 需要注意的是,Home 组件是提前加载的。我们将在系统启动之后渲染这个组件。...在 Angular 渲染 Home 组件之后,用户就可以与应用交互了,我们可以通过简单的配置在后台预加载其它模块。 启用预加载 我们在 forRoot 函数中,提供一个预加载的策略。.../app.component'; import { HomeComponent } from './home/home.component'; import { routes } from '....load() : Observable.of(null); } } 复制代码 最后,在 app.module.ts 中使用这个策略。

1.5K00

教程|在 Angular 4 中加载功能模块(上)

尽管 Angular 4 最初是为 JavaScript 而设计的,但它在 Angular 2 基础之上添加了对更多语言的支持,比如 Dart 和 Typescript。...本教程将介绍如何Angular 中开发和加载功能模块。尽管对于较小的应用程序,模块就足够用了,但对于更大更复杂的应用程序,需要创建功能模块。还需要能够高效地加载模块,以获得最佳应用程序性能。...一个 Angular 应用程序由以下部分组成: 模块 组件 模板 元数据 数据绑定 指令 服务 依赖注入 每个 Angular 应用程序都至少有一个模块,称为模块。...您可以引导模块来启动 Angular 应用程序。对于小型应用程序,只需要模块和一些组件。在构建更复杂的中到大型应用程序时,会向应用程序添加功能模块。...对模块始终采用贪婪加载,在一些情况下,也会对其他功能使用贪婪加载。 惰性加载:随着应用程序的功能区域的构建,应用程序的大小会不断增加。

2.2K10

angular知识点梳理第一篇

node官网 nodejs 创建一个angular项目 安装angular脚手架 命令行1 使用npm安装 npm install -g @angular/cli 命令行2 使用yarn安装 yarn...,但是他是默认将node_modules也进行了一个加载,如果你想创建的过程中不让他进行加载模块代码的话,命令后加上 --skip install 即可 启动项目 命令行 ng serve --open.../app-routing.module'; // 组件 import { AppComponent } from '..../app.component'; // @NgModules 是angular的一个装饰器,他接受一个元数据对象,告诉该应用如何编译和启动应用 @NgModule({ // 配置当前项目运行的组件...) 通过引导AppModules来启动应用,这里一般写的是组件 也就是app下面直接可以看到的那个组件 bootstrap: [AppComponent] }) // 组件不需要导出任何东西,因为其他组件不需要引入它

84210

Angular学习(01)-架构概览

路由 一个项目这么多模块,Angular 并不会一开始就把所有模块都加载,而是惰性加载,按需加载。 那么,什么时候会去加载呢?...就是等某个模块内部的组件被使用的时候会加载,而组件是什么时候会被使用的呢?... 就是组件 AppComponent (自动生成的)的组件标签,当 Angular 在 HTML 文件中发现有组件标签时,就会去加载组件所属的模块,并去解析组件的模板文件...比如,我们新创建个 Home 模块,然后在模块中创建个 app-routing 路由配置文件: //app-routing.module.ts import { NgModule } from '@angular...当按照这种方式来实现时,对于了解一个 Angular,就有一定的规律可循了: 先找视图组件,然后确认视图组件中的 router-outlet 标签的区域,因为这个区域展示的就是由模块路由导航到的新的组件内容

3.5K50

Angular快速学习笔记(2) -- 架构

Angular充分利用了装饰器(java里的annotation)来标识类的类型,并在装饰器中提供元数据(metadata)来告知ng如何使用它们。...但是,任何模块都能包含任意数量的其它组件,这些组件可以通过路由器加载,也可以通过模板创建。那些属于这个 NgModule 的组件会共享同一个编译上下文环境。 ?...providers 是当前组件所需的依赖注入提供商的一个数组,组件需要用到的service,需要在这里提供 1.2.2 模板与视图 模板就是一种 HTML,它会告诉 Angular 如何渲染该组件。...如何使用: 在 Angular 中,要把一个类定义为服务,就要用 @Injectable 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入到组件中 使用 @Injectable 装饰器来表明一个组件或其它类...延伸阅读: Angular快速学习笔记(4) -- Observable与RxJS Angular快速学习笔记(3) -- 组件与模板 Angular快速学习笔记(2) -- 架构 Angular 快速学习笔记

5.2K20

Angular 应用是怎么工作的?

入口已确定,那什么是引导(What's bootstrapping) 每个应用至少有一个 Angular 模块。root 模块引导你启动引用,被称为启动模块。...因此,bootstrapping 就像是一种装置或说一种加载的技术,启动 Angular 应用。当我们加载组件或者模块的时候,它将被渲染。 现在,我们找到了应用入口。.../app.component.css'] }) export class AppComponent { title = 'angular'; } 每个组件都声明三个属性: Selector -- 用于访问该组件...index.html 这个文件最终调用组件,也就是 app-root ,这个组件在文件 app.component.ts 中被定义。如下index.html 文件。 到目前为止,我们知道了 main page 或者 home page 怎么被渲染了(也就是我们上面提到的内容

1.4K30

Angular 2 + 折腾记 :(2)初步认识angular2,不一样的开发模式

---- 基础概念 国内的官网--基础 词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法,相当于一本小字典 关于ng2的一堆为什么:...--组件--> Loading......: html <!...,ng2的开发模式就是类似一个树,从节点无限发散 import { NgModule } from '@angular/core'; // 表单模块,比如你要在组件内用到一些表单元素或者数据绑定..., |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道的参数,后续文档我写一个如何自定义管道的文章 []="":绑定组件内的值[单向,数据流向视图],指令,原生html控件的自身属性[value

6.2K20
领券