Angular elements disabled with v1.9.0

General Information

• Usage
• Development
• Documentation
• Feature Request

Specific generator

• Addons
• HandlebarsJS

What Version you are running?

• NodeJS: 10.16.3
• NPM: 6.5.0
• @pnp/spfx: 1.9.0
• Angular CLI : 8.3.2

Using the 1.9.0 version of the generator, the Angular elements option is disabled.

Steps to repro:

Install the latest generator and the Angular CLI

npm install -g @pnp/generator-spfx @angular/cli

Looks like when installing the generator in a fresh machine, the Angular elements option is disabled.

The reason behind this is that the latest Angular CLI downloaded version is 8.3.2. The generator only checks if the version 6 or 7 is installed. Need to add additional check for version 8.

Followed the instructions from here.

Temporary workaround while using generator 1.9 is to use Angular CLI v6 or v7 as below:

npm install -g @pnp/generator-spfx @angular/cli@6.2.9

or

npm install -g @pnp/generator-spfx @angular/cli@7.3.9

[gautamdsheth]

Hey @StfBauer , great stuff. Tested it today, works perfectly fine. Thanks a lot !

[gautamdsheth]

ok sorry again 😦 . Please ignore the above comment.

I found the culprit for this issue in NG8. I had disabled the checks in the generator and created a fresh project in SPFx

Turns out when we have NG8 project created using the latest Angular CLI (v8), the tsconfig.json has the ECMA script target version is set to es2015. Once i change it to es5, everything works perfectly.

So, the only change required is now in the Angular project’s tsconfig.json file.

By default, it is generated as :

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

we need to change it to :

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

To test it, simply create a new Angular elements projects with Angular CLI v8. Try to execute gulp serve or any SPFx gulp commands, they will error out. Now, modify the tsconfig.json file as mentioned above. Execute the gulp commands or npm bundle commands, it will work smoothly.