无法使角度组件与 componentRouter 一起使用答案

【问题标题】：Can't make an angular component work with componentRouter无法使角度组件与 componentRouter 一起使用
【发布时间】：2016-05-05 23:53:35
【问题描述】：

我正在尝试制作一个样板来使用 angular 1.5.x 和组件，但是（目前）不可能使组件工作。

这是我的文件夹结构：

rootfolder
  .....
  index.html
  static/
    app/
      components/
        app/
          appBase.js
        hello/
          hello.js
      app.js
      routes.js
      services.js

所以这个想法很简单：把组件拆开，里面有路由。我正在使用 John Papa 风格指南和 Todd Motto。

这是我的模块：

app.js（主模块）

(function() {

 'use strict'
  angular
    .module('app', ['ngComponentRouter', 'app', 'app.hello'])

})();

routes.js（配置文件）

(function(){
    'use strict';

    angular
      .module('app')
      .config(config)
      .value('$routerRootComponent', 'app');

    config.$inject = ['$locationProvider'];

    function config($locationProvider){
      $locationProvider.html5Mode(true);
    };

})();

组件：appBase.js / hello.js 在单独的文件夹中。

(function() {

  'use strict';

  var app = {
    template: `
                <hello></hello>
                <ng-outlet></ng-outlet>
              `,
    $routeConfig: [
      { path: '/', name: 'app', component: 'hello' }
    ]
  };

  angular
    .module('app', [])
    .component('app', app);

})();

(function() {

  'use strict';

  var hello = {
    template: `<h1>Hello World</h1>`
  };

  angular
    .module('app.hello', [])
    .component('hello', hello);

})();

index.html

<!DOCTYPE html>
<html ng-app="app" lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>Components example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>

    <app></app>

    <script src="static/assets/bower/bower_components/angular/angular.js"></script>
    <script src="static/assets/bower/bower_components/angular-component-router/angular_1_router.js"></script>
    <script src="static/assets/js/dist/angular-app.min.js"></script>
</body>
</html>

我在控制台中没有错误，应用程序模块正在完成这项工作：

<app>
    <hello></hello>
     <ng-outlet></ng-outlet>
</app>

但是hello 组件不起作用...有什么想法吗？

【问题讨论】：

您的应用程序脚本在 index.html 中的什么位置？
所有都被缩小并与我在 app.min.js 中的 gulp 任务相连接
哦，我现在明白了。哈哈完全错过了

标签： javascript angularjs

【解决方案1】：

我不知道为什么您没有收到任何控制台错误，但我认为您在这里覆盖了您自己的模块定义。

尝试：

(function() {

 'use strict'
  angular
    .module('app', ['ngComponentRouter', 'app.hello'])
    .module('app.hello', [])
})();

和

angular
    .module('app')
    .component('app', app);

和

angular
    .module('app.hello')
    .component('hello', hello);

【讨论】：

所以你说我需要使用“getter”而不设置新模块？喜欢angular.module('app').component()....？
问题就是这样！我正在覆盖 app 模块。