tec-goblin
tec-goblin

Reputation: 316

Angular 2 module (Fuel-ui) doesn't work if it's loaded from another directory

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

I have a strange error. I use Fuel-ui's alert component in one of our components. If we 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'

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",
"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?

Upvotes: 3

Views: 279

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

I think this may help a bit.Try the following link Github - https://github.com/angular/angular/issues/7526 There maybe a problem if the child component is declared same on the parent component. Make sure your child component is declared before the parent component.

Upvotes: 1

Related Questions