Angular 2快速入门404 GET /app/main.js
Dan*_*rez 28 typescript angular
我正在尝试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一样
提前致谢.
小智 17
我也得到了这个错误.
在我的情况下,我tsconfig.json说错了.当我改变tsconfig.json,npm install再次跑,然后npm start一切都工作.
- 谢啦!我也错误地将tsconfig.json命名为tsconfig.js :) (2认同)
小智 11
尝试更改配置中的地图.就我而言,我有
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}},
map: { 'app': './app' }
});
其中/ app是创建组件(.ts)的文件夹
在您的index.html中引用了app/main.你的main.ts文件在名为app的文件夹中还是在根目录中？
- @Guus - main:'./ app.main.js'为我解决了这个问题 (4认同)
- 我有同样的错误.在[typescript tutorial](https://angular.io/docs/ts/latest/quickstart.html#!#systemjs)中描述的systemjs.config.js中有一行''app':{main:'main .js',defaultExtension:'js'},`将此更改为`main.ts`并没有为我解决这个问题. (2认同)