ng add @angular/bazel fails due to CDK

[jonr-elsewhen]

Reproduction

Steps to reproduce:

1. ng new cdk-and-bazel-are-broken
2. cd cdk-and-bazel-are-broken
3. npm i @angular/cdk --save
4. ng add @angular/bazel

Expected Behavior

It should work.

Actual Behavior

> ngc -p ./angular-metadata.tsconfig.json

node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(4,10): error TS1003: Identifier expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(4,11): error TS1110: Type expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(4,30): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(4,41): error TS1128: Declaration or statement expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(4,48): error TS1005: ';' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(7,19): error TS1139: Type parameter declaration expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(7,30): error TS1005: '>' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(7,37): error TS1005: '=>' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(7,38): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(8,34): error TS1139: Type parameter declaration expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(8,45): error TS1005: ',' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(8,53): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(8,64): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(12,24): error TS1110: Type expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(12,43): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(21,40): error TS1110: Type expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts(21,59): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,19): error TS1005: ',' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,20): error TS1110: Type expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,22): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,48): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,49): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,50): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,70): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,72): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,73): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,74): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,76): error TS1110: Type expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,78): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,114): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,115): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,116): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,142): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,144): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,145): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,146): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,148): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(1,155): error TS1005: ';' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(5,31): error TS1136: Property assignment expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(5,32): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(5,33): error TS1146: Declaration expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(5,34): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(5,55): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(5,56): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(6,11): error TS1005: ';' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(8,6): error TS1110: Type expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(8,8): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(8,17): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(8,18): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(9,14): error TS1005: ';' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(9,59): error TS1110: Type expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(9,61): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(9,81): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(9,82): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(10,9): error TS1005: ';' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(12,7): error TS1110: Type expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(12,9): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(12,18): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(12,19): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(13,12): error TS1005: ';' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(13,67): error TS1110: Type expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(13,69): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(13,71): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(13,72): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(13,74): error TS1110: Type expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(13,76): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(13,102): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(13,103): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(14,16): error TS1005: ';' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(14,36): error TS1003: Identifier expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(14,37): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(14,59): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(14,60): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(14,62): error TS1110: Type expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(14,64): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(14,103): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(14,104): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(15,18): error TS1005: ';' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(15,44): error TS1003: Identifier expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(15,45): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(15,65): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(15,66): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(15,68): error TS1110: Type expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(15,70): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(15,72): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(15,73): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(16,1): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(16,2): error TS1128: Declaration or statement expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(17,15): error TS1139: Type parameter declaration expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(17,26): error TS1005: '>' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(17,34): error TS1109: Expression expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(17,45): error TS1005: ';' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(33,13): error TS1005: ',' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(33,36): error TS1005: '(' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(33,38): error TS1005: ',' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(34,14): error TS1005: ',' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(34,52): error TS1005: ',' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(34,54): error TS1005: ';' expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(36,7): error TS1128: Declaration or statement expected.
node_modules/@angular/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts(43,1): error TS1128: Declaration or statement expected.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cdk-and-bazel-are-broken@0.0.0 postinstall: `ngc -p ./angular-metadata.tsconfig.json`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the cdk-and-bazel-are-broken@0.0.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Environment

• Angular: 8
• CDK/Material: 8
• Browser(s): N/A
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[alexeagle]

We run ngc on the packages in node_modules as a post-install step. Sadly ngc itself doesn't know to skip these files.
You'll have to add an excludes to the angular-metadata.tsconfig.json to skip these files.
Note that with Ivy, we no longer need to run ngc on the node_modules since Ivy includes a different compatibility compiler ngcc, and that doesn't suffer from this problem.

[jelbourn]

I sent angular/angular#30825 to add our schematics to the default list of excludes

[devversion]

Long-term we should change to the .template suffix so that these files using template syntax are not treated as valid TypeScript files.