我有一个有角(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
。
现在我有不同的错误:
答案 0 :(得分:0)
编辑
对于初学者来说,您对ngrx
和@ngrx/store
都有依赖性,只有后者是正确的。
您也从那里运行安装后脚本。
npm add
依赖项时请小心,因为如果您不注意,可能会将恶意代码添加到应用程序中。
第二,您正在导入自NgRx版本4起不需要的@ngrx/core
,并且您正在使用^7.4.0
。如果您要升级应用程序中的重要功能,请务必阅读迁移指南:
https://ngrx.io/guide/migration/v4
和/或
https://ngrx.io/guide/migration/v7
旧答案
要将根化约简注入到您的应用程序中,请使用InjectionToken和提供程序通过依赖项注入来注册化约化。
https://github.com/ngrx/platform/blob/master/docs/store/api.md#injecting-reducers
如果您对详细信息感兴趣:
您能告诉我们您在应用程序中设置NgRx的方式吗?为了使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 }
];
答案 1 :(得分:0)
我无法确切找出您的问题,但是关于function calls are not supported in decorators
,我们可以在导出的模块上进行以下操作:
@NgModule({
declarations: [...],
imports: [
...
],
providers: [...],
bootstrap: [...]
})
export class AppModule { }
@NgModule({})
export class ToSpaceAppModule {
static forRoot(): ModuleWithProviders {
const providers = [];
return {
ngModule: AppModule,
providers
};
}
}
“某处”
import { ToSpaceAppModule } from '../src/app/app.module';
export function fromSpaceFactory() {
return import('../src/app/app.module').then(m => m.ToSpaceAppModule );
}
@NgModule({
declarations: [...],
imports: [
...
ToSpaceAppModule
],
providers: [
{
provide: ToSpaceAppModule ,
useFactory: fromSpaceFactory
}
],
bootstrap: [...]
})
export class AppModule { }