404（未找到）使用.ts文件

当我加载在我的生产ENV页面错误，我得到以下错误：404（未找到）使用.ts文件

GET http://example.com/Scripts/main.ts 404 (Not Found) error: (SystemJS) XHR error (404 Not Found) loading http://example.com/Scripts/main.ts

这不会对我的dev发生。 ENV。

这发生在我的index.html文件中。我验证了所有路径是否正确，并且路径中存在main.ts文件。

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

如果我改变我的main.ts文件main.js extention，有没有 404错误。

这里是我的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 protected]', 
     'ts':      'npm:[email protected]/lib/plugin.js', 
     'typescript':    'npm:[email protected]/lib/typescript.js', 

    }, 

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

})(this);

来源

2017-02-23 Koby Douek

请参阅我在下面发布的答案。您接受的答案是对现代JavaScript工具转译器，工作流程和构建系统的完全无知。因为它是事实上不正确的，所以将其视为公认的答案将是一种耻辱。 –

您的浏览器不明白打字稿，只有打字稿编译器。 TypeScript编译器的输出是JavaScript，所以main.js是要导入的正确文件。

来源

2017-02-23 09:56:01

我无法将所有文件更改为JS ...这并不能真正解决我的问题。 –

我不会告诉你把你的文件改成JS。我告诉你不要在浏览器中包含TypeScript文件。下面是一个类比：如果您编写Java代码，它将被编译为字节码，由Java运行时执行。 Java运行时不知道如何处理.java源文件，它们只能用于字节码。同样，您的浏览器不了解TypeScript。你在TypeScript中编码，编译成JavaScript并在浏览器中使用JavaScript文件。这是它工作的唯一方式。 –

我该如何做到这一点？它是如何工作在我的开发环境？ –

请不用理会@Cobus Kruger的回答，他是非常无法理解的。

在开发过程中直接在浏览器中导入TypeScript文件（或动态地将它们捆绑在一起），这与您尝试执行的方式完全相同。绝对不需要运行吞吐任务或任何类型的任何东西来编译您的TypeScript，以用于开发或生产捆绑。

你只是有一些小的配置错误。

请注意下面更新的配置。我把身边的变化

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 protected]', 
     'ts':      'npm:[email protected]/lib/plugin.js', 
     'typescript':    'npm:[email protected]/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);

多余的空行最后改变你的浏览器引导，让你有以下

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

没有，我们从我们能想通这将给我们的应用程序包导入main.ts

视您脚本文件夹是相对于你的应用文件夹中，您可能需要进行一些更改，但显然来自错误的目录。

如果你没有真正有一个文件夹命名为应用包含main.ts，刚刚从应用更改包的名称在packages财产上述到脚本，然后System.import('Scripts')。

来源

2017-02-24 09:41:40

谢谢。我会在星期天试一下，并相应评分。 –

我刚刚测试了您的解决方案，但它将我返回到之前的相同错误：http://example.com/Scripts/main.ts 404（Not Found）错误。 –

404（未找到）使用.ts文件

回答

相关问题