javascript - 无法启动 Angular 2 Hello World

Question

我在启动第一个 angular 2 应用程序时遇到问题:

我从项目根文件夹执行命令 npm start:

D:\javaScript\angular2-intro>npm start

> angular2-todo@1.0.0 start D:\javaScript\angular2-intro
> tsc && concurrently "tsc -w" "lite-server"

app/app.module.ts(4,28): error TS2307: Cannot find module './app.component'.
app/app.module.ts(8,5): error TS2345: Argument of type '{ imports: typeof Browse
  Object literal may only specify known properties, and 'declaration' does not e

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\
npm ERR! node v5.4.1
npm ERR! npm  v4.0.3
npm ERR! code ELIFECYCLE
npm ERR! angular2-todo@1.0.0 start: `tsc && concurrently "tsc -w" "lite-server"
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the angular2-todo@1.0.0 start script 'tsc && concurrently "ts
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-todo package
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     tsc && concurrently "tsc -w" "lite-server"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2-todo
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular2-todo
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\javaScript\angular2-intro\npm-debug.log

npm-debug.log:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using npm@4.0.3
3 info using node@v5.4.1
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle angular2-todo@1.0.0~prestart: angular2-todo@1.0.0
6 silly lifecycle angular2-todo@1.0.0~prestart: no script for prestart, continuing
7 info lifecycle angular2-todo@1.0.0~start: angular2-todo@1.0.0
8 verbose lifecycle angular2-todo@1.0.0~start: unsafe-perm in lifecycle true
9 verbose lifecycle angular2-todo@1.0.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\javaScript\angular2-intro\node_modules\.bin;C:\Program Files (x86)\JetBrains\IntelliJ IDEA 15.0.1\bin\;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\TortoiseSVN\bin;C:\Program Files\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\110\DTS\Binn\;C:\Program Files\Microsoft SQL Server\110\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\ManagementStudio\;C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\PrivateAssemblies\;C:\Program Files (x86)\Skype\Phone\;C:\Program Files\nodejs\;C:\Program Files (x86)\Bitvise SSH Client;C:\Windows\System32\;C:\Program Files\Java\jdk1.6.0_45\bin;C:\Program Files (x86)\apache\apache-maven-3.0.5\bin;C:\Program Files (x86)\gradle-2.3-all\gradle-2.3\bin;C:\Program Files\7-Zip;C:\Users\ntkachev\AppData\Local\Microsoft\WindowsApps;
10 verbose lifecycle angular2-todo@1.0.0~start: CWD: D:\javaScript\angular2-intro
11 silly lifecycle angular2-todo@1.0.0~start: Args: [ '/d /s /c', 'tsc && concurrently "tsc -w" "lite-server" ' ]
12 silly lifecycle angular2-todo@1.0.0~start: Returned: code: 2  signal: null
13 info lifecycle angular2-todo@1.0.0~start: Failed to exec start script
14 verbose stack Error: angular2-todo@1.0.0 start: `tsc && concurrently "tsc -w" "lite-server" `
14 verbose stack Exit status 2
14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:279:16)
14 verbose stack     at emitTwo (events.js:87:13)
14 verbose stack     at EventEmitter.emit (events.js:172:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:87:13)
14 verbose stack     at ChildProcess.emit (events.js:172:7)
14 verbose stack     at maybeClose (internal/child_process.js:821:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid angular2-todo@1.0.0
16 verbose cwd D:\javaScript\angular2-intro
17 error Windows_NT 10.0.14393
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
19 error node v5.4.1
20 error npm  v4.0.3
21 error code ELIFECYCLE
22 error angular2-todo@1.0.0 start: `tsc && concurrently "tsc -w" "lite-server" `
22 error Exit status 2
23 error Failed at the angular2-todo@1.0.0 start script 'tsc && concurrently "tsc -w" "lite-server" '.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the angular2-todo package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     tsc && concurrently "tsc -w" "lite-server"
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs angular2-todo
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls angular2-todo
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

我的项目结构:

主要.ts

import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";

import {AppModule} from "./app.module";

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

应用程序模块.ts:

import {BrowserModule} from "@angular/platform-browser";
//import {NgModule} from "../node_modules/@angular/core/src/metadata/ng_module";
import {NgModule} from "@angular/core";
import {AppComponent} from "./app.component"

@NgModule({
    imports: [BrowserModule],
    declaration: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {

}

应用程序组件.js

import {Component} from "@angular/core"

@Component({
    selector: "app",
    template: "<h1>Angular 2Do</h1>"
})
export class AppComponent {

}

请帮助理解原因。

Answer 1

看起来你在 app.module.ts 中有错字。

声明是复数(带有's')

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

还要确保所有语句都以分号结尾，app.module.ts 在应用程序组件导入中缺少分号