angular - 调用了如何解决 "Function calls are not supported in decorators but ' StoreModule'。”

Question

我有一个 Angular (7)项目。

在我的 package.json 中，我定义了一个命令:

{
  "name": "xxx",
  "version": "0.1.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-prod": "ng build --prod",
    "test": "ng test",
    "test-ci": "ng test --no-watch --no-progress --browsers=ChromeHeadlessNoSandbox",
    "e2e-ci": "ng e2e --protractor-config=e2e/protractor.conf.js",
    "deploy": "firebase deploy --token $FIREBASE_TOKEN --non-interactive",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  [...]
}

当我刚刚运行 npm run build-prod在本地，一切正常。

现在我试图在我的 gitlab CI 上执行这段代码。

为此，我有以下 .gitlab-ci.yml

image: node:10

build:
  stage: build
  cache:
    paths:
      - node_modules/
  script:
    - npm install --quiet
    - npm run build-prod
  artifacts:
    paths:
      - dist/

test:
  stage: test
  cache:
    policy: pull
    paths:
      - node_modules/
  script:
    # install dependencies to use chrome w/ puppeteer
    - apt update && apt install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
    - npm run test-ci
    - npm run e2e-ci

deploy_prod:
  stage: deploy
  environment:
    name: production
    url: $FIREBASE_URL
  only:
   - master
  dependencies:
    - build
  cache:
    policy: pull
    paths:
      - node_modules/
  script:
    - npm run deploy

但是当它运行时，我得到一个错误:

Running with gitlab-runner 11.10.0-rc2 (10efa505)
  on docker-auto-scale 72989761
Using Docker executor with image node:10 ...
Pulling docker image node:10 ...
Using docker image sha256:64c810caf95adbe21b5f41be687aa77aaebc197aa92f2b2283da5d57269d2b92 for node:10 ...
Running on runner-72989761-project-XYZ-concurrent-0 via runner-72989761-srm-1555525988-c992ea28...
Initialized empty Git repository in /builds/XXX/YYY/.git/
Fetching changes...
Created fresh repository.
From https://gitlab.com/XXX/YYY
 * [new branch]      13-solve-testing-issues -> origin/13-solve-testing-issues
 * [new branch]      develop                 -> origin/develop
 * [new branch]      master                  -> origin/master
Checking out e61598d8 as 13-solve-testing-issues...

Skipping Git submodules setup
Checking cache for default...
Downloading cache.zip from https://storage.googleapis.com/gitlab-com-runners-cache/project/XYZ/default 
Successfully extracted cache
$ npm install --quiet
npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but npm-shrinkwrap.json was generated for lockfileVersion@0. I'll try to do my best with it!

> ngrx@2.0.1 postinstall /builds/XXX/YYY/node_modules/ngrx
> node postinstall.js

npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/@angular/compiler-cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 4 packages from 2 contributors and audited 45321 packages in 15.393s
found 27 vulnerabilities (2 low, 5 moderate, 20 high)
  run `npm audit fix` to fix them, or `npm audit` for details
$ npm run build-prod

> YYY@0.1.0 build-prod /builds/XXX/YYY
> ng build --prod


Date: 2019-04-17T18:35:40.652Z
Hash: b0ba2a53437bf05b46d4
Time: 13104ms
chunk {0} runtime.26209474bfa8dc87a77c.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.01ecbc0fcff9207e8cde.js (main) 128 bytes [initial] [rendered]
chunk {2} polyfills.a723c36635c3a098c2aa.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} styles.6c94e29121bf3425375a.css (styles) 132 kB [initial] [rendered]
chunk {scripts} scripts.9aa141af6e0119c2bcf8.js (scripts) 581 kB [entry] [rendered]

ERROR in Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'StoreModule' was called.
node_modules/@ngrx/store/src/ng2.d.ts(1,10): error TS2305: Module '"../../../@angular/core/core"' has no exported member 'OpaqueToken'.
src/app/app.reducer.ts(1,10): error TS2305: Module '"../../node_modules/@ngrx/store"' has no exported member 'ActionReducerMap'.
src/app/app.reducer.ts(1,28): error TS2305: Module '"../../node_modules/@ngrx/store"' has no exported member 'createFeatureSelector'.
src/app/app.reducer.ts(1,51): error TS2305: Module '"../../node_modules/@ngrx/store"' has no exported member 'createSelector'.
src/app/app.module.ts(42,21): error TS2339: Property 'forRoot' does not exist on type 'typeof StoreModule'.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! YYY@0.1.0 build-prod: `ng build --prod`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the YYY@0.1.0 build-prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-04-17T18_35_40_678Z-debug.log
ERROR: Job failed: exit code 1

我对 angular 和 gitlab 很陌生。你明白为什么会出错，或者如何找到我的问题吗？

编辑
这是我当前的 tsconfig 文件:

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "es2015",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2018",
            "dom"
        ]
    },
    "angularCompilerOptions":{

        "skipTemplateCodegen": false,
        "strictMetadataEmit": false,
    }
}

编辑 2
这是我的 app.module.ts:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LocationStrategy, PathLocationStrategy } from '@angular/common';
import { AppRoutes } from './app.routes';


import { AppComponent } from './app.component';
import { AppProfileComponent } from './app.profile.component';
import { AppMenuComponent, AppSubMenuComponent } from './app.menu.component';
import { AppBreadcrumbComponent } from './app.breadcrumb.component';
import { AppTopBarComponent } from './app.topbar.component';
import { AppFooterComponent } from './app.footer.component';


import { BreadcrumbService } from './breadcrumb.service';
import { LayoutModule } from './layout/layout.module';
import { BeersModule } from './beers/beers.module';


import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { PrimeNgModule } from './primeng/primeng.module';
import { StoreModule } from '@ngrx/store';
import {reducers} from './app.reducer';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        AppRoutes,
        HttpClientModule,
        BrowserAnimationsModule,
        LayoutModule,
        BeersModule,
        AngularFireModule.initializeApp(environment.firebase),
        AngularFireAuthModule,
        PrimeNgModule,
        StoreModule.forRoot(reducers)
    ],
    declarations: [
        AppComponent,
        AppMenuComponent,
        AppSubMenuComponent,
        AppProfileComponent,
        AppBreadcrumbComponent,
        AppTopBarComponent,
        AppFooterComponent,
    ],
    providers: [
        { provide: LocationStrategy, useClass: PathLocationStrategy },
         BreadcrumbService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

编辑

我将 yml 文件更改为 node: latest .

现在我有不同的错误:

http://pasted.co/e311ee1b

Answer 1

编辑

对于初学者来说，你有一个对 ngrx 的依赖。以及 @ngrx/store , 只有后者是正确的。

您也正在从那里运行安装后脚本。

使用时要小心npm add依赖项，因为如果您不注意，您可能会将恶意代码添加到您的应用程序中。

二、你正在导入@ngrx/core从 NgRx 版本 4 开始就不需要了，而您正在使用 ^7.4.0 .如果您要升级应用中的重要功能，请务必阅读迁移指南:

https://ngrx.io/guide/migration/v4

和/或

https://ngrx.io/guide/migration/v7

旧答案

To inject the root reducers into your application, use an InjectionToken and a Provider to register the reducers through dependency injection.

https://github.com/ngrx/platform/blob/master/docs/store/api.md#injecting-reducers

如果您对详细信息感兴趣:

https://github.com/angular/angular/blob/master/packages/compiler/design/architecture.md#need-for-static-value-resolution

您能否向我们展示您在应用程序中设置 NgRx 的方式？您需要通过依赖注入(inject)注册您的 reducer，以使 AOT 编译正常工作。

app.module.ts

import { StoreModule } from '@ngrx/store';
import { reducerToken, reducerProvider } from './index';

@NgModule({
    declarations: [],
    imports: [StoreModule.forRoot(reducerToken)],
    providers: [reducerProvider]
})

index.ts

import { InjectionToken } from '@angular/core';
import { ActionReducerMap } from '@ngrx/store';


export const reducers: ActionReducerMap<any> = {
  // reducers
}

export const reducerToken = new InjectionToken<ActionReducerMap<AppState>>('Registered Reducers');

export const reducerProvider = [
    { provide: reducerToken, useValue: reducers }
];