Angular: setting baseHref does not create subfolde

2019-06-02 20:54发布

问题:

When you run ng build with --base-href "/some/path/", why does angular not create subdirectories according to the path? When I start a http-server in my /dist/ I get errors like GET /some/path/assets/images/image.png Not Found! thrown in my face. when you look into /dist/, the problem is clear: there is only the assets folder directly, not inside other folders.

So what is the right way to set a baseHref?

What I try to accomplish is having different versions of the app (with different i18n locales) being served from the same domain but with a different baseHref, eg /EN/, /FR/ and so on.

回答1:

I had the same problem with my app that uses i18n. First of all: Angular is still beeing developed, so for example i18n doesnt work out of the box, depending on what you want to do here is a roadmap for i18n on GitHub #16477 maybe still in version 5 they want to implement dynamic translation so you won't need a different app for each language, but thats a different issue ;)

I suppose youz are looking for:

--output-path

with this command you set the path where your actual files will be stored (from Angular wiki)
--base-href only sets the href attribute in your index.html but since you want to set the path for the files you need to use --output-path

I'm not sure if you also need to set --deploy-url for your apps, anyway --deploy-url /en creates the following index.html:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Title</title>
      <base href="/">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <link rel="icon" type="image/x-icon" href="assets/favicon_link_icon.png">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link href="/en/styles.xxx.bundle.css" rel="stylesheet"/>
    </head>
    <body>
    <app-root></app-root>
    <script type="text/javascript" src="/en/inline.xxx.bundle.js"></script>
    <script type="text/javascript" src="/en/polyfills.xxx.bundle.js"></script>
    <script type="text/javascript" src="/en/main.xxx.bundle.js"></script>
    </body>
    </html>

--output-path ./dist/en creates a new folder dist/en with almost the same index.html only the src path is missing the /en/ prefix