Question

我正在尝试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

提前致谢。

Answer 1

我也遇到了这个错误。

就我而言，我将tsconfig.json命名为错误。当我更改为tsconfig.json时，再次运行npm install，然后再npm start，这一切都有效。

Answer 2

尝试更改配置中的地图。在我的情况下，我有

System.config({
    transpiler: 'typescript',
    typescriptOptions: { emitDecoratorMetadata: true },
    packages: {'app': {defaultExtension: 'ts'}},
    map: { 'app': './app' }
  });

其中/ app是创建组件（.ts）的文件夹

Answer 3

在index.html中引用app / main。你的main.ts文件是在名为app的文件夹中还是在根目录中？

Answer 4

tsconfig.js应为tsconfig.json

Answer 5

我认为这是system.config部分的问题。地图值为＆＃39; ./ angular2 / src / app＆＃39;这是错的。以下代码为我修好。

<script>
  System.config({
    transpiler: 'typescript',
    typescriptOptions: { emitDecoratorMetadata: true },
    packages: {'app': {defaultExtension: 'ts'}},
    map: { 'app': './app' }
  });
  System.import('app/hello_world_main')
        .then(null, console.error.bind(console));
</script>

地图：{＆＃39; app＆＃39;：＆＃39; ./ app＆＃39;确保在应用程序的app文件夹下搜索组件。

Answer 6

检查您是否已全局安装打字和 lite-server 您的cmd，键入typings，如果您还没有安装它们npm install -g typings lite-server。

并将以下代码添加到 app 目录中 main.ts 文件的顶部：

/// <reference path="../typings/browser.d.ts" />

现在运行npm install && npm run

Answer 7

命令时

Iterate List of Files

main.ts被转换为.js文件，并在每个文件名前添加“app”字样。但在npm start中，它会调用systemjs.configs.js而不是main.js

在我的情况下，我改变了

app.main.js

（在角度官方页面/ angular-2-quickstart上说明）到

'app':                        { main: 'main.js',  defaultExtension: 'js' },

并且效果很好。

不确定这是最好的解决方案......（请给我反馈。）

Answer 8

在您的systemjs.config.js中

将应用程序的映射更改为文件的正确路径，因此......行：

'app'：'app'，//'dist'，

更改为：

'app'：'你的路在这里'，为相对路径留空。

Answer 9

显然，

更新systemjs.config.js文件

来自

  'app': 'app',

要

  'app': './app',

后

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder

...

我在windows下遇到了问题。

Answer 10

这似乎是随机的，但有

    <base href='/'>

作为加载任何其他js之前index.html中的第一个标记解决了这个问题

Answer 11

如果添加了

，则在tsconfig.json中

"outDir":"yourOutDir"

您需要更改system.config.js中的maping位置

// our app is within the app folder
app: 'yourOutDir/app',

Answer 12

添加：

  // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      tsconfig: true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },

在文件systemjs.config.js上编译main.ts。

Answer 13

我认为你需要更新你的节点版本和npm ..

如果您的计算机上已经没有Node.js和npm，请安装它们。我们的示例需要node v5.x.x或更高版本以及npm 3.x.x或更高版本。要检查您使用的是哪个版本，请在终端窗口中运行node -v和npm -v。

这是来自快速入门指南的prerequisites section。

Answer 14

假设tscoding.json是一个拼写错误，对我来说，当我将npm和node更新为最新版本时，它就有用了。

如果我npm版3.10.3和node版v6.5.0，则设置正常。

Answer 15

我可以提出一些可能性。
1.你的解决方案中有main.ts吗？如果没有创建一个:) 如果你有。这是一个选项，您的启动项目不会编译打字稿文件。所以让我们试试这个命令：
npm run tsc
它应该在typescript输出文件夹中抛出main.js，默认情况下它与.ts文件位于同一文件夹中。
3.最后一个：你的启动命令应该包含正常的tsc命令。最好将项目（在package.json中）作为
启动 npm run tsc && concurrently \"npm run tsc:w\" ...
（这样，如果ts编译失败，您的项目就不会运行。

Answer 16

将tsconfig.json更改为

＆＃13;

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

＆＃13;

然后运行npm install然后npm启动它将真正开始工作

Answer 17

e.x。项目文件夹是＆＃34; tmp＆＃34;

tsconfig.json改变了这个

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir":"tmp"
  }
}

像这样的systemjs.config.js

  // our app is within the app folder
  app: 'app', 


// packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: 'main.js',
        defaultExtension: 'js'
      },

它有效。

Answer 18

通过删除＆＃34; outDir＆＃34;：＆＃34; js＆＃34;解决问题在tsconfig.js文件中。现在所有已编译的app .js文件都保存到app文件夹而不是js文件夹。

Answer 19

尝试使用tsc -p src手动手动编译打字稿文件。然后运行开发服务器。

Answer 20

index.html和styles.css应该在项目的根文件夹中（不是app /）
查看quickstart page

底部的项目结构

Answer 21

您好我有同样的问题，但它解决了在根文件夹中创建文件夹 app 并将文件main.ts和app.component.ts移动到它tutorial folder structure

Angular 2快速入门404 GET /app/main.js

21 个答案: