我正在尝试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启动它一切正常。
