[BUG] Error when Component Metadata was imported.

[minhoryang]

Overview of the issue

RangeError: Invalid array length

@Component(MyAgClickableParentComponentSchema)
export class AppUserDeleteClickableComponent extends MyAgClickableParentComponent {}

export const MyAgClickableParentComponentSchema = {
    template: `
        <button (click)="clicked()">{{ name }}</button>
    `,
};

Operating System, Node.js, npm, compodoc version(s)

Node.js v6.9.1
npm 4.0.2
compodoc 0.0.37

Angular configuration, a package.json file in the root folder

https://gist.github.com/minhoryang/942c6c8bd4e0507e296d417c80dda00f

Compodoc installed globally or locally ?

locally

npm install compodoc

Motivation for or Use Case

./node_modules/.bin/compodoc -p src/tsconfig.json

Reproduce the error

https://gist.github.com/minhoryang/942c6c8bd4e0507e296d417c80dda00f
includes

• compodoc.log
• related .ts files when RangeError: Invalid array length happened

Related issues

#11

Suggest a Fix

[vogloblinsky]

Ok reproduced.

The MyAgClickableParentComponentSchema break the parsing. Will try to resolve that asap.

[AilisObrian]

compodoc/src/app/compiler/dependencies.ts

Line 1184 in aee4a24

var properties = decorator.expression.arguments[0].properties;

Normally decorator.expression.arguments[0] was an instance of NodeObject, but in this case IdentifierObject.

[AilisObrian]

It called by

compodoc/src/app/compiler/dependencies.ts

Line 1266 in aee4a24

directiveInfo = this.visitDirectiveDecorator(classDeclaration.decorators[i]);

directiveInfo = this.visitDirectiveDecorator(classDeclaration.decorators[i]);

But I couldn't find the usage of directiveInfo.
Is there any hint of this?

[AilisObrian]

Is it possible to get the not-yet parsed variable (MyAgClickableParentComponentSchema) from this.visitDirectiveDecorator()?

[vogloblinsky]

@AilisObrian not yet done the test, may be.

[shaharkazaz]

I also get the same error when running compodoc

[chat-du-cheshire]

Hi, this also happens when you try to extend your decorator with spread (...) operator.

For example:

base.ts

import { trigger, state, transition, animate, style } from "@angular/animations";

export const DECORATIONS_BASE = {
     styles:[':host{position:static;display:block;height: auto; width: auto;}'],
     animations: [
        trigger('shownChanged', [
        state("SHOWN_STATE", style({ opacity: 1 })), 
        state("HIDDEN_STATE", style({ opacity: 0 })),
        transition('* => *', animate('.2s'))
        ])
    ]
};

comp.component.ts

import { Component, OnInit } from '@angular/core';
import {DECORATIONS_BASE} from './base';


@Component({
  selector: 'my-comp',
  templateUrl: './comp.component.html',
  styleUrls: [ './comp.component.css' ],
  ...DECORATIONS_BASE
})
// export class YourComponentClassName

Hope it's possible to fix.

Thank you!