Question

我们有一个用例，我们的Angular2应用程序可在/pro/处获得。这使我们的基础href：<base href="/pro/">。这适用于路由，资源等。但main.css中的index.js和index.html无法找到并导致404，因为它在/pro/main.css处查找它们。 / p>

我似乎无法找到修复这些文件包含的方法。这里有谁可能有解决方案？

我们正在使用webpack。
我们正在使用RC4版Angular2。

我们的index.html看起来像这样：

<!doctype html>
<html>
<head>
    <title>-</title>
    <meta charset="UTF-8">
    <meta name="description" content="-">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="/pro/">
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <app>
        Loading ...
    </app>
    <script src="index.js"></script>
</body>
</html>

这会导致从/pro/main.css加载css和index.js - 这就是我们想要的行为。不幸的是，它给了我一个404。

我已将baseUrl设置为main.node.ts：

// the polyfills must be the first thing imported in node.js
// import 'angular2-universal/polyfills'; // polyfills are moved to server.ts

// Angular 2 Universal
import {
  REQUEST_URL,
  ORIGIN_URL,
  NODE_LOCATION_PROVIDERS,
  NODE_HTTP_PROVIDERS,
  ExpressEngineConfig
} from 'angular2-universal';

import { provideRouter } from '@angular/router';
import { APP_BASE_HREF } from '@angular/common';

// Application
import {App} from './app/app.component';
import {routes} from './app/app.routes';

export function ngApp(req, res) {
  let baseUrl = '/pro/';
  let url = req.originalUrl || '/';

  let config: ExpressEngineConfig = {
    directives: [
      App
    ],
    platformProviders: [
      {provide: ORIGIN_URL, useValue: 'http://localhost:3000'},
      {provide: APP_BASE_HREF, useValue: baseUrl},
    ],
    providers: [
      {provide: REQUEST_URL, useValue: url},
      NODE_HTTP_PROVIDERS,
      provideRouter(routes),
      NODE_LOCATION_PROVIDERS
    ],
    async: true,
    preboot: false // { appRoot: 'app' } // your top level app component selector
  };

  res.render('index', config);
}

路由/静态服务是这样完成的：

app.use('/pro/assets', express.static(path.join(__dirname, 'assets'), {maxAge: 30}));
app.get('/pro', ngApp);
app.get('/pro/about', ngApp);
app.get('/pro/about/*', ngApp);

Answer 1

您可以提供

而不是<base href="...">

import {APP_BASE_HREF} from '@angular/common';

{ provide: APP_BASE_HREF, useValue: '/pro/' }

仅指定路由器。

Answer 2

在我看来，这与Angular无关。正如<base>的规范所说：

HTML元素指定用于文档中包含的所有相对URL的基本URL。 Source

尝试href="/main.css"（或../main.css）。

index.js和main.css没有解析不同的基本URL

2 个答案: