AngularJS1.6 ES6 组件不显示模板

Question

我的文件夹是

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'))

Answer 1

AngularJS 不允许使用相对路径作为 templateUrl（或至少，不是相对于您放置组件的文件）。

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

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

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

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

无效（使用您的方法）：https://plnkr.co/edit/1jfuuPP0ry0C7aFVvq06?p=preview
正在工作（使用 ./src/root.html）：https://plnkr.co/edit/uaKKro6IMiOzOz0xxiSY?p=preview

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

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 关于此方法。

AngularJS1.6 ES6 组件不显示模板

AngularJS1.6 ES6 component not displaying template

angularjs

angular-components