Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

it doesn't work with Ivy compiler #266

Open
karwank opened this issue Mar 26, 2020 · 1 comment
Open

it doesn't work with Ivy compiler #266

karwank opened this issue Mar 26, 2020 · 1 comment

Comments

@karwank
Copy link

karwank commented Mar 26, 2020

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

> [email protected] 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
Copy link
Author

karwank commented Mar 27, 2020

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant