reyesoft / ngx-jsonapi

JSON API client library for Angular 5+ 👌 :: Production Ready 🚀
https://ngx-jsonapi.reyesoft.com/
MIT License
101 stars 52 forks source link

it doesn't work with Ivy compiler #266

Open karwank opened 4 years ago

karwank commented 4 years ago

package.json

{
  "private": true,
  "name": "angular-universal",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "prestart": "npm run build:prod",
    "start": "node ./dist/app/server/main.js",
    "build": "ng build",
    "build:prod": "ng build -c production",
    "dev": "ng serve",
    "dev:spa": "ng serve -c spa",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "dependencies": {
    "@angular/animations": "~9.0.0-rc.6",
    "@angular/common": "~9.0.0-rc.6",
    "@angular/compiler": "~9.0.0-rc.6",
    "@angular/core": "~9.0.0-rc.6",
    "@angular/forms": "~9.0.0-rc.6",
    "@angular/http": "~8.0.0-beta.10",
    "@angular/platform-browser": "~9.0.0-rc.6",
    "@angular/platform-browser-dynamic": "~9.0.0-rc.6",
    "@angular/platform-server": "~9.0.0-rc.6",
    "@angular/router": "~9.0.0-rc.6",
    "@angularclass/hmr": "~2.1.3",
    "@nguniversal/express-engine": "~8.2.6",
    "@nguniversal/module-map-ngfactory-loader": "~8.2.6",
    "express": "~4.17.1",
    "faker": "^4.1.0",
    "ngx-jsonapi": "github:nabthat/ngx-resource-client",
    "rxjs": "~6.5.3",
    "tslib": "~1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.0-rc.6",
    "@angular/cli": "~9.0.0-rc.6",
    "@angular/compiler-cli": "~9.0.0-rc.6",
    "@angular/language-service": "~9.0.0-rc.6",
    "@types/express": "~4.17.0",
    "@types/jasmine": "~3.3.16",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~12.6.8",
    "@types/webpack-env": "~1.14.0",
    "codelyzer": "~5.1.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "~1.4.2",
    "protractor": "~5.4.2",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.6.4",
    "udk": "~1.1.9-rc.1"
  }
}

angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1, 
  "newProjectRoot": "projects",
  "defaultProject": "app",  
  "projects": {
    "app": {
      "root": "",
      "projectType": "application",
      "sourceRoot": "src",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "udk:udk-builder",
          "options": {
            "browserTarget": "app:browser",
            "serverTarget": "app:server"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:browser:production",
              "serverTarget": "app:server:production"
            },
            "spa": {
              "browserTarget": "app:browser",
              "serverTarget": "app:server:spa"
            }
          }
        },
        "browser": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/app/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "aot": true,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/app/server",
            "main": "src/server.ts",
            "bundleDependencies": false,
            "tsConfig": "tsconfig.server.json",
            "sourceMap": {
              "scripts": true,
              "styles": false
            }
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "media"
            },
            "spa": {
              "fileReplacements": [
                {
                  "replace": "src/app/app-routes.ts",
                  "with": "src/app/app-routes.spa.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "udk:udk-runner",
          "options": {
            "universalTarget": "app:build"
          },
          "configurations": {
            "spa": {
              "universalTarget": "app:build:spa"
            }
          }
        },
        "serve-spa": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:browser"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:browser:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:browser"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve-spa"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app:serve-spa:production"
            }
          }
        }
      }
    }
  }
}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NotFoundComponent } from './not-found.component';
import { NgxJsonapiModule } from 'ngx-jsonapi';

@NgModule({
  declarations: [
    AppComponent,
    NotFoundComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-app' }),
    AppRoutingModule,
    NgxJsonapiModule.forRoot({
      url: '',
      cache_prerequests: false,
      cachestore_support: false,
    }),
  ],
  providers: [],
  bootstrap: [ AppComponent ],
})
export class AppModule { }

when I do: npm run build:prod everything compiles properly:

deploy@1bae0f427621:~/ng-app$ npm run build:prod

> angular-universal@0.0.0 build:prod /home/deploy/ng-app
> ng build -c production

Name: browser
chunk {} runtime-es2015.5f6dd8da40f932c20ffe.js (runtime) 4.22 kB [entry] [rendered]
chunk {1} main-es2015.6aa7dd1c7240c6a43ce4.js (main) 1.89 MB [initial] [rendered]
chunk {2} polyfills-es2015.58725a5910daef768ca8.js (polyfills) 63.8 kB [initial] [rendered]
chunk {3} polyfills-es5.ee78b1e5f492a9387003.js (polyfills-es5) 227 kB [initial] [rendered]
chunk {4} styles.0e4338761429b4eb16ac.css (styles) 0 bytes [initial] [rendered]
chunk {5} 5-es2015.ca51a48ac6c6ce71b603.js () 29 kB  [rendered]
Date: 2020-03-26T13:47:23.994Z - Hash: 1db05bed0b94ce01b7c9 - Time: 39286ms

Name: server
chunk {main} main.js, main.js.map (main) 3.95 MB [entry] [rendered]
Date: 2020-03-26T13:47:24.003Z - Hash: 4f4760b37105fb1570bf - Time: 6282ms

but when I start it: node dist/app/server/main.js i got:

Server listening -- http://localhost:4000
TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (/home/deploy/ng-app/dist/app/server/main.js:80233:27)
    at imports.forEach.i (/home/deploy/ng-app/dist/app/server/main.js:80251:14)
    at Array.forEach (<anonymous>)
    at registerNgModuleType (/home/deploy/ng-app/dist/app/server/main.js:80247:17)
    at imports.forEach.i (/home/deploy/ng-app/dist/app/server/main.js:80251:14)
    at Array.forEach (<anonymous>)
    at registerNgModuleType (/home/deploy/ng-app/dist/app/server/main.js:80247:17)
    at new NgModuleFactory$1 (/home/deploy/ng-app/dist/app/server/main.js:80399:13)
    at Compiler_compileModuleSync__POST_R3__ (/home/deploy/ng-app/dist/app/server/main.js:84188:12)
    at Compiler_compileModuleAsync__POST_R3__ [as compileModuleAsync] (/home/deploy/ng-app/dist/app/server/main.js:84201:28)
karwank commented 4 years ago

My /home/deploy/ng-app/dist/app/server/main.js:80232-80234 file contains:

function registerNgModuleType(ngModuleType) {
    if (ngModuleType.ɵmod.id !== null) {
        /** @type {?} */
        const id = ngModuleType.ɵmod.id;
        /** @type {?} */
        const existing = (/** @type {?} */ (modules.get(id)));
        assertSameOrNotExisting(id, existing, ngModuleType);
        modules.set(id, ngModuleType);
    }
    /** @type {?} */
    let imports = ngModuleType.ɵmod.imports;
    if (imports instanceof Function) {
        imports = imports();
    }
    if (imports) {
        imports.forEach((/**
         * @param {?} i
         * @return {?}
         */
        i => registerNgModuleType((/** @type {?} */ (i)))));
    }
}

This is of course part of @angular/cli package. I've added console.log(ngModuleType) to see what exactly is being registered there. This is my output:

{ [Function: AppServerModule]
  'ɵmod':
   { type: [Circular],
     bootstrap: [ [Function] ],
     declarations: [],
     imports:
      [ [Function], [Function], [Function], [Function], [Function] ],
     exports: [],
     transitiveCompileScopes: null,
     schemas: null,
     id: null },
  'ɵinj':
   { factory: [Function: AppServerModule_Factory],
     providers: [],
     imports: [ [Array] ] },
  decorators: [ { type: [Function], args: [Array] } ] }
{ [Function: AppModule]
  'ɵmod':
   { type: [Circular],
     bootstrap: [ [Function] ],
     declarations: [ [Function], [Function], [Function] ],
     imports:
      [ [Function], [Function], [Function], [Function], [Function] ],
     exports: [],
     transitiveCompileScopes: null,
     schemas: null,
     id: null },
  'ɵinj':
   { factory: [Function: AppModule_Factory],
     providers:
      [ [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Function],
        [Object] ],
     imports: [ [Array] ] },
  decorators: [ { type: [Function], args: [Array] } ],
  ctorParameters: [Function] }
{ [Function: RouterModule]
  'ɵmod':
   { type: [Circular],
     bootstrap: [],
     declarations:
      [ [Function], [Function], [Function], [Function], [Function] ],
     imports: [],
     exports:
      [ [Function], [Function], [Function], [Function], [Function] ],
     transitiveCompileScopes: null,
     schemas: null,
     id: null },
  'ɵinj':
   { factory: [Function: RouterModule_Factory],
     providers: [],
     imports: [] },
  ctorParameters: [Function],
  decorators: [ { type: [Function], args: [Array] } ] }
{ [Function: BrowserModule]
  'ɵmod':
   { type: [Circular],
     bootstrap: [],
     declarations: [],
     imports: [],
     exports: [Function: exports],
     transitiveCompileScopes: null,
     schemas: null,
     id: null },
  'ɵinj':
   { factory: [Function: BrowserModule_Factory],
     providers:
      [ [],
        [Object],
        [Object],
        [Object],
        [Object],
        [],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [] ],
     imports: [ [Function], [Function] ] },
  ctorParameters: [Function],
  decorators: [ { type: [Function], args: [Array] } ] }
{ [Function: HttpClientModule]
  'ɵmod':
   { type: [Circular],
     bootstrap: [],
     declarations: [],
     imports: [ [Function] ],
     exports: [],
     transitiveCompileScopes: null,
     schemas: null,
     id: null },
  'ɵinj':
   { factory: [Function: HttpClientModule_Factory],
     providers:
      [ [Function], [Object], [Function], [Object], [Function], [Object] ],
     imports: [ [Array] ] },
  decorators: [ { type: [Function], args: [Array] } ] }
{ [Function: HttpClientXsrfModule]
  'ɵmod':
   { type: [Circular],
     bootstrap: [],
     declarations: [],
     imports: [],
     exports: [],
     transitiveCompileScopes: null,
     schemas: null,
     id: null },
  'ɵinj':
   { factory: [Function: HttpClientXsrfModule_Factory],
     providers: [ [Function], [Object], [Object], [Object], [Object] ],
     imports: [] },
  decorators: [ { type: [Function], args: [Array] } ] }
{ [Function: NgxJsonapiModule]
  forRoot: [Function],
  decorators: [ { type: [Function], args: [Array] } ],
  ctorParameters: [Function] }
TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (/home/deploy/ng-app/dist/app/server/main.js:80300:27)
    at imports.forEach.i (/home/deploy/ng-app/dist/app/server/main.js:80318:14)
    at Array.forEach (<anonymous>)
    at registerNgModuleType (/home/deploy/ng-app/dist/app/server/main.js:80314:17)
    at imports.forEach.i (/home/deploy/ng-app/dist/app/server/main.js:80318:14)
    at Array.forEach (<anonymous>)
    at registerNgModuleType (/home/deploy/ng-app/dist/app/server/main.js:80314:17)
    at new NgModuleFactory$1 (/home/deploy/ng-app/dist/app/server/main.js:80458:13)
    at Compiler_compileModuleSync__POST_R3__ (/home/deploy/ng-app/dist/app/server/main.js:84374:12)
    at Compiler_compileModuleAsync__POST_R3__ [as compileModuleAsync] (/home/deploy/ng-app/dist/app/server/main.js:84387:28)

As I understand for some reason ngx-jsonapi hasn't been compiled properly or in other words properly prepared to work with Ivy compiler. All registered modules, except ngx-jsonapi module, have those 'ɵmod' and 'ɵinj' keys. Is it possible that your module is just not prepared to work with higher version of Angular?