简体   繁体   中英

Cannot start angular 2 hello world

I experience the problems while starting my first angular 2 application:

I execute command npm start from project root folder:

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 ]

My project structure:

在此输入图像描述

main.ts

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

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

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

app.module.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 {

}

app.components.js

import {Component} from "@angular/core"

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

}

Please, help to understand the reason.

It looks like you have a typo in app.module.ts.

Declarations is plural (with an 's')

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

Also make sure all statements end with a semi-colon, app.module.ts is missing a semi-colon on the app-component import

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM