0

I code an application using Angular 2 / Gulp. I've an issue after deploying my code using Gulp. 

GET http://127.0.0.1/projects/myproject/angular2/router 404 (Not Found)
Error loading http://127.0.0.1/projects/myproject/angular2/router as "angular2/router" from http://127.0.0.1/projects/myproject/boot
    at o (http://127.0.0.1/projects/myproject/vendors.min.js:7:842)
    at XMLHttpRequest.L.a.onreadystatechange (http://127.0.0.1/projects/myproject/vendors.min.js:7:1430)
    at XMLHttpRequest.t [as _onreadystatechange] (http://127.0.0.1/projects/myproject/vendors.min.js:6:3295)
    at e.invokeTask (http://127.0.0.1/projects/myproject/vendors.min.js:5:31190)
    at e.runTask (http://127.0.0.1/projects/myproject/vendors.min.js:5:28550)
    at XMLHttpRequest.invoke (http://127.0.0.1/projects/myproject/vendors.min.js:6:285)
GET http://127.0.0.1/projects/myproject/angular2/http 404 (Not Found)
GET http://127.0.0.1/projects/myproject/lodash 404 (Not Found)

However, there is no problem when I test from lite server (npm start).

I build my vendor.min.js file with gulp : 

gulp.task('vendor-bundle', function () {
    gulp.src([
        'node_modules/jquery/dist/jquery.js',
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/angular2/bundles/angular2-polyfills.js',
        'node_modules/systemjs/dist/system.src.js',
        'node_modules/rxjs/bundles/Rx.js',
        'node_modules/angular2/bundles/angular2.dev.js',
        'node_modules/lodash/lodash.js',
        'node_modules/lodash/index.js',
        'node_modules/angular2/bundles/http.dev.js',
        'node_modules/angular2/bundles/router.min.js'
    ])
        .pipe(concat('vendors.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

And reference it in my index.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyWebstite</title>
    <script src="vendors.min.js"></script>
    <script src="app.min.js"></script>
</head>
<base href="/">
<!-- 3. Display the application -->
<body>
    <master-page></master-page>
</body>
</html>

In my boot.ts file, I import the references : 

import {bootstrap}    from 'angular2/platform/browser'
import {provide} from "angular2/core"
import {ROUTER_DIRECTIVES,ROUTER_PROVIDERS} from "angular2/router"
import {HTTP_PROVIDERS} from "angular2/http"
import 'rxjs/add/operator/map'

import {MasterPage} from './components/pages/master-page/master-page.component'

var appPromise = bootstrap(<any>MasterPage, [
    ROUTER_PROVIDERS
    , HTTP_PROVIDERS]);

One idea is to correct that into my System.config script. I've searched a solution for a while without any success. Any idea ?

  • You need to configure your server to support HTML5 pushstate http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser – Günter Zöchbauer Jul 05 '16 at 09:49
  • Why is my vendors.min.js trying to load that files that are normaly included in vendors.min.js according to the gulp task 'vendor-bundle' above ? The others Javascript files (app.min.js, vendors.min.js) are correctly loaded from the server. –  Jul 05 '16 at 09:54

0 Answers0