标签: angular2-aot

最初我在发布angular .net core SPA App时遇到以下错误:

无法在release\directives中解析rxjs /运算符

我已经通过将rxjs版本更新为5.6来解决了这个问题.

现在,在发布应用程序时,我遇到以下错误:

 WARNING in EnvironmentPlugin - NODE_ENV environment variable is undefined.

You can pass an object with default values to suppress this warning.
See https://webpack.js.org/plugins/environment-plugin for example.

ERROR in ng:///D:/ClientApp/app/components/search/search.component.html (15,91): Expected 0 arguments, but got 1.

ERROR in ng:///D:/ClientApp/app/components/search/search.component.html (134,32): Expected 0 arguments, but got 1.

ERROR in ng:///D:/ClientApp/app/components/search/search.component.html (278,25): Expected 1 arguments, but got 0.

ERROR in ng:///D:/ClientApp/app/components/search/search.component.html (15,91): Expected 0 arguments, but got 1.

ERROR in ng:///D:/ClientApp/app/components/search/search.component.html (134,32): Expected 0 …

我正在尝试从数据库中获取一些配置选项,然后再加载我的angular 2应用程序.角度应用程序需要在启动之前等待加载的数据,因为应根据这些配置选项限制对某些组件的访问.

所以我创建了一个ConfigurationService来从后端获取数据,我试图在启动应用程序之前使用根模块中的app_initializer来调用配置服务.我已经设法在几个月前创建的角度应用程序中做了这个(角度RC4),并且这次尝试以同样的方式执行此操作.

app.module.ts - 首先尝试

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';   

import { ConfigurationService } from "./shared/services/configuration.service";

@NgModule({
    imports: [
        ...
    ],
    declarations: [
        ...   
    ],    
    providers: [
        {
            provide: APP_INITIALIZER,
            useFactory: (config: ConfigurationService) => () => config.loadConfiguration(),
            deps: [ConfigurationService]
        },                 
        ConfigurationService        
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

这导致以下错误:

Error encountered resolving symbol values statically. Function calls …

我刚刚阅读了Angular 2 AOT文档,并提出了一些问题

1. 文档明显倾向于AOT优于JIT,并提到了关于AOT如何更好的所有好东西.如果是这种情况,为什么AOT不是默认构建而不是ng build --prod --aot

2. 文档详细介绍了如何设置它.会ng build --prod --aot足够好,忽略所有这些设置吗？

首先,我必须说我的应用程序在"使用"JIT时工作正常.我甚至可以捆绑prod(没有AOT,只是JIT),它工作正常.

但是当我尝试编译它(AOT)时,ngc我收到一个错误,其中说:

Can't resolve all parameters for MyComponentView in /path/my-component/my-component.view.ts:
([object Object], [object Object], [object Object], [object Object], ?)

这是以下构造函数MyComponent:

constructor( headerService:HeaderService, sidebarService:SidebarService, @Inject( AuthService.Token ) authService:AuthService.Class, router:Router, carbon:Carbon ) {
    …
    this.carbon = carbon;
    …
}

AppModule中提供了最后一个依赖项(Carbon),如下所示:

@NgModule( {
    imports: [
        …
    ],
    declarations: [
        …
    ],
    providers: [
        …
        CARBON_PROVIDERS,   //<---- HERE IS BEING PROVIDED
        CARBON_SERVICES_PROVIDERS,
        …
    ],
    bootstrap: [ AppComponent ],
} )
export class AppModule { }

将CARBON_PROVIDERS正在使用的进口angular2-carbonldp这是出口他们喜欢这个项目: …

当我进行构建时，我收到这个奇怪的错误，在监视或运行服务器时它没有给出任何内容，仅在构建时给出此错误：

Unexpected closing tag "a". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("ref=/user><img class="d-inline-block align-top" [src]="staticUrl + 'v4/img/intouch-logo-name.png'"/>[ERROR ->]</a> <search class="mr-auto col-sm-7 col-md-6 col-lg-5 col-xl-5 p-0"></search> <div id=settings> <div"): ng:///Users/header.html@0:192

这是我的 html：

<nav class="navbar d-flex flex-row navbar-light bg-faded fixed-top">
    <a class="navbar-brand" href="/user"><img class="d-inline-block align-top" [src]="staticUrl + 'v4/img/intouch-logo-name.png'" /></a>

    <search class="mr-auto col-sm-7 col-md-6 col-lg-5 col-xl-5 p-0"></search>

    <div id="settings">
        <div class="dropdown clearfix">
            <div class="userProfile dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <div class="userDetail">
                    <label> …

最近,我们的包没有任何版本更改,我们的AOT构建失败并显示以下错误消息:

块供应商中的错误[initial] [name] .bundle.js标识符
'territoryFromName'已经被声明(13:9)
}

function territoryFromName(name, identity) { var likelySubtags = __WEBPACK_MODULE_REFERENCE__7_636c6472__.supplemental.likelySubtags; var parts = name.split("-");

我们的package.json文件如下所示:

{
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "build": "webpack --config webpack.config.js",
    "build:Production": "npm run fixmem && webpack --config webpack.config.prod.js --env.Production",
    "build:test": "webpack --config webpack.config.testAOT.js",
    "fixmem": "node increase-webpack-memory.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "5.2.5",
    "@angular/common": "5.2.5",
    "@angular/compiler": "5.2.5",
    "@angular/core": "5.2.5",
    "@angular/forms": "5.2.5",
    "@angular/http": "5.2.5",
    "@angular/platform-browser": "5.2.5",
    "@angular/platform-browser-dynamic": "5.2.5",
    "@angular/platform-server": "5.2.5",
    "@angular/router": "5.2.5",
    "@progress/kendo-angular-buttons": "4.1.2",
    "@progress/kendo-angular-dateinputs": "3.4.4",
    "@progress/kendo-angular-dialog": "3.6.2",
    "@progress/kendo-angular-dropdowns": …

当我使用angular2 AoT时,我收到一个错误:

 Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 54:17 in the original .ts file), resolving symbol COMPILER_PROVIDERS in

在我的指令模块中,我有这样的代码:

import { COMPILER_PROVIDERS } from '@angular/compiler';
@NgModule({
/*imports ...*/
providers: [
    COMPILER_PROVIDERS,
]
})

我知道我应该将COMPILER_PROVIDERS更改为导出的函数,但是当我检查@ angular/compiler的源代码时,我发现:

export declare const COMPILER_PROVIDERS: Array<any | Type<any> | {
    [k: string]: any;
} | any[]>;

export declare class RuntimeCompilerFactory implements CompilerFactory {
    private _defaultOptions;
    constructor(defaultOptions: CompilerOptions[]);
    createCompiler(options?: CompilerOptions[]): Compiler;
} …

尝试构建Angular 6应用。使用时出现以下错误--prod

ERROR in Error during template compile of 'AppModule'
  Expression form not supported in 'reducers'
    'reducers' contains the error at app/app.module.ts(48,3).

app.module.ts

  import AuthEffects from './store/auth/auth.effects';
    import ContentEffects from './store/content/content.effects';
    import NavigationEffects from './store/navigation/navigation.effects';
    import ConfigEffects from './store/config/config.effects';

    import { ICommonAppState } from './app.state';
    import { reducer as authReducer, key as authKey } from './store/auth';
    import { reducer as configReducer, key as configKey } from './store/config';
    import { reducer as contentReducer, key as contentKey } from './store/content';
    import …

我尝试调整我的角度应用程序,为AOT编译和Tree Shaking(汇总)做好准备.但是我使用没有默认导出的模块(immutable.js,moment.js,...)会遇到问题.根据typscript(看这里),只能使用以下语句使用这些模块:import x = require('x')或者import * as x from 'x' 两个语句在汇总期间都会导致问题.在某些情况下,我在汇总期间收到错误:Cannot call a namespace ('x')在某些情况下,我收到运行时错误:x is undefined

在这里你可以找到我的rollup-config.js和tsconfig-aot.json tsconfig-aot_rollup-config.zip

在AOT编译和汇总期间,我需要一种方法来使用像immutable.js,moment.js这样的包.有没有办法做到这一点？

谢谢!

我在常量中有regExp：

export const Constants = {
    QUERY_PARAM_CONFIG: {
        REGEX: /\+/gi,
        REGEX_ENCODED: /%2B/g
    }
};

但是当我运行ng build时出现错误：

ERROR in app\app.module.ts(58,21): Error during template compile of 'AppModule'
  Expression form not supported in 'Constants'
    'Constants' contains the error at app\configuration\constants.ts.

npm构建脚本：

ng build --prod --output-hashing none --sourcemaps=true

有任何想法吗？

没有AoT一切正常.但是在切换加载器之后,我收到了这个错误并且不知道如何解决它,或者究竟是什么问题.

"/xxx/src/app/app.module.ts"中NgModule"AppModule"的提供程序无效 - 只允许提供者和类型的实例,得到:[/ logx /src /app/services/login.service.service中的LoggerService .ts,LocalXtorageService在/xxx/node_modules/angular-2-local-storage/dist/local-storage.service.d.ts,WindowsService在/xxx/src/app/services/window.service.ts,? null？ ,...]

相关代码来自AppModule:

import CustomHttp from './services/custom-http.service';

...

@NgModule({

...

  providers: [
    LocalStorageService,
    WindowService,
    AuthService,
    LoggerService,
    CustomHttp,
    AuthTokenStore,
    AuthService,
    SchemaValidator,
    AuthInterceptor,
    DataService,
    ErrorHelper,
    FileUpload,
    {provide: ErrorHandler, useClass: LoggingErrorHandler},
    NonAngularDialogsHelper,
    ConfirmationService,
    SearchHelper,
    FormHelper,
    DebugHelper,
    PuxApplication,
    StoreUtils,
    TranslationHelper,
    MessagesService,
    CustomValidatorsService,
    GeolocationService,
    SavedSearchesService,
    LoggedInfoService,
    BeTranslate,
    CountryHelper,
    SuggestionGenerators,
    PrimeNgHelper,
    UrlHelper,
    DocumentClickService,
    NavigationHelper,
    BeErrorsInterceptor,
    DocumentService,
    ScrollHelper,
    LinkDialogHelper,
    HtmlUtilsService,
    RouterHelperService,
    StripeService,
    VatExamplesService,
    ContactInfoHelper,
    WizardHelper,
    PasswordChangingPagesHelper,
    LandingPageHelper,
    TrackingEventsHelper,
    RfoHelper,
    ReactiveFormsHelper,
    LiveChatService,

    CounterActions
  ]

...

片段来自CustomHttp: …

我正在使用sanitizer.bypassSecurityTrustUrl链接到页面上的blobURL.只要我没有AoT编译项目,这就可以正常工作.

import {DomSanitizer} from '@angular/platform-browser';

export class AppComponent {
  constructor(private sanitizer: DomSanitizer) {
  }

  sanitize(url: string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
  }
}

sanitize函数采用如下URL:

blob:http://localhost:4200/7c1d7221-aa0e-4d98-803d-b9be6400865b

如果我使用AoT编译,我收到此错误消息:

模块构建失败:错误:/.../src/app/app.component.ts(18,3):来自导出类的公共方法的返回类型具有或正在使用来自外部模块的名称"SafeUrl""/ .../node_modules/@ angular/platform-b​​rowser/src/security/dom_sanitization_service"但无法命名.)

我在Angular 2.1.0中使用CLI

谁知道我怎么能绕过这个问题呢？还是应该报告为错误？