AngularJS1.6 ES6组件不显示模板答案

【问题标题】：AngularJS1.6 ES6 component not displaying templateAngularJS1.6 ES6组件不显示模板
【发布时间】：2017-03-29 19:09:19
【问题描述】：

我的文件夹是

client
 :src/
   :app/
     :common/
        :sidebar.module.js
        :sidebar.component.js
        :sidebar.controller.js
        :sidebar.html
   :root.module.js
   :root.component.js
   :root.html
 :index.html

我的 root.module.js 是

import angular from 'angular';
import {sidebar} from './common/sidebar.module';

angular.module('cms', ['sidebar']);

我的root.component.js里面的代码是

import angular from 'angular';

const options = {
  templateUrl: './root.html'
}

angular.module('cms').component('root', options);

我的 root.html 文件是

<div class="root">
  <h1>Hi, I am Ayush Bahuguna</h1>
  <my-sidebar></my-sidebar>
</div>

我的 sidebar.module.js 是

import angular from 'angular';

export const sidebar = angular.module('sidebar', []).name;

我的 sidebar.component.js 是

import angular from 'angular';
import {sidebar} from './sidebar.module';
import {sidebarController} from './sidebar.controller';

const sidebar = {
  templateUrl: './sidebar.html',
  controller: 'sidebarController',
  controllerAs: 'ctrl'
}

sidebar.component('mySidebar', sidebar).name;

我的 sidebar.controller.js 是

    function sidebarController(){
  var ctrl = this;
  ctrl.items = [{item: 'Home', icon: 'home', status: '/'}, {item: 'New Post', icon: 'note_add', status: '/new'}]
}

export sidebarController;

我的 sidebar.html 是

    <div class="sidebar">
  <ul class="sidebar-items">
    <li ng-repeat="item in ctrl.items"><i class="material-icons">{{item.icon}}</i>&nbsp;{{item.name}}</li>
  </ul>
</div>

而我的 index.html 是

    <!DOCTYPE html>
<html ng-app="cms">
  <head>
    <meta charset="utf-8">
    <title>Blog Admin | Ayush Bahuguna</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
  </head>
  <body>
  <root></root>
  <!-- <script src="client/dist/js/plugins/tinymce/tinymce.min.js" charset="utf-8"></script> -->
  <script src="/dist/js/vendor.js"></script>
  <script src="/dist/js/app.js"></script>
  </body>
</html>

这里的vendor.js 和app.js 是捆绑文件，我检查过它们没有问题。它们正在完美加载，但我的<root></root> 没有显示任何内容，甚至不关心<my-sidebar></my-sidebar>，因为它甚至没有显示h1。

您的帮助将不胜感激。

编辑我添加了更多文件。另外，在我的服务器端代码中，我有app.use(express.static('client'))

【问题讨论】：

您的文件夹结构中是否包含common 或commons？因为你展示了两者。另外，您是否将sidebar 定义为模块？
@Lex 它是common。抱歉打错了，是的，sidebar 已定义。但是我的root 组件根本无法工作，因为我的root.html 中的h1 也没有显示
请提供所有相关代码。 root.component.js 在哪里加载？人们如何知道从 common/sidebar.module 导出了什么？
@estus 嘿，不知道“root.component.js 在哪里加载？”是什么意思？我已经为这个问题添加了更多细节。
sidebar.component.js 和 root.component.js 文件不会在任何地方导入。

标签： angularjs angular-components

【解决方案1】：

AngularJS 不允许将相对路径用作 templateUrl（或至少，与您要放入组件的文件无关）。

相反，AngularJS 解析相对于某个根（可以配置 iirc）的 url。

为了解决这个问题，我猜您需要按如下方式更改您的 templateUrls（猜测，因为没有复制样本我无法确定）：

./root.html => ./src/root.html
./sidebar.html => ./src/app/common/sidebar.html

为了证明这一点，这里有两个 plunkrs：

不工作（使用你的方法）：https://plnkr.co/edit/1jfuuPP0ry0C7aFVvq06?p=preview
工作（使用./src/root.html）：https://plnkr.co/edit/uaKKro6IMiOzOz0xxiSY?p=preview

除此之外，可能还有更多问题，但如果没有完整的样本，这很难说。正如在 cmets 中已经提到的，您确实需要确保所有组件都已导入（您要么没有加载它们，要么上面没有提到加载它们的代码）。我通常会像这样替换我的组件和模块文件：

root.module.js：

import angular from 'angular';
import {sidebar} from './common/sidebar.module';
import {rootComponentName, rootComponent} from './root.component';

angular.module('cms', ['sidebar'])
  .component(rootComponentName, rootComponent);

root.component.js

import angular from 'angular';

export const rootComponentName = 'root';
export const rootComponent = {
  templateUrl: './root.html'
}

并对所有其他模块使用类似的方法。

看看：https://github.com/frederikprijck/angularjs-webpack-starter/blob/master/src/app/contacts/contacts.module.ts 关于这种方法。

【讨论】：