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

Angular 2和systemjs:如何导入在运行时创建的app.module.ts文件?

Angular 2是一种流行的前端开发框架,而systemjs是一个模块加载器。在运行时导入动态创建的app.module.ts文件可以通过以下步骤实现:

  1. 首先,确保你已经安装了Angular CLI,并创建了一个新的Angular项目。
  2. 在项目的根目录下创建一个名为dynamic的文件夹,并在其中创建一个名为app.module.ts的文件。这个文件将包含动态创建的模块。
  3. app.module.ts文件中,定义并导出一个动态创建的模块,例如:
代码语言:typescript
复制
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class DynamicModule { }
  1. 在你的应用程序的主模块(通常是app.module.ts)中,导入SystemJS模块加载器,并使用System.import()方法动态加载app.module.ts文件。例如:
代码语言:typescript
复制
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

declare var System: any;

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {
    System.import('./dynamic/app.module').then((module: any) => {
      // 动态加载成功后,将动态模块添加到主模块的imports中
      this.importDynamicModule(module.DynamicModule);
    });
  }

  importDynamicModule(dynamicModule: any) {
    // 添加动态模块到主模块的imports中
    this.imports.push(dynamicModule);
  }
}
  1. 在你的应用程序的主HTML文件(通常是index.html)中,确保正确加载systemjs库。例如:
代码语言:html
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.19/system.js"></script>
  1. 运行你的应用程序,System.import()方法将会动态加载并导入app.module.ts文件。

这样,你就可以在运行时动态导入创建的app.module.ts文件了。请注意,以上示例中的代码仅供参考,你可能需要根据你的具体项目结构和需求进行适当的修改。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法给出腾讯云相关的推荐产品和链接地址。但你可以通过访问腾讯云官方网站,查找与Angular 2开发相关的云计算产品和服务。

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

相关·内容

Angular 2 快速起步 原

准备学习angularjs2,安装过程费了不少时间,刚开始为了方便,从官网上下载了现成包,但是就运行不起来,后来还是老老实实按教程一步步建文件,ng2详细地址https://angular.cn/...、   新建一个angularjs2文件2、   往项目目录下添加下列包定义与配置文件     (1) package.json          列出了应用依赖,并定义了一些有用脚本...     (4) systemjs.config.js 是SystemJS配置文件 3、安装依赖包  打开控制台输入命令npm install 安装过程中如有有红色警告没关系,只要确认在...消息就行了,安装完之后多了2文件夹        node_modules   typings, 4、在项目的根目录下创建一个app子目录(创建一个名字为app文件夹) (1)在app文件创建组件文件...) 创建app.module.ts          我们把Angular应用通过Angular模块组织成一些功能紧密相关代码块,每个应用都至少需要一个根            模块,习惯上叫AppModule

67610

Angular 英雄编辑器

app.component.html {{title}} 如果 CLI  ng serve 命令仍在运行,浏览器就会自动刷新,并且同时显示出应用标题英雄名字...创建一个 Hero 类 真实英雄当然不仅仅只有一个名字。 在 src/app 文件夹中为 Hero 类创建一个文件,并添加 id  name 属性。...管道(Pipes) 是格式化字符串、金额、日期其它显示数据好办法。 Angular 发布了一些内置管道,当然你还可以创建自己管道。...AppModule Angular 需要知道如何把应用程序各个部分组合到一起,以及该应用需要哪些其它文件库。 这些信息被称为元数据(metadata)。...导入 FormsModule 打开 AppModule (app.module.ts) 并从 @angular/forms 库中导入 FormsModule 符号。

2.5K50

Angular 英雄编辑器

app.component.html {{title}} 如果 CLI  ng serve 命令仍在运行,浏览器就会自动刷新,并且同时显示出应用标题英雄名字...创建一个 Hero 类 真实英雄当然不仅仅只有一个名字。 在 src/app 文件夹中为 Hero 类创建一个文件,并添加 id  name 属性。...管道(Pipes) 是格式化字符串、金额、日期其它显示数据好办法。 Angular 发布了一些内置管道,当然你还可以创建自己管道。...AppModule Angular 需要知道如何把应用程序各个部分组合到一起,以及该应用需要哪些其它文件库。 这些信息被称为元数据(metadata)。...导入 FormsModule 打开 AppModule (app.module.ts) 并从 @angular/forms 库中导入 FormsModule 符号。

2.6K70

Angular--Module使用

Angular 是一个用html typescript 构建客户端应用平台与框架。 它将核心功能可选功能作为一组TypeScript 库进行实现,你可以把它们导入到你应用中。 1....一个Angular应用至少有一个用于启动根模块(root module), 根模块通常命名为AppModule,并位于一个名叫 app.module.ts 文件中。...imports(导入表) —— 其他模块,本NgModule声明组件需要使用它们导出类。 providers —— 本模块向全局服务中贡献那些服务创建器。 这些服务能被本应用中任何部分使用。...@NgModule 参数是一个元数据对象,用于描述如何编译组件模板,以及如何在运行时创建注入器。...2.常用模块NgModules NgModule Import it from Why you use it BrowserModule @angular/platform-browser 当你想要在浏览器中运行

4.9K40

Angular开发实践(六):服务端渲染

:src/app/app.module.ts 创建服务端应用引导程序文件:src/main.server.ts 修改客户端应用引导程序文件:src/main.ts 创建 TypeScript 服务端配置...:src/tsconfig.server.json 修改 @angular/cli 配置文件:.angular-cli.json 创建 Node Express 服务程序:server.ts 创建服务端预渲染程序...AppServerModule 还会告诉 Angular 再把你应用以 Universal 方式运行时,该如何引导它。...2、修改客户端应用模块:src/app/app.module.ts import { BrowserModule, BrowserTransferStateModule } from '@angular...在 app.module.ts导入之后,Angular自动会将服务端请求缓存到客户端,换句话说就是服务端请求到数据会自动传输到客户端,客户端接收到数据之后就不会再发送请求了。

4.7K100

使用Ionic2开发Todo应用0 开始之前1 创建Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

已经在电脑上安装了Ionic 2。如果没有,先去安装学习吧。 1 创建Ionic 2工程 我们将通过生成一个基于“空白”模板新项目开始。这是一个空项目框架,但有一些示例代码供我们使用。...运行如下命令来生成一个add-item页面 ionic g page AddItemPage 任何时候当我们创建一个新页面,我们需要确保该页面被导入(imported)到我们 app.module.ts...还记得如何创建页面吗,运行下面的代码创建一个 item-detail 页面: ionic g page ItemDetailPage time and time again,我们需要在 app.module.ts...现在我们要做创建一个服务被称为Data用来处理存储检索数据。我们将使用Ionic 2提供Stroage服务来帮助我们做到这一点。...4 总结 在本教程中我们已经介绍了如何实现很多Ionic 2应用常用功能: 创建视图 监听处理事件 视图之间导航 在视图之间传递数据 建立双向数据绑定 保存数据 显然还有很多我们可以做,使这个应用程序更漂亮

6.1K50

2020 非常火 11 个微前端框架

尽管人们通常将微前端视为在运行时发生组合,但 Bit 可以让开发人员在构建时高效地组合前端,以享受两全其美的优势:“传统单体式前端”安全性健壮性,以及微前端 简单性 可伸缩性。...项目链接 https://webpack.js.org/concepts/module-federation/ 简而言之,Module Federation 允许 JavaScript 应用程序在运行时从另一个应用程序动态导入代码...因此,如果你希望将不同前端或框架整合到一个 DOM 中,并希望在运行时进行集成,请查看这个有趣实验。...可以将 SystemJS 视为 JS 模块协调器。它使我们无需依赖本机浏览器支持,即可使用与 JS 模块相关不同功能,诸如动态导入导入映射等,并且所有这些都具有接近本机性能。...Piral  Piral 目标是让你可以使用微前端轻松构建门户应用程序。你可以使用 Piral 创建模块化前端应用程序,并利用微前端体系结构在运行时使用称为 pilets 解耦模块进行扩展。

2.1K22

2020 非常火 11 个微前端框架

尽管人们通常将微前端视为在运行时发生组合,但 Bit 可以让开发人员在构建时高效地组合前端,以享受两全其美的优势:“传统单体式前端”安全性健壮性,以及微前端 简单性 可伸缩性。...项目链接 https://webpack.js.org/concepts/module-federation/ 简而言之,Module Federation 允许 JavaScript 应用程序在运行时从另一个应用程序动态导入代码...因此,如果你希望将不同前端或框架整合到一个 DOM 中,并希望在运行时进行集成,请查看这个有趣实验。...可以将 SystemJS 视为 JS 模块协调器。它使我们无需依赖本机浏览器支持,即可使用与 JS 模块相关不同功能,诸如动态导入导入映射等,并且所有这些都具有接近本机性能。...Piral Piral 目标是让你可以使用微前端轻松构建门户应用程序。你可以使用 Piral 创建模块化前端应用程序,并利用微前端体系结构在运行时使用称为 pilets 解耦模块进行扩展。

1.7K20

译文:你应该知道11个微前端框架

简而言之,Module Federation允许JavaScript应用程序在运行时从另一个应用程序动态导入代码。...Systemjs被看做JS模块协调器,它能够让我们运用不同JS模块连接特点,例如动态导入导入映射等等,而不是依赖于本地浏览器支持——在以上方面,Systemjs都具有接近本地性能。...一些值得注意功能包括适用于老版本浏览器Polyfill,使用名称模块导入(通过将名称映射到路径),对多个JS模块单个网络请求(通过使用它API,将多个模块设置为单个文件)。...5 Piral Piral目标是让你轻松通过微前端建立一个门户应用,它能够确保你能够创建一个模块化应用程序,并且利用微前端体系结构,在运行时使用被称为“pilets”解耦模块进行扩展。...Mosaic运用这些片段提供独立服务,并且根据模板定义,在运行时将他们组合在一起。

4.8K10

你必须知道11个微前端框架

尽管人们通常将微前端视为在运行时发生组合,但 Bit 可以让开发人员在构建时高效地组合前端,以享受两全其美的优势:“传统单体式前端”安全性健壮性,以及微前端 简单性 可伸缩性。...项目链接 :https://webpack.js.org/concepts/module-federation/ 简而言之,Module Federation 允许 JavaScript 应用程序在运行时从另一个应用程序动态导入代码...因此,如果你希望将不同前端或框架整合到一个 DOM 中,并希望在运行时进行集成,请查看这个有趣实验。...可以将 SystemJS 视为 JS 模块协调器。它使我们无需依赖本机浏览器支持,即可使用与 JS 模块相关不同功能,诸如动态导入导入映射等,并且所有这些都具有接近本机性能。...Piral Piral 目标是让你可以使用微前端轻松构建门户应用程序。你可以使用 Piral 创建模块化前端应用程序,并利用微前端体系结构在运行时使用称为 pilets 解耦模块进行扩展。

1.7K10

为生产环境编译 Angular 2 应用

为生产环境编译 Angular 2 应用 Angular 2 已经发布了 2.1.2 版本, 相信很多人已经在使用(试用)了, 相比 AngularJS 1.x , Angular 2 在性能上有了长足进步..., 同时 Angular 2 也变得非常庞大, 动辄几兆脚本, 如何部署到生产环境?...接下来就介绍如何为生产环境编译 Angular 2 应用, 在本文中, 我们将 Angular 2 官方文档中 Hello Angular 应用编译到 50K 以下, 以用于生产环境。...未经优化应用 根据 Angular2 官方 QuickStart 快速创建一个 Hello Angular 应用, 在没有任何优化情况下, 运行情况如下图所示: ?...i -D @angular/compiler-cli 为了使用 aot 编译出来文件, main.ts 文件也要做相应修改, 将 main.ts 文件另存为 main-aot.ts , 修改内容如下

1.2K30

聊聊 nestjs 中依赖注入

在使用过程中会发现 nest 框架后端同学使用 Springboot 以及前端三大框架之一 Angular 都有很多相似之处。没错这三个框架都有相似的设计,并都实现了依赖注入。...根据 nest 官网教程,用脚手架创建一个项目,创建项目中有 main.ts 文件为入口文件,引入了 app.module.ts 文件,而 app.module.ts 文件引入了 app.controller.ts...: 减少样板代码,不需要再在业务代码中写大量实例化对象代码了; 可读性可维护性更高了,松耦合,高内聚,符合单一职责原则,一个类应该专注于履行其职责,而不是创建履行这些职责所需对象。...元数据反射 我们都知道 ts 中类型信息是在运行时是不存在,那运行时如何根据参数类型注入对应实例呢?...答案就是:元数据反射 先说反射,反射就是在运行时动态获取一个对象一切信息:方法/属性等等,特点在于动态类型反推导。不管是在 ts 中还是在其他类型语言中,反射本质在于元数据。

3.1K20

Angular 接入 NGRX 状态管理

reducers, { metaReducers }), StoreDevtoolsModule.instrument(), ], ... }) export class AppModule {} 创建用于添加删除用户...选项介绍: 选项 作用 --reducers 执行reducers存放路径,约定路径为上一级 index.ts,也是 store 创建文件 --skip-tests 跳过生成测试文件 示例命令:...仅包含导入模块一行代码: import { createFeatureSelector, createSelector } from '@ngrx/store'; 使用导入函数创建适用于 User...--skip-tests 创建 app/store/effects/user.effects.ts 并更新 app.module.ts: import { Injectable } from '@angular...reducers存放路径,约定路径为上一级 index.ts,也是 store 创建文件 --skip-tests 跳过生成测试文件 示例命令: ng generate entity store/

17010
领券