Reputation: 316
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
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