如果从另一个目录加载 Angular 2 模块 (Fuel-ui) 将不起作用答案

【问题标题】：Angular 2 module (Fuel-ui) doesn't work if it's loaded from another directory如果从另一个目录加载 Angular 2 模块 (Fuel-ui) 将不起作用
【发布时间】：2017-01-23 13:11:17
【问题描述】：

我们正在使用 Gulp（刚从 ng-cli 迁移）来构建我使用 Fuel-ui 的 angular2 项目。

我有一个奇怪的错误。我在我们的一个组件中使用了 Fuel-ui 的警报组件。如果我们从 system.config.js 中的 node_modules/fuel-ui 文件夹一切都很好。如果我从 build/vendor/fuel-ui 引用它，它会失败并出现以下错误：

    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'

systemjs.config.js 的相关部分：有效，没有错误：

var map = {
        ...

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

不起作用，给出异常：

var map = {
        ...

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

组件的相关部分：

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 {

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

两个位置的文件相同。在这两种情况下都会加载fuel-ui.js。任何地方都没有 404 错误。两种情况下加载的js文件的加载顺序是一样的。

第一个配置仍然有效，第二个无效。我尝试对 system.config.js 中所有其他引用的包做同样的事情，一切都适用于我想使用的任何位置，除了fuel-ui。

您知道这里出了什么问题吗？

【问题讨论】：

感谢@tec-goblin 开始赏金。其他人：我正在处理这个问题。对我来说，这看起来像是 Systemjs 加载顺序的问题。 js 文件在物理上以相同的顺序加载。如果我检查 Chrome 中的网络选项卡，一切看起来都一样。我能够识别的唯一区别是所引用的fuel-ui的不同位置。两个地方的文件都是相同的。

标签： javascript angularjs angular systemjs fuelux

【解决方案1】：

我认为这可能会有所帮助。试试下面的链接 Github - https://github.com/angular/angular/issues/7526 如果子组件在父组件上声明为相同，则可能会出现问题。确保您的子组件在父组件之前声明。

【讨论】：