angular - error 404 (No encontrado) al usar archivos .ts

cuando cargo una página en mi entorno de producción, obtengo el siguiente error:

OBTENER http://example.com/Scripts/main.ts error 404 (No Encontrado): (SystemJS) error XHR (404 No Encontrado) cargando http://example.com/Scripts/main.ts

Esto no sucede en mi entorno de desarrollo.

Esto ocurre en mi archivo index.html. Verifiqué y todas las rutas son correctas, y el archivo main.ts existe en la ruta.

<script src="/Scripts/systemjs.config.js"></script>
<script>
      System.import('/Scripts/main.ts').catch(function(err){ console.error(err); });
</script>

Si cambio mi archivo main.ts a la extensión main.js, no hay error 404.

Aquí está mi archivo systemjs.config.js:

(function (global) {
  System.config({
    transpiler: 'ts',
    typescriptOptions: {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": ["es2015", "dom"],
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    paths: {
      'npm:': 'https://unpkg.com/'
    },
    map: {
      app: 'app',
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

      'rxjs':                      'npm:[email ',
      'ts':                        'npm:[email /lib/plugin.js',
      'typescript':                'npm:[email /lib/typescript.js',

    },

    packages: {
        app: {
            format: 'register',
        main: '/Scripts/main.ts',
        defaultExtension: 'ts'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });

})(this);

Respuesta #1

Tu navegador no entiende TypeScript, solo el compilador de TypeScript lo hace. La salida del compilador de TypeScript es JavaScript, por lo que main.js es el archivo correcto para importar.

Respuesta #2

Por favor, no prestes atención a la respuesta de @Cobus Kruger, él está terriblemente desinformado.

Es perfectamente válido importar archivos TypeScript directamente en el navegador durante el desarrollo (o empaquetarlos dinámicamente) justo de la manera que estás intentando hacerlo. Tampoco hay ninguna necesidad de ejecutar tareas de gulp ni nada por el estilo para compilar tu TypeScript, ya sea para desarrollo o para un paquete de producción.

Solo tienes algunos errores menores de configuración.

Toma nota de la configuración actualizada a continuación. Puse líneas en blanco adicionales alrededor de los cambios

function (global) {
  System.config({

    defaultJSExtensions: true,

    baseURL: "/",

    transpiler: 'ts',
    typescriptOptions: {
      "target": "es5",
      "module": "system",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": ["es2015", "dom"],
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
    },
    paths: {
      'npm:': 'https://unpkg.com/'
    },
    map: {



      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

      'rxjs':                      'npm:[email ',
      'ts':                        'npm:[email /lib/plugin.js',
      'typescript':                'npm:[email /lib/typescript.js',

    },

    packages: {

        // note the differences particularly here

      app: {

        // assuming Scripts is a subdir of app
        main: 'Scripts/main.ts',

        defaultExtension: 'ts',

        meta: {
          "*.ts": {
            loader: "ts"
          },

          "*.js": {
            loader: "ts"
          }
        }
      }
    }
  });

})(this);

Finalmente, altera tu arranque en el navegador para que tengas lo siguiente

<script src="/Scripts/systemjs.config.js"></script>
<script>
      System.import('app').catch(function(err){ console.error(err); });
</script>

No que importamos del paquete de la aplicación que podamos averiguar cuál nos dará main.ts

Dependiendo de dónde se encuentre tu carpeta Scripts en relación con tu carpeta app, es posible que tengas que hacer un par de cambios, pero claramente estaba viniendo del directorio incorrecto.

Si en realidad no tienes una carpeta llamada app que contenga main.ts, simplemente cambia el nombre de tu paquete en la propiedad packages de arriba de app a Scripts y luego System.import('Scripts').