IVY+Angular elements

🐞 bug report

Description

Building Angular elements in angular 9 with shared libraries approach(multiple angular elements on same page, so pre-loading), results in the below runtime error.

🔥 Exception or Error

scripts.90116728e913cf95ae8b.js:10415 Uncaught NullInjectorError: StaticInjectorError(Platform: core)[CompilerFactory]:
  NullInjectorError: No provider for CompilerFactory!

🌍 Your Environment

Angular Version: angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular9-new": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": { "path": "./extra-webpack.config.js",
              "mergeStrategies": { "externals": "replace" } },
            "outputPath": "dist/angular9-new",
            "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": [
              {
                "bundleName": "polyfill-webcomp-es5",
                "input": "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
              },
              {
                "bundleName": "polyfill-webcomp",
                "input": "node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js"
              },
              "node_modules/rxjs/bundles/rxjs.umd.js",
              "node_modules/@angular/core/bundles/core.umd.js",
              "node_modules/@angular/common/bundles/common.umd.js",
              "node_modules/@angular/common/bundles/common-http.umd.js",
              "node_modules/@angular/compiler/bundles/compiler.umd.js",
              "node_modules/@angular/animations/bundles/animations.umd.js",
              "node_modules/@angular/animations/bundles/animations-browser.umd.js",
              "node_modules/@angular/platform-browser/bundles/platform-browser.umd.js",
              "node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
              "node_modules/@angular/elements/bundles/elements.umd.js",
              "node_modules/@angular/router/bundles/router.umd.js",
              "node_modules/@angular/cdk/bundles/cdk.umd.js",
              "node_modules/@angular/forms/bundles/forms.umd.js"
            ]          },
          "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,
              "buildOptimizer": true,
              "budgets": [
              ]
            }
          }
        }
      }
    }
  },
  "defaultProject": "angular9-new",
  "cli": {
    "analytics": false
  }
}

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule, Injector, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {AppComponent} from './app.component';
import {createCustomElement} from '@angular/elements';
import { HttpClientModule} from '@angular/common/http';
import {CommonModule} from '@angular/common';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        CommonModule,
    ],
    entryComponents: [AppComponent],
    schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
    constructor(private injector: Injector) {
    }

    ngDoBootstrap() {
        if (!customElements.get(`my-app`)) {
            const customElement = createCustomElement(AppComponent, {injector: this.injector});
            customElements.define(`my-app`, customElement);
        }
    }
}

extra-webpack.config.json

module.exports = {
    output: {
        jsonpFunction: 'webpackJsonpViewMemo'
    },
    "externals": {
        "rxjs": "rxjs",
        "rxjs/operators": "rxjs.operators",
        "@angular/core": "ng.core",
        "@angular/common": "ng.common",
        "@angular/common/http": "ng.common.http",
        "@angular/compiler": "ng.compiler",
        "@angular/platform-browser": "ng.platformBrowser",
        "@angular/platform-browser-dynamic": "ng.platformBrowserDynamic",
        "@angular/elements": "ng.elements",
        "@angular/router": "ng.router",
        "@angular/forms": "ng.forms",
        "@angular/cdk": "ng.cdk",
        "@angular/animations": "ng.animations",
        "@angular/animations/browser": "ng.animations.browser"
    }
};

package.json

 "dependencies": {
    "@angular/animations": "~9.0.6",
    "@angular/common": "~9.0.6",
    "@angular/compiler": "~9.0.6",
    "@angular/core": "~9.0.6",
    "@angular/elements": "^9.0.6",
    "@angular/forms": "~9.0.6",
    "@angular/platform-browser": "~9.0.6",
    "@angular/platform-browser-dynamic": "~9.0.6",
    "@angular/router": "~9.0.6",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^9.0.0",
    "@angular-devkit/build-angular": "~0.900.6",
    "@angular/cli": "^7.2.2",
    "@angular/compiler-cli": "~9.0.6",
    "@angular/language-service": "~9.0.6",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.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",
    "ngx-build-plus": "^9.0.6",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  }

[flash-me]

@crisz To accomplish what? He is already using the CLI to create his angular element. But since he compiles with ivy enabled he also needs to include the ivy compiled versions of the angular packages.

When ngcc is run with --create-entry-points, the ivy compiler will place those ivy compiled packages into a subfolder __ivy_ngcc__. Either he includes those or tell the ngcc to compile the original UMD bundles and leave the imports as they are.

cheers flash ⚡

[shashankanugu]

running npm install with --unsafe-perm will solve you’re issue “npm install --unsafe-perm”. Make sure to run post install also “postinstall”: “ngcc --properties main es2015”