Angular 4.0.0找不到引导代码

时间:2017-04-11 06:55:33

标签: angular angular2-modules

错误:尝试查找引导代码,但指定静态可分析引导代码或将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 } 

3 个答案:

答案 0 :(得分:3)

如果您从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); }); )。

environment

您还必须在src/environments/environment.ts文件中声明function time() { var d1 = new Date(); var d2 = Date.UTC(d1.getUTCFullYear(), d1.getUTCMonth(), d1.getUTCDate() + (d1.getUTCHours() < 11 ? 0 : 1), 11); var dh = d2 - d1; var hours = Math.floor(dh / 3600000); var dm = dh - 3600000 * hours; var min = Math.floor(dm / 60000); var ds = dm - 60000 * min; var sec = Math.floor(ds / 1000); var dmilli = ds - 1000 * sec; setTimeout(time, dmilli); hours = ('0' + hours).slice(-2); min = ('0' + min).slice(-2); sec = ('0' + sec).slice(-2); document.querySelector('#the-final-countdown p').innerHTML = hours + ':' + min + ':' + sec; } time(); 的所有新属性。

答案 1 :(得分:3)

接受的答案对我没有用。 提取bootstrapModule部分将让Angular找到引导代码。

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();
});

答案 2 :(得分:2)

cli正在尝试提前使用编译。因此,它需要能够找到您的主NgModule

通常AOT编译器只能通过查找引导调用来静态地执行此操作。但是,您不是立即引导,因此编译器需要您明确告诉它应用程序模块的名称,以便它可以编译它及其所有组件。

解决方案

ng eject并手动配置entryModule

首选解决方案是告诉cli您的entryModule的名称。这将使AOT工作并为您提供所有好处。但是cli目前不支持这个(但是有一个PR用于添加选项#4077)。

目前的解决方法是使用ng eject --aot切换到基于手动webpack的构建。然后,您可以直接配置entryModule

  1. ng eject --aot
  2. 打开webpack.config.js并搜索new AotPlugin
    • 添加以下内容并替换您的AppModule名称 entryModule: 'path/to/app.module#AppModule'
  3. 跳过AOT

    如果您只需要构建工作,则可以使用--no-aot标记完全跳过此问题。不建议这样做,因为你的应用程序将比通常更慢和更大(它必须在运行时编译组件,你必须运送大的编译器)。

    ng prod --no-aot