从外部typescript文件直接从Angular2页面引导
是指在Angular2项目中，通过引入外部的typescript文件来启动和加载Angular2页面。
在Angular2中，通常使用Angular CLI来创建和管理项目。Angular CLI会自动生成一个主要的typescript文件，通常命名为main.ts。这个文件是Angular2应用的入口点，负责引导整个应用。
要从外部typescript文件直接从Angular2页面引导，可以按照以下步骤进行操作：
- 创建一个新的typescript文件，例如app.ts，用于引导Angular2页面。
- 在app.ts文件中，引入必要的依赖项和模块，例如Angular的核心模块和平台浏览器模块。
- 创建一个启动函数，例如bootstrapApp()，用于启动Angular2应用。
- 在bootstrapApp()函数中，使用Angular的platformBrowserDynamic()方法来启动应用，并指定要引导的根组件。
- 在Angular2页面的HTML文件中，引入app.ts文件。
以下是一个示例的app.ts文件的代码：
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
function bootstrapApp() {
platformBrowserDynamic().bootstrapModule(AppModule);
}
bootstrapApp();在上面的示例中，我们引入了platformBrowserDynamic模块，并使用bootstrapModule方法来引导AppModule根模块。
在Angular2页面的HTML文件中，可以通过添加以下代码来引入app.ts文件：
<script src="app.ts"></script>这样，当浏览器加载Angular2页面时，会自动执行app.ts文件中的代码，从而启动和加载Angular2应用。
需要注意的是，以上示例只是一个简单的演示，实际项目中可能涉及更多的配置和模块引入。具体的实现方式和配置可能因项目而异。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能机器学习平台（AI Lab）：https://cloud.tencent.com/product/ai
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
1回答
使用angular 2在同一页面中引导两个应用程序
angular
我正在尝试在同一个页面中引导两个angular2应用程序。我已经尝试过使用platformBrowserDynamic.bootstrapModule()来实现这一点。但它抛出了错误，因为“试图找到引导程序代码，但找不到。指定可静态分析的引导程序代码或将entryModule传递给插件选项。”
//Main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
i
浏览 0提问于2017-07-06得票数 3
1回答
如何仅在存在DOM元素时加载Angular2应用程序
javascript、angularjs、angular、typescript、webpack
我在我的main.ts文件(应用程序的引导文件)上有这样的代码，它工作得很好：
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
但是，当主选择器存在时，我只想引导应用程序(因为如果没有，就会引发选择器未找到的典型错误)，所以我认为下面的代码会起作用：
import { p
浏览 0提问于2016-11-12得票数 2
回答已采纳
1回答
如何使用bootstrapModule()在Angular2中引导两个模块？
angularjs-module、angular2-modules
通常，这就是模块与main.ts集成或引导的方式。
import {platformBrowserDynamic} from'@angular/platform-browser-dynamic'
import {AppModule} from './app.module'
platformBrowserDynamic().bootstrapModule(AppModule)
但如果我们有两个模块说：
AppModule-它可以处理与UI相关的更改/修改
DataModule- -用于通信/修改/显示与数据相关的接口
AppModule和Dat
浏览 9提问于2017-08-01得票数 3
1回答
如何有条件地引导Angular (5)中的模块？品牌塑造
.net、angular、asp.net-core
我在一个.NET核心项目中有一个Angular 5应用程序，被几个客户使用。所有这些都需要不同的功能和不同的外观。我已经尝试了几件事来帮助这件事。首先，我让每个公司都有它的文件夹结构，为他们的页面和自己的模块。然后，我可以选择每个页面上的共享组件应该位于一个共享模块中。我仍然会使用AppModule作为根模块，并使用带有条件主标签的应用程序组件来正确加载站点。scss/Sass/css将在每个品牌的“主”页面中定义。
例如..。等等。
所有这些都正常工作，除了css仍然从没有被“加载”的品牌加载。因此，它们正在编译，尽管它们永远不会被使用。
所以我去找了另一个解决方案。跳过作为根模块的AppM
浏览 0提问于2018-02-24得票数 1
5回答
在设置混合AngularJS /AngularJS时获得“不能解决所有参数”的错误
angular、angular2-upgrade
我想升级我的传统角度JS应用程序，我一直在跟踪angular.io上的文档，以设置一个混合应用程序。
现在，我在app.ts中的引导过程如下所示：
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from "./app.module";
platformBrowserDynamic().bootstrapModule(AppModule);
我的新app.module.ts看起来像：
import { NgModule
浏览 6提问于2017-08-18得票数 18
回答已采纳
2回答
将模块导入AngularJS时出现AngularJS错误--匿名System.register调用只能由SystemJS.import加载的模块进行
javascript、angularjs、angular、systemjs
我正在使用标准的AngularJS模块升级一个ngUpgrade应用程序。我已经将一个服务转换成了角，我需要降低它的等级，这样我就可以在现有的AngularJS模块中使用它。我正在尝试导入'downgradeInjectable‘和这样的棱角服务：
import { downgradeInjectable } from '@angular/upgrade/static';
import { MyService } from './app/my-service';
(function () {
var myCtrl = ['myServ
浏览 4提问于2018-02-07得票数 3
回答已采纳
1回答
错误:没有为“NgModule”找到AppModule元数据
angular、typescript
我有一个问题角2应用程序，我正在建设。我一直在从不同的位置练习我的复制/粘贴技巧，并且消除了所有的构建错误，但是当我在浏览器中启动它时，浏览器中有一个错误。我看过，但它并没有解决我的问题。
我的AppModule看起来是这样的：
import { NgModule, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'
浏览 3提问于2016-10-25得票数 6
回答已采纳
2回答
在angular2 final中全局注册指令
angular、typescript、angular2-directives
我有一些自定义指令，我需要在整个应用程序中使用。如何注册我的指令以在整个应用程序中使用？我遇到的其他问题都已经过时了。我需要angular 2最终版本2.1.0的解决方案
我的main.ts看起来像这样
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
//enabl
浏览 6提问于2016-11-23得票数 0
1回答
在Visual 2015更新3中使用类型记录学习角
angular、visual-studio-2015
我对角质很陌生。我正在尝试使用visual 2015创建一个角度应用程序。我已经安装了在VS2015中工作所需的所有需求和配置，就像提到的一样。
我已经学会了角度方面的基本知识。现在，我需要继续与棱角样例项目深入学习。
在我的第一个示例项目中，我有三个.ts(转录本)文件，
Main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './boot';
const platform = platformB
浏览 0提问于2017-05-09得票数 0
回答已采纳
2回答
ng构建抛出错误：“试图找到引导代码，但无法。”
angular、angular-cli、ng-build
当我试图用ng-build构建我的应用程序时，我会得到以下错误：
试图找到引导代码，但无法。指定静态可分析引导代码或将entryModule传递给插件选项。
我在.angular-cli.json中指定的主文件非常简单：
import { NgModule } from '@angular/core';
import { LoginComponent } from './login.component';
import { BrowserModule } from '@angular/platform-browser';
import {
浏览 0提问于2018-02-19得票数 2
回答已采纳
1回答
ASP.NET框架中正确的angular 6架构
c#、asp.net-mvc、angular、architecture、angular6
我有一个现有的.NET框架应用程序: ASP.NET MVC (4.6.1)。它包含典型的控制器和.cshtml视图。
现在我们将介绍angular 6(之前我们在少量页面上使用angularjs )。所以我想知道angular的模块化架构的最好用途是什么，而不需要在这一点上重新处理每个视图。
理想情况下(在angular的/前端透视图中)，您的应用程序完全通过angular路由，并且不再有任何cshtml，只有一些加载angular应用程序的Home.cshtml。
但考虑到应用程序的大小和重新处理所有内容所需的工作量，我正在尝试找到结合这两种技术的最佳方法(这也可能有一些好处？)然后慢慢地
浏览 1提问于2018-10-03得票数 0
2回答
Angular2，我做错什么了？
angular、angular2-routing
我正在学习Angular2框架，只是停留在中间。目标-简单的应用程序，从需要的组件加载视图(主页)。
以下是我所拥有的：
app/app.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
app/app.module.ts
import { NgModule }
浏览 2提问于2016-09-11得票数 0
回答已采纳
1回答
如何在platformBrowser模式下用platformBrowserDynamic代替maint.ts中的角cli应用程序来引导应用？
angular、typescript、angular-cli、angular2-aot
我正在用aot=true和-prod构建带有角cli的应用程序，这样应用程序就可以使用app编译，并且包的大小也会更小，但是我如何在app模式下引导应用程序，以便引导更快，就像在中解释的那样。
当前代码：
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environme
浏览 0提问于2018-03-05得票数 5
2回答
@NgModule是新的吗？
angular
我正在通过我刚买的一本书学习角质2(成为一名有角质2的忍者)。
我也在并行地浏览官方文档，但是当从官方网站快速启动时，我看到他们在谈论@NgModule，而书中却没有提到它。
因此，我想知道官方文档是否是最新的，NgModule是否是一个新事物。我想我在某个地方读到的文档并不是最新的，所以我不想使用很快就会被废弃的东西。
下面是他们在书中引导应用程序的方式：
import { bootstrap } from '@angular/platform-browser-dynamic';
import PonyRacerAppComponent from './app/po
浏览 2提问于2016-08-16得票数 4
回答已采纳
1回答
角9平台引导多个模块-在页面上运行多个应用程序
html、angular、typescript、bootstrap-4
我正在做一个需要在页面上运行两个应用程序的项目。类似于：
<body>
<app-main></app-main>
<app-secondary></app-secondary>
</body>
其思想是两个应用程序都有自己的注入器/路由/NgZone，其中一个应用程序将通过更新样式display: none/block一次显示。
我可以通过在main.ts中引导两个模块来实现这一点。它适用于隔离注入器/路由/NgZone：
platformBrowserDynamic().bootstrapModule(AppM
浏览 4提问于2020-04-27得票数 1
回答已采纳
1回答
如何导出在.then()函数中声明的变量
node.js、angular、typescript
我正在创建一个单一的温泉角度应用程序。当我们将单个spa功能与现有的angular应用程序集成时，它会创建新的主文件，并在启动应用程序时考虑这一点。现在，我关心的是我正在使用一些异步操作，并在main.js文件中启动应用程序时提供这些操作：
resolveAsyncServices([
{
provide: XYZ,
useFactory: () => XYZ.getUserLocale()
},
{
provide: ABC,
useFactory: (ABCData: Locale) =>
浏览 47提问于2020-02-20得票数 0
回答已采纳
29回答
角2:没有找到NgModule元数据
angular、typescript、webpack
我是全新的角质2，并试图跟随一个视频教程，我发现。尽管遵循了所有步骤，角还是不能工作；我得到了以下错误：
compiler.umd.js:13854 Uncaught Error: No NgModule metadata found for 'App'.
组件根本不加载。
这是我的档案：
package.json：
{
"name": "retain",
"version": "1.0.0",
"description": "",
"main": &
浏览 25提问于2016-09-25得票数 69
回答已采纳
1回答
破坏Angular2应用程序
performance、angular、memory-management
当用户导航到其他页面时，我需要销毁Angular2应用程序(注意:这是一个仅对一个页面使用angular2的应用程序)。因此，当用户离开这个页面时，我们必须取消ng2应用程序的引导。
我认为applicationRef如下：
platformBrowserDynamic([
{provide: 'ConfigService', useValue: {} }
]).bootstrapModule(AppModule).then((appModule:NgModuleRef<AppModule>)=>{
const appRef = appModu
浏览 6提问于2017-04-12得票数 4
1回答
使用SystemJS-builder预先打包角2编译器文件。
angular、deployment、module、compilation、systemjs
我用typescript 2编写了我的typescript 2应用程序，使用了上的提前编译说明。
main.ts
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
现在我有很多ngfactory.ts文件和.js文件。要实现树抖动和绑定，我将使用以下简单的任务：
gulp.task('demo-bundle', function() {
var builder = new SystemBuilder();
builder.loadConfig('./systemjs.config
浏览 4提问于2016-10-09得票数 2
回答已采纳
3回答
Angular 2.0模块'AppModule‘导入的意外值'[object Object]’
angular、typescript、angular2-modules
当我尝试加载angular 2.0应用程序时，我得到以下错误：(索引)：21错误:错误:由模块'AppModule‘导入的意外值'object Object’
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { searchComponent } from './search.Component';
import { landingCo
浏览 1提问于2016-09-25得票数 7
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
