Skip to content

Fuel-us doesn't work if it's loaded from another directory #107

@vargalas

Description

@vargalas

Hi,

I'm using Gulp (just migrated from ng-cli) to build our angular2 project where I use Fuel-ui.

We have a strange error. We use Fuel-ui's alert component in one of our components. If I reference fuel-ui from
node_modules/fuel-ui folder in system.config.js everything is fine. If I reference it from build/vendor/fuel-ui, it fails with the following error:

EXCEPTION: Unexpected directive value 'undefined' on the View of component 'MyAlertComponent'
platform-browser.umd.js:1900 EXCEPTION: Unexpected directive value 'undefined' on the View of component 'MyAlertComponent'BrowserDomAdapter.logError @ platform-browser.umd.js:1900
platform-browser.umd.js:1900 STACKTRACE:BrowserDomAdapter.logError @ platform-browser.umd.js:1900
platform-browser.umd.js:1900 Error: Unexpected directive value 'undefined' on the View of component 'MyAlertComponent'
    at new BaseException$1 (http://127.0.0.1:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:971:27)
    at CompileMetadataResolver.getViewDirectivesMetadata (http://127.0.0.1:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:12539:27)
    at RuntimeCompiler._getCompiledTemplate (http://127.0.0.1:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14619:40)
    at RuntimeCompiler._getTransitiveCompiledTemplates (http://127.0.0.1:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14637:84)
    at eval (http://127.0.0.1:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14640:81)
    at Array.forEach (native)
    at RuntimeCompiler._getTransitiveCompiledTemplates (http://127.0.0.1:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14640:45)
    at eval (http://127.0.0.1:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14640:81)
    at Array.forEach (native)
    at RuntimeCompiler._getTransitiveCompiledTemplates (http://127.0.0.1:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14640:45)BrowserDomAdapter.logError @ platform-browser.umd.js:1900
zone.min.js:1 Error: Error: Unexpected directive value 'undefined' on the View of component 'MyAlertComponent'(…)e.invoke @ zone.min.js:1

Relevant part of systemjs.config.js:

works, no error:

    var map = {
        ...

    "fuel-ui":                     "node_modules/fuel-ui/bundles",
    ...
        };

doesn't work, gives exception:

    var map = {
        ...

    "fuel-ui":                     "build/vendor/fuel-ui/bundles",
    ...
        };

Relevant part of the component:

import {Component, Input,ElementRef} from '@angular/core';
import {Alert} from 'fuel-ui/fuel-ui';

@Component({
  host: {
    '(document:click)': 'onClick($event)',
  },
  selector: 'my-alert',
  templateUrl: './app/components/shared/my-alert.component.html',
  directives: [ Alert ]  
})
export class MyAlertComponent {

A part of package.json:

    "fuel-ui": "0.3.9",
    "jquery": "2.1.3",
    "ng2-bootstrap": "1.0.24",
    "node-sass": "^3.7.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "ts-node": "^0.5.5",
    "tslint": "^3.6.0",
    "typescript": "^1.8.10",
    "typings": "^1.3.2",

The files are identical in both locations. The fuel-ui.js is loaded in both cases. No 404 errors anywhere. The load order of the loaded js files is the same in both cases.

Still the first config works, the second doesn't.
I tried to do the same with all the other referenced packages in system.config.js, everything works with any location I want to use, except fuel-ui.

Do you have any ideas what went wrong here?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions