Angular 4.0.0 找不到 bootstrap 代码
Angular 4.0.0 could not find bootstrap code
错误:试图找到 bootstrap 代码,但指定可静态分析的 bootstrap 代码或将 entryModule 传递给插件选项。
main.ts
getHttp().get('/assets/config.json').toPromise()
.then((res: Response) => {
let conf = res.json();
platformBrowserDynamic().bootstrapModule(createAppModule(conf));
})
我正在使用 angular-cli。 使用 angular v2.3.1 此代码运行良好。
我想获取 json 并将其传递给@Ngmodules 提供者
{ provide: Config, useValue: conf }
如果您从 config.json
获取的数据只是关于应用程序模块的配置,并且您正在尝试创建一个 Config
服务来存储它们,我认为最好的办法是将它分配给 environment
并稍后在您的 Config
服务中读取它。 environment
在 main.ts
中可用,因此无需破解 (createAppModule
)。
import { environment } from './environments/environment';
import { AppModule } from './app/';
getHttp().get('/assets/config.json').toPromise()
.then((res: Response) => {
let conf = res.json();
environment.settings = conf;
platformBrowserDynamic().bootstrapModule(AppModule);
});
您还必须在 src/environments/environment.ts
文件中声明 environment
的所有新属性。
cli 正在尝试使用提前编译。因此,它需要能够找到您的主要 NgModule
.
通常,AOT 编译器仅通过查找 bootstrap 调用就能够静态地执行此操作。但是,您不会立即 bootstrapping,因此编译器需要您明确告诉它您的应用程序模块的名称,以便它可以编译它及其所有组件。
解决方案
ng eject
并手动配置 entryModule
首选的解决方案是将您的 entryModule
的名称告诉 cli。这将允许 AOT 工作并为您提供它的所有好处。然而,cli 目前不支持这个(但是有一个用于添加选项的 PR #4077)。
当前的解决方法是使用 ng eject --aot
切换到基于手动 webpack 的构建。然后你可以直接配置你的entryModule
。
ng eject --aot
- 打开
webpack.config.js
并搜索 new
AotPlugin
- 添加以下内容并替换您的
AppModule
姓名
entryModule: 'path/to/app.module#AppModule'
跳过 AOT
如果您只需要构建工作,您可以使用 --no-aot
标志完全跳过这个问题。不建议这样做,因为您的应用程序将比正常情况下慢得多且更大(它必须在运行时编译组件,并且您将不得不交付大型编译器)。
ng prod --no-aot
已接受的答案对我不起作用。
提取 bootstrap 模块部分将使 Angular 找到 bootstrap 代码。
import { environment } from './environments/environment';
import { AppModule } from './app/';
const bootstrap = () => {
platformBrowserDynamic().bootstrapModule(AppModule);
};
getHttp().get('/assets/config.json').toPromise()
.then((res: Response) => {
let conf = res.json();
environment.settings = conf;
bootstrap();
});
错误:试图找到 bootstrap 代码,但指定可静态分析的 bootstrap 代码或将 entryModule 传递给插件选项。
main.ts
getHttp().get('/assets/config.json').toPromise()
.then((res: Response) => {
let conf = res.json();
platformBrowserDynamic().bootstrapModule(createAppModule(conf));
})
我正在使用 angular-cli。 使用 angular v2.3.1 此代码运行良好。
我想获取 json 并将其传递给@Ngmodules 提供者
{ provide: Config, useValue: conf }
如果您从 config.json
获取的数据只是关于应用程序模块的配置,并且您正在尝试创建一个 Config
服务来存储它们,我认为最好的办法是将它分配给 environment
并稍后在您的 Config
服务中读取它。 environment
在 main.ts
中可用,因此无需破解 (createAppModule
)。
import { environment } from './environments/environment';
import { AppModule } from './app/';
getHttp().get('/assets/config.json').toPromise()
.then((res: Response) => {
let conf = res.json();
environment.settings = conf;
platformBrowserDynamic().bootstrapModule(AppModule);
});
您还必须在 src/environments/environment.ts
文件中声明 environment
的所有新属性。
cli 正在尝试使用提前编译。因此,它需要能够找到您的主要 NgModule
.
通常,AOT 编译器仅通过查找 bootstrap 调用就能够静态地执行此操作。但是,您不会立即 bootstrapping,因此编译器需要您明确告诉它您的应用程序模块的名称,以便它可以编译它及其所有组件。
解决方案
ng eject
并手动配置 entryModule
首选的解决方案是将您的 entryModule
的名称告诉 cli。这将允许 AOT 工作并为您提供它的所有好处。然而,cli 目前不支持这个(但是有一个用于添加选项的 PR #4077)。
当前的解决方法是使用 ng eject --aot
切换到基于手动 webpack 的构建。然后你可以直接配置你的entryModule
。
ng eject --aot
- 打开
webpack.config.js
并搜索new AotPlugin
- 添加以下内容并替换您的
AppModule
姓名
entryModule: 'path/to/app.module#AppModule'
- 添加以下内容并替换您的
跳过 AOT
如果您只需要构建工作,您可以使用 --no-aot
标志完全跳过这个问题。不建议这样做,因为您的应用程序将比正常情况下慢得多且更大(它必须在运行时编译组件,并且您将不得不交付大型编译器)。
ng prod --no-aot
已接受的答案对我不起作用。 提取 bootstrap 模块部分将使 Angular 找到 bootstrap 代码。
import { environment } from './environments/environment';
import { AppModule } from './app/';
const bootstrap = () => {
platformBrowserDynamic().bootstrapModule(AppModule);
};
getHttp().get('/assets/config.json').toPromise()
.then((res: Response) => {
let conf = res.json();
environment.settings = conf;
bootstrap();
});