typescript – Angular 2 Quickstart 404 GET /app/main.js
发布时间：2020-12-17 08:14:50 所属栏目：安全 来源：网络整理
导读：我正在尝试Angular 2的快速启动，但是我不明白它的作用。我一直在找出一些类似的问题，但我没有找到答案。有人可以帮我吗 这是我的代码。 app.component.ts import {Component} from 'angular2/core';@Component({ selector: 'my-app',template: 'h1My First
|
我正在尝试Angular 2的快速启动，但是我不明白它的作用。我一直在找出一些类似的问题，但我没有找到答案。有人可以帮我吗
这是我的代码。 app.component.ts import {Component} from 'angular2/core';
@Component({
selector: 'my-app',template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
main.ts import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
的index.html <html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills,in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"> </script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null,console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
的package.json {
"name": "angular2-quickstart","version": "1.0.0","scripts": {
"start": "concurrently "npm run tsc:w" "npm run lite" ","tsc": "tsc","tsc:w": "tsc -w","lite": "lite-server","typings": "typings","postinstall": "typings install"
},"license": "ISC","dependencies": {
"angular2": "2.0.0-beta.7","systemjs": "0.19.22","es6-promise": "^3.0.2","es6-shim": "^0.33.3","reflect-metadata": "0.1.2","rxjs": "5.0.0-beta.2","zone.js": "0.5.15"
},"devDependencies": {
"concurrently": "^2.0.0","lite-server": "^2.1.0","typescript": "^1.8.2","typings":"^0.6.8"
}
}
tscoding.json {
"compilerOptions": {
"target": "ES6","module": "system","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"removeComments": false,"noImplicitAny": false
},"exclude": [
"node_modules","typings/main","typings/main.d.ts"
]
}
npm开始输出 > npm start
> angular2-quickstart@1.0.0 start /Users/dpcrespo/Google Drive/projects/tutorials/angular/angular2-quickstart
> concurrently "npm run tsc:w" "npm run lite"
[0]
[0] > angular2-quickstart@1.0.0 tsc:w /Users/dpcrespo/Google Drive/projects/tutorials/angular/angular2-quickstart
[0] > tsc -w
[0]
[1]
[1] > angular2-quickstart@1.0.0 lite /Users/dpcrespo/Google Drive/projects/tutorials/angular/angular2-quickstart
[1] > lite-server
[1]
[0] Version 1.8.7
[0] Syntax: tsc [options] [file ...]
[0]
[0] Examples: tsc hello.ts
[0] tsc --out file.js file.ts
[0] tsc @args.txt
[0]
[0] Options:
[0] --allowJs Allow javascript files to be compiled.
[0] --allowSyntheticDefaultImports Allow default imports from modules with no default export. This does not affect code emit,just typechecking.
[0] --allowUnreachableCode Do not report errors on unreachable code.
[0] --allowUnusedLabels Do not report errors on unused labels.
[0] -d,--declaration Generates corresponding '.d.ts' file.
[0] --experimentalDecorators Enables experimental support for ES7 decorators.
[0] --forceConsistentCasingInFileNames Disallow inconsistently-cased references to the same file.
[0] -h,--help Print this message.
[0] --init Initializes a TypeScript project and creates a tsconfig.json file.
[0] --jsx KIND Specify JSX code generation: 'preserve' or 'react'
[0] --mapRoot LOCATION Specifies the location where debugger should locate map files instead of generated locations.
[0] -m KIND,--module KIND Specify module code generation: 'commonjs','amd','system','umd' or 'es2015'
[0] --moduleResolution Specifies module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6).
[0] --newLine NEWLINE Specifies the end of line sequence to be used when emitting files: 'CRLF' (dos) or 'LF' (unix).
[0] --noEmit Do not emit outputs.
[0] --noEmitOnError Do not emit outputs if any errors were reported.
[0] --noFallthroughCasesInSwitch Report errors for fallthrough cases in switch statement.
[0] --noImplicitAny Raise error on expressions and declarations with an implied 'any' type.
[0] --noImplicitReturns Report error when not all code paths in function return a value.
[0] --noImplicitUseStrict Do not emit 'use strict' directives in module output.
[0] --outDir DIRECTORY Redirect output structure to the directory.
[0] --outFile FILE Concatenate and emit output to single file.
[0] --preserveConstEnums Do not erase const enum declarations in generated code.
[0] --pretty KIND Stylize errors and messages using color and context. (experimental)
[0] -p DIRECTORY,--project DIRECTORY Compile the project in the given directory.
[0] --reactNamespace Specifies the object invoked for createElement and __spread when targeting 'react' JSX emit
[0] --removeComments Do not emit comments to output.
[0] --rootDir LOCATION Specifies the root directory of input files. Use to control the output directory structure with --outDir.
[0] --sourceMap Generates corresponding '.map' file.
[0] --sourceRoot LOCATION Specifies the location where debugger should locate TypeScript files instead of source locations.
[0] --suppressImplicitAnyIndexErrors Suppress noImplicitAny errors for indexing objects lacking index signatures.
[0] -t VERSION,--target VERSION Specify ECMAScript target version: 'ES3' (default),'ES5',or 'ES2015' (experimental)
[0] -v,--version Print the compiler's version.
[0] -w,--watch Watch input files.
[0] @<file> Insert command line options and files from a file.
[0] npm run tsc:w exited with code 0
[1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
[1] ** browser-sync options **
[1] { injectChanges: false,[1] files: [ './**/*.{html,htm,css,js}' ],[1] server: { baseDir: './',middleware: [ [Function],[Function] ] } }
[1] [BS] Access URLs:
[1] ------------------------------------
[1] Local: http://localhost:3000
[1] External: http://192.168.0.9:3000
[1] ------------------------------------
[1] UI: http://localhost:3001
[1] UI External: http://192.168.0.9:3001
[1] ------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[1] 16.03.16 11:30:42 304 GET /index.html
[1] 16.03.16 11:30:42 304 GET /styles.css
[1] 16.03.16 11:30:42 304 GET /node_modules/es6-shim/es6-shim.min.js
[1] 16.03.16 11:30:42 304 GET /node_modules/systemjs/dist/system- polyfills.js
[1] 16.03.16 11:30:42 304 GET /node_modules/angular2/bundles/angular2-polyfills.js
[1] 16.03.16 11:30:42 304 GET /node_modules/systemjs/dist/system.src.js
[1] 16.03.16 11:30:42 304 GET /node_modules/angular2/es6/dev/src/testing/shims_for_IE.js
[1] 16.03.16 11:30:42 304 GET /node_modules/rxjs/bundles/Rx.js
[1] 16.03.16 11:30:42 304 GET /node_modules/angular2/bundles/angular2.dev.js
[1] 16.03.16 11:30:42 404 GET /app/main.js
在我的浏览器 就好像它不会将main.ts文件转换成main.js 提前致谢。
我也收到这个错误。
在我的情况下，我命名tsconfig.json错了。当我更改为tsconfig.json，再次运行npm安装，然后npm启动它一切正常。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |