如何在Angular 2 CLI中使用“ng build --prod”和“ng serve --prod”，得到404错误

Question

当我尝试使用--prod选项运行ng build时，它会编译为一个主文件。 js文件，并且在控制台中没有出现错误。

但是，当我在浏览器中运行应用程序它仍然寻找个人js文件。

我main.ts：

// default 
import { provide, enableProdMode, ExceptionHandler } from '@angular/core'; 
import { LocationStrategy, HashLocationStrategy } from '@angular/common'; 
import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { HTTP_PROVIDERS, Http } from '@angular/http'; 

// External 
import { 
    TranslateService, TranslateLoader, TranslateStaticLoader 
} from 'ng2-translate/ng2-translate'; 
import {Angulartics2} from 'angulartics2'; 

// mine 
import { CustomExceptionHandler } from './app/_common/CustomExceptionHandler'; 
import { UserService } from './app/_services/user.service'; 
import { MessagesService } from './app/_services/messages.service'; 
import { APP_ROUTER_PROVIDERS } from './app/app.routes'; 
import { App, environment } from './app/'; 

if (environment.production) { 
    enableProdMode(); 
} 

bootstrap(App, [ 
    APP_ROUTER_PROVIDERS, 
    HTTP_PROVIDERS, 
    provide(ExceptionHandler, { useClass: CustomExceptionHandler }), 
    provide(LocationStrategy, { useClass: HashLocationStrategy }), 
    { 
    provide: TranslateLoader, 
    useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'), 
    deps: [Http] 
    }, 
    Angulartics2, 
    TranslateService, 
    MessagesService, 
    UserService 
]) 
.then(() => { 
    console.log('Angular 2 loaded'); 
}) 
.catch(err => console.error(err)); 

当应用程序在它看起来

app/_services/messages.service.js 
app/_services/user.service.js 
app/app.routes.js 
etc... 

浏览器中运行所有这些请求的过程中获得的404，因为JS文件都被压缩到一个main.js文件。我如何避免这种情况？

Answer 1

当您构建产品时，路径将更改为您正在查看的系统的根目录，而不是您的应用的根目录。

通过将正确的路径从系统的用户根文件夹传递到您的构建项目所在的位置来构建它。

例子：

ng build -prod --base-href /tony/myproject/