角路由将路径返回到html而不是html

Question

It's almost set up, except ui-view is loading the path to my html file instead of the html itself.

import angular from 'angular';
import angularMeteor from 'angular-meteor';
import template from './main.html';
import uiRouter from 'angular-ui-router';

import About from '../pages/about/about';

export default angular.module('main', [
  angularMeteor,
  uiRouter,
  About.name
])
  .component('main', {
    templateUrl: 'imports/main/main.html',
    controller: MainCtrl
  })
  .config(config);

function config($locationProvider, $urlRouterProvider) {
  'ngInject';

  $locationProvider.html5Mode(true);

  $urlRouterProvider.otherwise('/');
}

Here's the about page javascript

class About {}

const name = 'about';

export default angular.module(name, [angularMeteor, uiRouter])
.component(name, {
  template,
  controllerAs: name,
  controller: About
})
.config(config);

function config($stateProvider) {
  'ngInject';

  $stateProvider
  .state('about', {
    url: '/about',
    template: '<about></about>'
  });
}

So it will say /imports/pages/about/about.html instead of what's actually in the html file.

Answer 1

I think you're not pointing to the file the right way.

Try to change the following:

$stateProvider
.state('about', {
url: '/about',
template: '<about></about>'
});

into

$stateProvider
.state('about', {
url: '/about',
template: require('/imports/pages/about/about.html')
});

Let me know if this works.

Answer 2

将模板更改为templateUrl

templateUrl: 'imports/pages/about/about.html',