standalone platformBrowserDynamic().bootstrapModule(BootstrapModule) has been worked in v6.1.7 and previous versions but not in v6.1.8+

I’m submitting a…

[X] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

• Create an angular-cli project and generate a library.
• In this library, create a module and a component which is bootstrapped by the module.
• Export the module in public_api.ts.
• Compile the library with ng build bootstrap-lib
• Create a static project with only index.html and main.ts file + webpack and bootstrap-lib in dependencies of package.json
• In index.html add the selector of the component and the link to the main.js file in a script tag - In main.ts include zone.js and do the bootstrap of your module with platformBrowserDynamic().bootstrapModule(BootstrapModule)
• Compile main.ts file with webpack and launch index.html in your browser
• Content of the component have to be displayed in the browser but we have this error:

main.js:47479 Uncaught Error: Can't resolve all parameters for ApplicationModule: (?).
    at syntaxError (main.js:47479)
    at CompileMetadataResolver._getDependenciesMetadata (main.js:57380)
    at CompileMetadataResolver._getTypeMetadata (main.js:57273)
    at CompileMetadataResolver.getNgModuleMetadata (main.js:57141)
    at CompileMetadataResolver.getNgModuleSummary (main.js:56951)
    at main.js:57065
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (main.js:57053)
    at CompileMetadataResolver.getNgModuleSummary (main.js:56951)
    at main.js:57065
syntaxError @ main.js:47479
CompileMetadataResolver._getDependenciesMetadata @ main.js:57380
CompileMetadataResolver._getTypeMetadata @ main.js:57273
CompileMetadataResolver.getNgModuleMetadata @ main.js:57141
CompileMetadataResolver.getNgModuleSummary @ main.js:56951
(anonymous) @ main.js:57065
CompileMetadataResolver.getNgModuleMetadata @ main.js:57053
CompileMetadataResolver.getNgModuleSummary @ main.js:56951
(anonymous) @ main.js:57065
CompileMetadataResolver.getNgModuleMetadata @ main.js:57053
CompileMetadataResolver.getNgModuleSummary @ main.js:56951
(anonymous) @ main.js:57038
CompileMetadataResolver.getNgModuleMetadata @ main.js:57016
JitCompiler._loadModules @ main.js:70334
JitCompiler._compileModuleAndComponents @ main.js:70315
JitCompiler.compileModuleAsync @ main.js:70275
CompilerImpl.compileModuleAsync @ main.js:45872
PlatformRef.bootstrapModule @ main.js:4875
(anonymous) @ main.js:140
__webpack_require__ @ main.js:20
(anonymous) @ main.js:84
(anonymous) @ main.js:87

Expected behavior

In v6.1.7 version and all previous, this use case worked fine but in v6.1.8+ error occurs. We would like to have this use case working again.

Minimal reproduction of the problem with instructions

1- Create an angular-cli project

$ ng new empty

/path/to/empty/package.json

{
  "name": "empty",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "6.1.9",
    "@angular/common": "6.1.9",
    "@angular/compiler": "6.1.9",
    "@angular/core": "6.1.9",
    "@angular/forms": "6.1.9",
    "@angular/http": "6.1.9",
    "@angular/platform-browser": "6.1.9",
    "@angular/platform-browser-dynamic": "6.1.9",
    "@angular/router": "6.1.9",
    "core-js": "^2.5.4",
    "rxjs": "~6.2.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.3",
    "@angular-devkit/build-ng-packagr": "~0.8.3",
    "@angular/cli": "~6.2.3",
    "@angular/compiler-cli": "6.1.9",
    "@angular/language-service": "6.1.9",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ng-packagr": "^4.1.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tsickle": ">=0.29.0",
    "tslib": "^1.9.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  }
}

2- Delete src folder and generate a new library

$ rm -rf src
$ ng g library bootstrap

/path/to/empty/angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "bootstrap": {
      "root": "projects/bootstrap",
      "sourceRoot": "projects/bootstrap/src",
      "projectType": "library",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/bootstrap/tsconfig.lib.json",
            "project": "projects/bootstrap/ng-package.json"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/bootstrap/src/test.ts",
            "tsConfig": "projects/bootstrap/tsconfig.spec.json",
            "karmaConfig": "projects/bootstrap/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/bootstrap/tsconfig.lib.json",
              "projects/bootstrap/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "bootstrap"
}

/path/to/empty/tsconfig.json

{
  "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": [
      "es2017",
      "dom"
    ],
    "paths": {
      "bootstrap": [
        "dist/bootstrap"
      ],
      "bootstrap/*": [
        "dist/bootstrap/*"
      ]
    }
  }
}

3- List of all files into bootstrap library project

/path/to/empty/projects/bootstrap/ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/bootstrap",
  "lib": {
    "entryFile": "src/public_api.ts"
  },
  "whitelistedNonPeerDependencies": [
    "@angular/animations",
    "@angular/common",
    "@angular/core",
    "@angular/compiler",
    "@angular/platform-browser",
    "@angular/platform-browser-dynamic",
    "core-js",
    "rxjs",
    "zone.js"
  ]
}

/path/to/empty/projects/bootstrap/package.json

{
  "name": "bootstrap",
  "version": "0.0.1",
  "dependencies": {
    "@angular/animations": "6.1.9",
    "@angular/common": "6.1.9",
    "@angular/core": "6.1.9",
    "@angular/compiler": "6.1.9",
    "@angular/platform-browser": "6.1.9",
    "@angular/platform-browser-dynamic": "6.1.9",
    "core-js": "^2.5.7",
    "rxjs": "~6.2.0",
    "zone.js": "^0.8.26"
  }
}

/path/to/empty/projects/bootstrap/tsconfig.lib.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true,
    "sourceMap": true,
    "inlineSources": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "types": [],
    "lib": [
      "dom",
      "es2015"
    ]
  },
  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableResourceInlining": true
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

/path/to/empty/projects/bootstrap/tslint.json

{
    "extends": "../../tslint.json",
    "rules": {
        "directive-selector": [
            true,
            "attribute",
            "lib",
            "camelCase"
        ],
        "component-selector": [
            true,
            "element",
            "lib",
            "kebab-case"
        ]
    }
}

/path/to/empty/projects/bootstrap/src/public_api.ts

/*
 * Public API Surface of bootstrap
 */

export * from './lib/bootstrap.module';

/path/to/empty/projects/bootstrap/src/lib/bootstrap.component.ts

import { Component } from '@angular/core';
import { BootstrapService } from './bootstrap.service';

@Component({
  selector: 'lib-boot-component',
  template: '<h1>BOOT</h1>'
})
export class BootstrapComponent {
  constructor(private _service: BootstrapService) {
  }
}

/path/to/empty/projects/bootstrap/src/lib/bootstrap.module.ts

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BootstrapComponent } from './bootstrap.component';

@NgModule({
  imports: [
    BrowserAnimationsModule
  ],
  declarations: [ BootstrapComponent ],
  bootstrap: [ BootstrapComponent ]
})
export class BootstrapModule {
}

/path/to/empty/projects/bootstrap/src/lib/bootstrap.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class BootstrapService {

  constructor() { }
}

4- Build your library

$ ng build bootstrap

5- Get the path of the dist folder of your library

$ cd dist/bootstrap
$ pwd

/path/to/empty/dist/bootstrap

6- Create a static project outside of angular-cli project

$ mkdir /path/to/static

7- List of all files into static project

/path/to/static/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>Standalone Bootstrap</title>
</head>
<body>
<div>
    <lib-boot-component></lib-boot-component>
</div>
<script src="./main.js" type="text/javascript"></script>
</body>
</html>

/path/to/static/main.ts

import 'zone.js/dist/zone';
import { BootstrapModule } from 'bootstrap';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic()
    .bootstrapModule(BootstrapModule)
    .then(_ => console.log('BOOTSTRAP DONE WITH SUCCESS'))
    .catch(err => console.error(err));

/path/to/static/package.json

{
  "name": "WC",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "webpack": "webpack",
    "server": "http-server -p 8000"
  },
  "dependencies": {
    "bootstrap": "file:/path/to/empty/dist/bootstrap"
  },
  "devDependencies": {
    "http-server": "^0.11.1",
    "ts-loader": "^5.2.1",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1"
  }
}

/path/to/static/tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "",
        "target": "es2015",
        "module": "es2015",
        "moduleResolution": "node",
        "outDir": "",
        "rootDir": ".",
        "declaration": false,
        "sourceMap": true,
        "inlineSources": true,
        "skipLibCheck": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "typeRoots": ["./node_modules/@types"],
        "types": [
            "node"
        ],
        "lib": [
            "dom",
            "es2015"
        ]
    },
    "compileOnSave": false,
    "buildOnSave": false
}

/path/to/static/webpack.config.js

var path = require('path');

module.exports = {
    entry: {  main: './main.ts' },
    resolve: { extensions: ['.ts', '.js'] },
    target: 'web',
    // this makes sure we include node_modules and other 3rd party libraries
    externals: [/(node_modules)/],
    output: {
        path: path.join(__dirname),
        filename: '[name].js'
    },
    module: {
        rules: [
            { test: /\.ts$/, loader: 'ts-loader' }
        ]
    },
    stats: {
        warnings: false
    },
    mode: 'none'
};

8- Install dependencies

$ yarn install

9- Build main.ts file

$ yarn run webpack

main.js file will be generated to be used into index.html file

10- Run http-server

$ yarn run server

11- Display content in your browser

Go to http://localhost:8000 and you will see the error in the console.

IF YOU DOWNGRADE ANGULAR VERSION IN YOUR LIBRARY TO V6.1.7 IN EACH package.json FILES AND RETRY ALL THIS PROCESS, YOU WILL SEE IN THE BROWSER THE CONTENT OF YOUR COMPONENT WITHOUT AN ERROR AND THE LOG IN THE CONSOLE

What is the motivation / use case for changing the behavior?

I must have this feature working again because I’m using it in my library for angular-elements bootstrapping and now it doesn’t work anymore.

I’ve some projects in production with @angular/element and all was broken when we’ve updated to latest angular version and I had to fix the version to v6.1.7 to have a good result.

It’s very critical for me and all person who downloaded my library.

You can find the usage of platformBrowserDynamic().bootstrapModule(ElementsLoaderModule) here

Environment

Angular CLI: 6.2.3
Node: 10.11.0
OS: darwin x64
Angular: 6.1.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.8.3
@angular-devkit/build-angular      0.8.3
@angular-devkit/build-ng-packagr   0.8.3
@angular-devkit/build-optimizer    0.8.3
@angular-devkit/build-webpack      0.8.3
@angular-devkit/core               0.8.3
@angular-devkit/schematics         0.8.3
@angular/cli                       6.2.3
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.2.3
@schematics/angular                0.8.3
@schematics/update                 0.8.3
ng-packagr                         4.2.0
rxjs                               6.2.2
typescript                         2.9.2
webpack                            4.20.2

[IgorMinar]

I’ve looked into this this morning, and realized that this issue has multiple aspects:

1. we accidentally made a breaking change in the patch branch by no longer removing __medatadata calls from our npm bundles (due to https://github.com/angular/angular/pull/25774/files#diff-ed9fce44833277eb7097984d41b2c3a0L26, https://github.com/angular/angular/pull/25774/files#diff-ad2da82e16f16d09cb441e89f932ad8cL129). This change was not intentional and will be reverted.

2. I noticed that in the past under certain circumstances you were able to use the JIT compiler without the Reflect.metadata polyfill. But with a recent change mentioned above on the master branch, we now require you to load it before anything from @angular/core is imported. This will be done automatically by cli v7 so the change will be transparent to most users, unless you have a custom polyfill setup in which case you need to ensure that the polyfill is loaded before Angular.

We actually observed the same problem on angular.io when running our unit tests (which use JIT). The temporary fix there was to move around the polyfill that we include there in test.ts:

diff --git a/aio/src/test.ts b/aio/src/test.ts
index 09b54c7389..907fe02d71 100644
--- a/aio/src/test.ts
+++ b/aio/src/test.ts
@@ -1,6 +1,11 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files

 import 'zone.js/dist/zone-testing';
+
+// Reflect.metadata polyfill is only needed in the JIT mode which we use only for unit tests
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+
 import { getTestBed } from '@angular/core/testing';
 import {
     BrowserDynamicTestingModule,
@@ -9,10 +14,6 @@ import {

 declare const require: any;

-// Reflect.metadata polyfill is only needed in the JIT mode which we use only for unit tests
-import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,

In cli v7 it will no longer be necessary to manually import the polyfill when you use JIT mode. The cli will do it for you. In the meantime, the above should be a sufficient workaround.

[uparlange]

I had the same problem and everything is fine now with 7.2.0.

To correct this issue

1/ Add “reflect-metadata”: “0.1.12” in your package.json.

2/ Add the script in your main html page “<script src="node_modules/reflect-metadata/Reflect.js"></script>”

–> You can check the order of the scripts on my webapp (F12 in Chrome in “Elements Tab”) https://msdb.lapli.fr/#/home