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会解析相对于某个根的URL（可以配置为iirc）。

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

./root.html =＆gt; ./src/root.html
./sidebar.html =＆gt; ./src/app/common/sidebar.html

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

无法使用（使用您的方法）：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组件不显示模板

1 个答案: