标签: angular2-aot

我正在尝试构建用于生产的 angular2应用程序,因为我正在关注此博客.在我的ngc成功编译后,当tsc编译发生时,它会生成以下错误,如图所示:

在搜索了一段时间后,我发现这个博客解释了"上下文属性"部分中的问题,我无法正确理解它可能会给你一些好主意,发生了什么错误.基本上当我们将变量设为私有时,我们会得到"错误:属性是私有的,只能在类中访问".我不明白为什么会这样.

请帮助我们,因为我们在过去的几天里一直在讨论这个问题.

我试图将配置数据传递到Angular中的自定义库.

在用户应用程序中,他们将使用一些配置数据传递给我的库forRoot

// Import custom library
import { SampleModule, SampleService } from 'custom-library';
...

// User provides their config
const CustomConfig = {
  url: 'some_value',
  key: 'some_value',
  secret: 'some_value',
  API: 'some_value'
  version: 'some_value'
};

@NgModule({
  declarations: [...],
  imports: [
    // User config passed in here
    SampleModule.forRoot(CustomConfig),
    ...
  ],
  providers: [
    SampleService
  ]
})
export class AppModule {}

在我的自定义库中,特别是index.ts,我可以访问配置数据:

import { NgModule, ModuleWithProviders } from '@angular/core';
import { SampleService } from './src/sample.service';
...

@NgModule({
  imports: [ …

到目前为止,我可以用角度cli创建的最小的捆绑是运行

ng build --aot true -prod

我想知道构建过程是否也删除了未使用的CSS类,例如从bootstrap？

如果不是,我怎么能添加像purifycss这样的库？

编辑2018年4月

我仍然没有找到任何令人满意的解决方案来解决他的问题,特别是与带有角度的延迟加载模块兼容的解决方案...

干杯

我正在尝试遵循Angular 2 的官方AoT指南,我在我的应用程序中使用Moment.js.Moment.js在我的packages.json文件中,我使用的是2.15.0 版本.到目前为止我一直在导入它:

import * as moment from 'moment';

但是当我到达必须运行汇总的部分时,我最终得到以下错误:

无法调用命名空间('时刻')

这似乎是与我根据导入的时刻方式本.那么,我该怎么做呢？我似乎无法以任何其他方式导入时刻.如果我使用

import moment from 'moment'

我收到编译错误

外部模块"'时刻''没有默认导出

Angular 2 rc 6,typescript 2,node 4.5.0,npm 2.15.9上Windows 7

我正试图从即时编译转变为提前编译,我依赖这些资源:

• Angular 2 - 提前编译如何
• https://github.com/angular/angular/tree/master/modules/@angular/compiler-cli#angular-template-compiler

我知道我需要运行编译器ngc来生成ngfactory.ts文件,我需要更改main.ts为使用platformBrowser而不是platformBrowserDynamic引导程序.我遇到了障碍,但不知道如何继续.

1.我已确认使用即时编译可以正常运行App.我main.ts是:

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

2.我清除了生产文件夹中的所有应用程序文件,但保留了第三方库(例如:Angular 2,Angular 2 Material)

3.我运行"node_modules/.bin/ngc" -p ./它运行时没有输出到控制台.我看到了.ngfactory.ts每个.ts组件和模块的文件.我还看到了.css.shim.ts每个.css持有组件样式的文件.此外,.js和.js.map文件已被transpiled,并放置在生产目录

4.如果我此时尝试运行应用程序,我会看到包含组件模板的404 not found所有.html文件的错误

5.我手动将所有模板文件(.html)移动到生产目录并运行应用程序.它运行正常,但它仍然使用即时编译(255个请求,包括compiler.umd.js)

6.我改变main.ts为: …

我正在使用角度2懒惰路由.客户端使用AOT和angular-router-loader捆绑webpack2到延迟加载子级.当浏览器连接时,一切都按预期工作,即我可以成功地将路由器导航到延迟加载的模块,块成功加载,我可以查看组件等.

但是,如果我模拟断开连接(例如,通过使用脱机chrome开发人员工具选项)路由失败,正如预期的那样,因为它无法加载相关的块.错误是'加载块[块号]失败'

之后没有路由命令工作,就像路由器坏了.

我试图使用全局ErrorHandler处理错误.我的想法是,也许我可以在它破坏路由器之前捕获错误,但似乎到时候已经太晚了.当我发现错误时,路由器无法正常工作.

import { Injectable, ErrorHandler, Injector } from '@angular/core';

import { Router } from '@angular/router';

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
    constructor(private injector: Injector) {
        super(false);
    }

    private get router(): Router {
        return this.injector.get(Router, null);
    }

    public handleError(error: Error) {
        if (/Loading chunk [\d]+ failed/.test(error.message)) {
            console.info('Offline mode');
            let router = this.router;
            if (router) {
                router.navigateByUrl('/offline').then(t => console.debug(t+'')).catch(t=> console.debug(t));
            } else {
                window.location.href = '/';
            }
        }
    }
}

自定义错误处理程序有效,因为打印了"脱机模式"消息.注入也有效,路由器不为空,但是路由器导航不起作用,路由器承诺未解决也没有被拒绝.

我想要完成的是处理错误(例如向用户显示信息性消息)并同时使路由器处于工作状态,以便用户可以稍后导航(当恢复互联网连接时)没有重新加载整个页面.

更新1:尝试重现没有aot和webpack

为了查看这是否是一个角度路由器问题,我试图看看当尝试使用jit编译脱机工作时会发生什么.我使用:angular router plunker …

我正在使用Angular 4.在AOT和lazy模块中运行汇总后出现此错误:

错误:未捕获(在承诺中):TypeError:System.import不是函数

我的项目在JIT中工作正常但在AOT中我无法重定向到懒惰路由.我无法理解为什么会出现这种错误.

我该如何解决这个错误？

谢谢.

我在Angular 2中构建了一个应用程序,并遇到了一个问题.我使用angular CLI来创建我的应用程序,我使用Angular CLI创建了我的组件和服务,并使用" ng serve "在本地运行应用程序,一切正常.为了创建PROD的构建我使用命令" ng build --Prod --base-href ./ --aot ",它创建一个DIST文件夹并在IIS中托管该文件夹打开应用程序.当我将代码签入TFS时,有一个事件会使用jenkins自动创建DIST文件夹并将构建推送到我的服务器.现在,如果我浏览服务器的应用程序,它会抛出以下错误" 没有提供商! "和错误:DI错误.我不知道我在这里做错了什么.

以下是错误的屏幕截图

任何帮助深表感谢.

下面是我创建动态模块的初始代码:

protected createComponentModule(componentType: any) {

    @NgModule({
        imports: [
            ComponentModule 
        ],
        declarations: [
            componentType
        ],
    })
    class RuntimeComponentModule {
    }
    return RuntimeComponentModule;

}

虽然我将在下面的代码上实现AOT,但它会给我一个错误:

找不到'RuntimeComponentModule'的NgModule元数据

我通过更改下面的代码找到了一些Articals的解决方案,我的错误消失了:

default class RuntimeComponentModule 
{
}

但是它提出了新的错误:

修饰符不能出现在这里

它不允许我在方法中装饰@NgModule.

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'image-display',
  templateUrl: './image-display.component.html'
})
export class ImageDisplayComponent implements OnChanges {
  @Input() image: File;
  @Input() imagePath?: string;

  private fileReader: FileReader;

  constructor() { }

  ngOnChanges() {
    if (this.image && this.fileReader) {
      this.fileReader.readAsDataURL(this.image);
    }
  }
}

在使用AOT进行编译时得到以下错误:

PRINHYLTPAP0592:matata ajays$ ng build --prod --aot
/myApp/src/$$_gendir/app/image-uploader/image-display/image-display.component.ngfactory.ts (61,9): 
Supplied parameters do not match any signature of call target.